eggjs入門系列——使用egg-jwt

建立一個 egg 新項目，我這裏建立的是 TypeScript 的模式

npm init egg --type=ts
npm install

建立完成並安裝完初始化依賴文件後須要再次安裝兩個包
1.egg-cors 跨域包
2.egg-jwt token生成以及驗證包

npm install egg-cors egg-jwt --save

安裝完成後在根目錄下的 config/plugin.ts 配置一下，如：

import { EggPlugin } from 'egg';

const plugin: EggPlugin = {
  jwt: {
    enable: true,
    package: "egg-jwt"
  },
  cors: {
    enable: true,
    package: 'egg-cors',
  }
};

export default plugin;

接下來在 config/config.default.ts 裏面繼續配置：

config.jwt = {
  secret: "123456"//自定義 token 的加密條件字符串
};
config.security = {
  csrf: {
    enable: false,
    ignoreJSON: true
  },
  domainWhiteList: ['http://localhost:8080'],//容許訪問接口的白名單
};
config.cors = {
  origin:'*',
  allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
};

最後一步操做，也是 TypeScript 獨有的坑，須要在根目錄下的 typings/index.d.ts 文件裏聲明一個 any 類型，不然會類型錯誤：

import 'egg';
declare module 'egg' {
    interface Application {
        jwt: any;
    }
}

好了以上配置完成後就開始接下來的核心操做了。

首先我在根目錄下的 app/router.ts 建立訪問路由：

import { Application } from 'egg';

export default (app: Application) => {
  const { controller, router, jwt } = app;
  
  //正常路由
  router.post('/admin/login', controller.admin.login);
  
  /* 
  * 這裏的第二個對象再也不是控制器，而是 jwt 驗證對象，第三個地方纔是控制器
  * 只有在須要驗證 token 的路由才須要第二個 是 jwt 不然第二個對象爲控制器
  **/
  router.post('/admin',jwt, controller.admin.index); 
};

接下來我去編寫個人控制器，在根目錄下的 app/controller/home.ts 編寫內容：

import { Controller } from 'egg';

export default class AdminController extends Controller {

  // 驗證登陸而且生成 token
  public async login() {
    const { ctx ,app} = this;
    
    //獲取用戶端傳遞過來的參數
    const data = ctx.request.body;
    
    // 進行驗證 data 數據 登陸是否成功
    // .........
    //成功事後進行一下操做
    
    //生成 token 的方式
    const token = app.jwt.sign({
    
     username: data.username, //須要存儲的 token 數據
     //......
     
    }, app.config.jwt.secret);
    // 生成的token = eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmb28iOiJiYXIiLCJpYXQiOjE1NjAzNDY5MDN9.B95GqH-fdRpyZIE5g_T0l8RgzNyWOyXepkLiynWqrJg
    
    // 返回 token 到前端
    ctx.body = token;
  };

  //訪問admin數據時進行驗證token，而且解析 token 的數據
  public async index() {
  
    const { ctx ,app} = this;
    
    console.log(ctx.state.user);
    /* 
    * 打印內容爲：{ username : 'admin', iat: 1560346903 }
    * iat 爲過時時間，能夠單獨寫中間件驗證，這裏不作細究
    * 除了 iat 以後，其他的爲當時存儲的數據
    **/
    
    ctx.body = {code:0,msg:'驗證成功'};
  }
}

前端請求的時候須要在 headers 裏面上默認的驗證字斷 Authorization 就能夠了，如：

axios({
 method: 'post',
  url: 'http://127.0.0.1:7001/admin',
  data: {
    username: 'admin',
    lastName: '123456'
  },
  headers:{
      // 切記 token 不要直接發送，要在前面加上 Bearer 字符串和一個空格
    'Authorization':`Bearer ${token}`
  }
}).then(res=>{
  console.log(res.data)
})

網上大部分 egg 驗證 token 的教程都不講驗證方法和過程，只是光顧講 webjsontoken 的原理特別不適合新手，本人也是踩坑過多，終於成功後寫下的結論，但願幫助有須要的人。

好了，踩坑結束。