前端开发搭建博客系统（二），jwt权鉴设计以及中途遇到的问题。献给前端

废话部分

上次废话太多，估计有些小伙伴没看太清楚。这次会精简很多。只拿关键的出来讲。

个人属于前端，后端看到了扣下留情。希望本文能帮助大家

项目地址：

前端：https://github.com/ht-sauce/dream

后端：https://github.com/ht-sauce/dream-admin

一、权鉴选型

这块没太多可以说的，基本百度的结果就是jwt

而eggjs官方是egg-jwt，其本质也是jsonwebtoken

egg-jwt地址：https://www.npmjs.com/package/egg-jwt

jsonwebtoken地址：https://www.npmjs.com/package/jsonwebtoken

eggjs的插件配置方面我就不多说了。太简单了（再次赞美eggjs）。

二、先写登录接口，保证生成权鉴信息

1、先放完整的登录接口函数

// 登录接口 async login() { const { ctx, service } = this; const userBusiness = service.consumer.user; const query = ctx.request.body; // 接口请求数据 // 参数校验 const rule = { account: { type: 'string', required: true }, // 有format才能有message信息 password: { type: 'string', required: true }, }; try { await ctx.validate(rule, query); // 优先处理用户是否存在 const login = await userBusiness.userLogin(query); if (login) { // 登录之后生成口令，有效期24小时 const token = ctx.helper.generate_token(query.account); // 前端肯定会需要用户信息，返回给前端用户基本信息 const userInfo = { userInfo: await userBusiness.find(query), sign: token, }; ctx.body = ctx.helper.result(userInfo); } else { ctx.body = ctx.helper.result('', -1, '用户不存在请注册'); } } catch (e) { ctx.body = ctx.helper.result('', -1, e); } }

2、原理解析

主要是先判断用户名密码，然后再是用自己封装的helper（eggjs的扩展）来生成口令。

至于helper就是进行统一的封装函数处理。

然后一并丢给前端。

三、中间件解析口令，进行校验拦截

1、中间件代码

'use strict'; module.exports = (options, app) => { return async function(ctx, next) { const token = ctx.request.header.authorization; try { if (token) { // 验证当前token const decode = app.jwt.verify(token, options.secret); // 验证用户信息是否正常 if (!decode || !decode.account) { ctx.body = ctx.helper.result('', -1, '用户信息缺失', 1); } // 验证用户是否存在 const user = await ctx.model.Consumer.User.findOne( { where: { account: decode.account } } ); if (user) { // 如果口令有效期小于15分钟则发送新口令给前端 if (decode.exp - Date.now() / 1000 < 60 * 15) { const token = ctx.helper.generate_token(decode.account); ctx.set('Authorization', token); } // 当所有验证都通过之后，可以正常访问 await next(); } else { ctx.body = ctx.helper.result('', -1, '用户信息验证失败', 1); } } else { ctx.body = ctx.helper.result('', -1, '口令验证失败', 1); } } catch (e) { console.log(e); ctx.body = ctx.helper.result('', -1, e, 1); } }; };

2、原理解析

大家仔细看代码。在各种验证之后最后只有await next（）部分才是最终正确代码执行下去的。代表权鉴没有问题。

从前端的角度来看，无非就是if else之后通过了。

3、口令刷新问题

上面的代码有一个部分

// 如果口令有效期小于15分钟则发送新口令给前端 if (decode.exp - Date.now() / 1000 < 60 * 15) { const token = ctx.helper.generate_token(decode.account); ctx.set('Authorization', token); }

这里比较关键，在于实现当用户不停操作之后能不会因为口令过期而突然退出登录。所以就需要校验口令的快过期时间。当快过期的时候发一个新的口令给前端。让前端刷新当前缓存的口令。注意不能时间太短。15分钟算一个比较合理的时间。

4、后端某些接口不校验口令直接过。

这个在后台管理的项目中基本不用太担心。但是开放式的博客就很有必要了。这里主要是看eggjs官方对于中间件的处理。

地址：https://eggjs.org/zh-cn/basics/middleware.html

我个人也对应进行配置

// 中间件配置 config.middleware = [ 'jwtAuthorize' ]; // 给jwtAuthorize中间件传入的参数 config.jwtAuthorize = { secret: 'daihaitian19940329', // 忽略指定路由 ignore: [ `${config.dreamCustom.prefix}/noauth` ], };

三、前端存储口令以及口令发送问题

1、登录接口

登录部分很简单，就是缓存用户信息就行了。主要核心在于ajax函数封装的地方

// 登录 login() { let data = { account: this.logindata.userName, password: userLoginPassword(this.logindata.password) }; this.logining = true; this.axios .ajax({ url: this.$api.consumer().user.login, data: data, method: "post" }) .then(e => { this.logining = false; // 存储用户数据到缓存 store.clearAll(); store.set("user_info", e.data); console.log(e.data); }) .catch(e => { this.logining = false; console.log(e); });

2、封装ajax函数，并且全局处理口令以及口令刷新的问题

代码放出核心封装部分

1、一个headers的封装。需要在前端有口令数据的情况将口令发送给后端

// 授权函数封装 const authorize = herders => { const user_info = store.get("user_info"); if (user_info && user_info.sign) { herders.Authorization = user_info.sign; return herders; } else { return herders; } };

2、口令刷新函数的封装

进行一系列的验证之后，如果后端返回的数据headers里面产生了口令需要及时刷新口令

// 刷新口令以及判断数据类型来判断是否退出登录 refresh_sign_or_out(res) { console.log(res); if (!res || !res.data) { this.logout(); return false; } // type类型为1必定退出登录 if (res.data.type === 1) { this.logout(); return false; } if (res.headers.authorization) { const user_info = store.get("user_info"); user_info.sign = res.headers.authorization; store.set("user_info", user_info); } return true; }

四、缺陷回顾

1、目前最大的缺陷是口令只要生成了，那么就可以验证通过。

2、如果解决上一个问题，让口令唯一的话，那么就需要解决并发情况下口令更新，保证后续接口不会因为口令刷新而报错

3、口令唯一化问题

个人：不处理了。目前这样就可以保证并发的问题，只要不口令唯一化，那么就不用担心上述问题。而且个人属于前端，不打算深入探究了。