egg框架(用户鉴权,token验证,以及前端简略配置)
最近在研究阿里出的egg,想写一个后台管理系统,但是用了egg–nunjucks之后,感觉它的模板渲染很僵硬,模板页面无法直接调用service的方法来操作数据库,但是用常规的form表单提交到路由,感觉又很奇怪,还是要请求api,那我为什么不前后端分开来写呢,就只好用它来写api,用vue来写前端了,当然也可能是
最近在研究阿里出的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做了处理。
更多推荐
所有评论(0)