使用 koa-jwt + jsonwebtoken 完成用戶鑒權(quán)功能。
項目地址：https://github.com/Ewall1106/mall

安裝

• 首先我們安裝 koa-jwt 和 jsonwebtoken這兩個 npm 包。

$ npm install koa-jwt jsonwebtoken --save

• 先明確一下兩者的關(guān)系：koa-jwt 是負(fù)責(zé)對 token 進行驗證的，而 jsonwebtoken 是負(fù)責(zé)生成 token 的。

JWT 鑒權(quán)

• 在 app.js 中引入并使用。

const Koa = require('koa');
const jwt = require('koa-jwt');

const app = new Koa();

// 1. 錯誤信息處理
app.use(async (ctx, next) => {
  return next().catch((err) => {
    if (401 == err.status) {
      ctx.body = {
        code: 50001,
        message: '用戶鑒權(quán)失敗',
      };
    } else {
      throw err;
    }
  });
});

// 2. 中間件注冊
app.use(jwt({ secret: JWT_SECRET }).unless({ path: [/^\/public/, /\/login/] }));

• 第 1 處是定義了當(dāng)鑒權(quán)失敗的時候，koa 服務(wù)返回的一些內(nèi)容。

• 第 2 處就是 koa-jwt 這個中間件的注冊。

  • 其中 JWT_SECRET 是一個加密因子，可以提升安全性，你也可以設(shè)置成123456，但是為了更安全點推薦用密鑰生成器生成一段密鑰。
  • 后面的 path 路徑是設(shè)置匹配不需要鑒權(quán)的路由或目錄，比如我這里設(shè)置了所有的 public 開頭的、登錄 xxxx/login 的請求都不需要鑒權(quán)。

Token 生成

• 還是前面說到的，koa-jwt 是負(fù)責(zé)對 token 進行驗證的，而 jsonwebtoken 是負(fù)責(zé)生成 token 的，所以接下來看我們?nèi)绾芜M行 token 的生成。

// controller/UserController.js
const jwt = require('jsonwebtoken');

async login(ctx, next) {
  // ...
  // 在登錄成功后
  const token = jwt.sign({ uid: user._id }, JWT_SECRET, { expiresIn: '15d' });
  ctx.body = {
    code: 200,
    entry: {
      token: token
    },
  };
},

• 如上，利用 jsonwebtoken 這個庫，其實 token 的生產(chǎn)很簡單。

  • { uid: user._id } 就是一個 payload 數(shù)據(jù)載體，就是你可以放些參數(shù)在 token 中，比如用戶的 id。
  • JWT_SECRET 就是前面提到的加密因子，要跟 koa-jwt 設(shè)置的保持一致。
  • expiresIn 設(shè)置 token 的過期時間。

• 至此，服務(wù)端的鑒權(quán)主要功能就完成了。

前端設(shè)置

• 在前端，首先我們需要登錄的時候獲取這個 token，然后把它放到 vuex 中或者本地緩存起來。

// 登錄
login(loginInfo).then((res) => {
  const { token } = res.entry;
  console.log('token', token);
});

• 在 axios 請求攔截器中設(shè)置 Authorization 鑒權(quán)頭，每次請求的時候都帶上 token 值。

// src/utils/request.js

// 請求攔截器
service.interceptors.request.use(
  (config) => {
    if (store.getters.token) {
      // JWT鑒權(quán)
      config.headers.Authorization = `Bearer ${getToken()}`;
    }
    return config;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);

• 然后服務(wù)端的 koa-jwt 就會通過讀 Authorization 這個 header 頭中的 token 值來進行比對校檢鑒權(quán)了。

• 至此，我們使用 koa-jwt + jsonwebtoken 完成了用戶鑒權(quán)功能，具體代碼實現(xiàn)請移步項目倉庫中。