egg框架（用户鉴权，token验证，以及前端简略配置）

最近在研究阿里出的egg，想写一个后台管理系统，但是用了egg–nunjucks之后，感觉它的模板渲染很僵硬，模板页面无法直接调用service的方法来操作数据库，但是用常规的form表单提交到路由，感觉又很奇怪，还是要请求api，那我为什么不前后端分开来写呢，就只好用它来写api，用vue来写前端了，当然也可能是我没有找到正确的打开方式，希望各位有懂的话留言告诉我一下，谢谢😊。 后端: 1.安装egg-jwt

npm i egg-jwt -S

2.在config文件夹中的plugin.js文件中声明并开启，plugin.js就是egg管理插件的js文件，这样子声明之后就可以在项目中通过app.jwt.函数(),来调用它的函数了。 jwt就是导出的模块，通过this.app.jwt引用，同理mysql，通过this.app.mysql引用 enable控制插件的开启关闭， package就是依赖的模块

'use strict'; /** @type Egg.EggPlugin */ module.exports = { // had enabled by egg // static: { // enable: true, // } mysql: { enable: true, package: 'egg-mysql', }, cors: { enable: true, package: 'egg-cors', }, jwt: { enable: true, package: "egg-jwt" }, };

3.在config文件夹中的config.default.js文件中进行配置,这个secret是加密条件字符串，可以自己设置。

config.jwt = { secret: "165165" };

4.然后就可以在项目中使用了

const token = app.jwt.sign({ username: user.username, password: user.password, }, app.config.jwt.secret); ctx.body.token = token

或者加个有效时间

const token = app.jwt.sign({ username: user.username, password: user.password, }, app.config.jwt.secret, { expiresIn: '1800s', }) ctx.body.token = token

5.然后在需要验证token的路由中间加上jwt参数即可，至于为什么这样就可以验证，我觉得egg官方文档里写的蛮清楚的。

Router 详细定义说明 下面是路由的完整定义，参数可以根据场景的不同，自由选择：

router.verb(‘path-match’, app.controller.action); router.verb(‘router-name’, ‘path-match’, app.controller.action); router.verb(‘path-match’, middleware1, …, middlewareN,app.controller.action); router.verb(‘router-name’, ‘path-match’,middleware1, …, middlewareN,app.controller.action);

就是加jwt中间件，代码如下

module.exports = app => { const { router, controller, jwt } = app; router.post('/app/v1/', jwt, controller.home.index); };

前端: 没什么说的，请求拿到之后存在本地，每次请求的时候加到请求头里面就完事了，这样的话每次请求都有带token，就是后端验不验证的问题了。 Authorization：Bearer token值 是jwt默认验证的token键值对。 axios配置文件如下：

import axios from 'axios' import Vue from 'vue'; import router from '../router/index' import { Notification } from 'element-ui'; Vue.prototype.$notify= Notification; var that = Vue.prototype // 默认请求地址 axios.defaults.baseURL = 'http://127.0.0.1:7001/app/v1/' // 默认请求头 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; axios.defaults.headers.put['Content-Type'] = 'application/json;charset=UTF-8'; axios.defaults.headers.delete['Content-Type'] = 'application/json;charset=UTF-8'; axios.defaults.timeout = 5000 //请求拦截器 axios.interceptors.request.use(function (config) { if (localStorage.getItem('token')) { let token = localStorage.getItem('token'); config.headers.common['Authorization'] = 'Bearer '+token; } return config; }, function (error) { return Promise.reject(error); }); // 响应拦截器 axios.interceptors.response.use( response => { return Promise.resolve(response); }, error =>{ switch(error.response.status){ case 401: localStorage.removeItem('token') router.push('/login'); that.$notify.error({ title: '错误', message: '登录信息已失效，请重新登录', offset: 50 }); break; default:break; } return Promise.reject(error); })

这里jwt验证不通过，服务器默认报401错误，所以我对401做了处理。