sau交流学习社区songEagle开发系列：Vue+Vuex+Koa中使用JWT(JSONWebToken)认证

一、前言

JWT(JSON Web Token)&＃xff0c;是为了在网络环境间传递声明而执行的一种基于JSON的开放标准&＃xff08;RFC 7519&＃xff09;。

JWT不是一个新鲜的东西&＃xff0c;网上相关的介绍已经非常多了。不是很了解的可以在网上搜索一下相关信息。

同步到sau交流学习社区&＃xff1a;www.mwcxs.top/page/454.ht…

二、源码

Talk is cheap. Show me the code.

三、工作流程

JWT本质来说是一个token。在前后端进行HTTP连接时来进行相应的验证。

1. 博客的后台管理系统发起登录请求&＃xff0c;后端服务器校验成功之后&＃xff0c;生成JWT认证信息&＃xff1b;

2. 前端接收到JWT后进行存储&＃xff1b;

3. 前端在之后每次接口调用发起HTTP请求时&＃xff0c;会将JWT放到HTTP的headers参数里的authorization中一起发送给后端&＃xff1b;

4. 后端接收到请求时会根据JWT中的信息来校验当前发起HTTP请求的用户是否是具有访问权限的&＃xff0c;有访问权限时则交给服务器继续处理&＃xff0c;没有时则直接返回401错误。

四、实现过程

1. 登录成功生成JWT

说明&＃xff1a;以下代码只保留了核心代码&＃xff0c;详细代码可在对应文件中查看&＃xff0c;下同。

// /server/api/admin/admin.controller.js const jwt &＃61; require(&＃39;jsonwebtoken&＃39;); const config &＃61; require(&＃39;../../config/config&＃39;);exports.login &＃61; async(ctx) &＃61;> {// ...if (hashedPassword &＃61;&＃61;&＃61; hashPassword) {// ...// 用户tokenconst userToken &＃61; {name: userName,id: results[0].id};// 签发tokenconst token &＃61; jwt.sign(userToken, config.tokenSecret, { expiresIn: &＃39;2h&＃39; });// ...}// ... }

2. 添加中间件校验JWT

// /server/middlreware/tokenError.js const jwt &＃61; require(&＃39;jsonwebtoken&＃39;); const config &＃61; require(&＃39;../config/config&＃39;); const util &＃61; require(&＃39;util&＃39;); const verify &＃61; util.promisify(jwt.verify);/*** 判断token是否可用*/ module.exports &＃61; function () {return async function (ctx, next) {try {// 获取jwtconst token &＃61; ctx.header.authorization; if (token) {try {// 解密payload&＃xff0c;获取用户名和IDlet payload &＃61; await verify(token.split(&＃39; &＃39;)[1], config.tokenSecret);ctx.user &＃61; {name: payload.name,id: payload.id};} catch (err) {console.log(&＃39;token verify fail: &＃39;, err)}}await next();} catch (err) {if (err.status &＃61;&＃61;&＃61; 401) {ctx.status &＃61; 401;ctx.body &＃61; {success: 0,message: &＃39;认证失败&＃39;};} else {err.status &＃61; 404;ctx.body &＃61; {success: 0,message: &＃39;404&＃39;};}}} }

3. Koa.js中添加JWT处理

此处在开发时需要过滤掉登录接口(login)&＃xff0c;否则会导致JWT验证永远失败。

// /server/config/koa.js const jwt &＃61; require(&＃39;koa-jwt&＃39;); const tokenError &＃61; require(&＃39;../middlreware/tokenError&＃39;); // ...const app &＃61; new Koa();app.use(tokenError()); app.use(bodyParser()); app.use(koaJson()); app.use(resource(path.join(config.root, config.appPath)));app.use(jwt({secret: config.tokenSecret }).unless({path: [/^\/backapi\/admin\/login/, /^\/blogapi\//] }));module.exports &＃61; app;

4.前端处理

前端开发使用的是Vue.js&＃xff0c;发送HTTP请求使用的是axios。

1. 登录成功之后将JWT存储到localStorage中&＃xff08;可根据个人需要存储&＃xff0c;我个人是比较喜欢存储到localStorage中&＃xff09;。

methods: {login: async function () {// ...let res &＃61; await api.login(this.userName, this.password);if (res.success &＃61;&＃61;&＃61; 1) {this.errMsg &＃61; &＃39;&＃39;;localStorage.setItem(&＃39;SONG_EAGLE_TOKEN&＃39;, res.token);this.$router.push({ path: &＃39;/postlist&＃39; });} else {this.errMsg &＃61; res.message;}}}

2. Vue.js的router&＃xff08;路由&＃xff09;跳转前校验JWT是否存在&＃xff0c;不存在则跳转到登录页面。

// /src/router/index.jsrouter.beforeEach((to, from, next) &＃61;> {if (to.meta.requireAuth) {const token &＃61; localStorage.getItem(&＃39;SONG_EAGLE_TOKEN&＃39;);if (token && token !&＃61;&＃61; &＃39;null&＃39;) {next();} else {next(&＃39;/login&＃39;);}} else {next();}});

3. axios拦截器中给HTTP统一添加Authorization信息

// /src/api/config.jsaxios.interceptors.request.use(config &＃61;> {const token &＃61; localStorage.getItem(&＃39;SONG_EAGLE_TOKEN&＃39;);if (token) {// Bearer是JWT的认证头部信息config.headers.common[&＃39;Authorization&＃39;] &＃61; &＃39;Bearer &＃39; &＃43; token;}return config;},error &＃61;> {return Promise.reject(error);});

4. axios拦截器在接收到HTTP返回时统一处理返回状态

// /src/main.jsaxios.interceptors.response.use(response &＃61;> {return response;},error &＃61;> {if (error.response.status &＃61;&＃61;&＃61; 401) {Vue.prototype.$msgBox.showMsgBox({title: &＃39;错误提示&＃39;,content: &＃39;您的登录信息已失效&＃xff0c;请重新登录&＃39;,isShowCancelBtn: false}).then((val) &＃61;> {router.push(&＃39;/login&＃39;);}).catch(() &＃61;> {console.log(&＃39;cancel&＃39;);});} else {Vue.prototype.$message.showMessage({type: &＃39;error&＃39;,content: &＃39;系统出现错误&＃39;});}return Promise.reject(error);});