最近在研究阿里出的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做了处理。

Logo

前往低代码交流专区

更多推荐