Authentication module for Nuxt.js https://auth.nuxtjs.org
Github：https://github.com/nuxt-community/auth-module
Demo：https://nuxt-auth.herokuapp.com/

引入

npm install @nuxtjs/auth @nuxtjs/axios

配置

首先看看 nuxt.config.js
需要配置 modules 項 和 auth 項

modules: [
  '@nuxtjs/axios',
  '@nuxtjs/auth'
],

auth: {
  // Options
}

來看個完整版的

const { resolve } = require('path')

module.exports = {
  rootDir: resolve(__dirname, '../..'),
  buildDir: resolve(__dirname, '.nuxt'),
  srcDir: __dirname,
  build: {
    extractCSS: true
  },
  serverMiddleware: ['../api/auth'],
  modules: ['bootstrap-vue/nuxt', '@nuxtjs/axios', '@@'],
  axios: {
    proxy: true
  },
  proxy: {
    '/api': 'http://localhost:3000'
  },
  auth: {
    redirect: {
      callback: '/callback'
    },
    strategies: {
      local: {
        endpoints: {
          login: { propertyName: 'token.accessToken' }
        }
      },
      auth0: {
        domain: 'nuxt-auth.auth0.com',
        client_id: 'q8lDHfBLJ-Fsziu7bf351OcYQAIe3UJv'
      },
      facebook: {
        client_id: '1671464192946675',
        userinfo_endpoint: 'https://graph.facebook.com/v2.12/me?fields=about,name,picture{url},email,birthday',
        scope: ['public_profile', 'email', 'user_birthday']
      },
      google: {
        client_id:
          '956748748298-kr2t08kdbjq3ke18m3vkl6k843mra1cg.apps.googleusercontent.com'
      },
      github: {
        client_id: process.env.GITHUB_CLIENT_ID,
        client_secret: process.env.GITHUB_CLIENT_SECRET
      },
      twitter: {
        client_id: 'FAJNuxjMTicff6ciDKLiZ4t0D'
      }
    }
  }
}

有幾個注意點征峦，分別說一下

1. serverMiddleware
   這里的中間件是/api/auth.js奈虾，下面會放這個文件的內(nèi)容铜涉。

Path: /api/auth
POST /login 通過username password 驗證，正確則簽發(fā)JWT脆霎，返回 accessToken
GET /user 獲取用戶信息涡驮，實際代碼
POST /logout

2. strategy

github: {
    client_id: process.env.GITHUB_CLIENT_ID,
    client_secret: process.env.GITHUB_CLIENT_SECRET
},

源代碼里盡量使用 process.env 傳入 id secret 等參數(shù)

頁面

看 public 頁面中的 script

<script>
export default {
  middleware: ['auth'],
  options: {
    auth: false
  }
}
</script>

看 secure 頁面中的 script

<script>
export default {
  middleware: ['auth'],
  computed: {
    state() {
      return JSON.stringify(this.$auth.$state, undefined, 2)
    }
  }
}
</script>

跳轉(zhuǎn)

整體流程

總結(jié)整體流程如下

NUXT