起因
http是无状态协定，须要晓得是哪一个用户，因而须要一种验证机制。随着技术的倒退，分布式web利用的遍及，通过session治理用户登录状态老本越来越高，因而缓缓倒退成为token的形式做登录身份校验，而后通过token去取redis中的缓存的用户信息，随着之后jwt的呈现，校验形式更加简略便捷化，无需通过redis缓存，而是间接依据token取出保留的用户信息，以及对token可用性校验，单点登录更为简略。具体认证的实现过程如下：
什么是jwt
JSON Web Token (JWT)是一个凋谢规范(RFC 7519)，它定义了一种紧凑的、自蕴含的形式，用于作为JSON对象在各方之间平安地传输信息。该信息能够被验证和信赖，因为它是数字签名的。
jwt的组成
JWT是由三段信息形成的，将这三段信息文本用.链接一起就形成了Jwt字符串。就像这样:eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ
第一局部咱们称它为头部（header),第二局部咱们称其为载荷（payload, 相似于飞机上承载的物品)，第三局部是签证（signature).
jwt加密流程
1.前端发动登录申请
login({ commit }, userInfo) { const { username, password } = userInfo return new Promise((resolve, reject) => { login({ username: username.trim(), password: password }).then(response => { commit('SET_TOKEN', response.token) setToken(response.token) resolve() }).catch(error => { reject(error) }) }) }2.后端承受参数进行登录校验
this.app.jwt.sign({ username: username }, this.app.config.jwt.web.secret, { expiresIn: expiresIn })如上后端代码应用了nodejs的egg框架，应用的是egg-jwt插件进行加密和解密；其中代码中的username为用户账号（id），secret则为加密的盐值（解密须要用到），expiresIn则为生成的token的无效工夫。账号密码验证通过后，你能够自定你的加密内容（payload），其中示例代码退出了username。当然你还能够退出你的userInfo等，并且将生成的toekn返回到前端（思考：很多编程老手喜爱在登录胜利之后间接返回了用户的信息，作者是不举荐这样做的；这里咱们只返回token，前端拿到返回的token存储起来）
3.登陆胜利后前端贮存token
login({ username: username.trim(), password: password }).then(response => { commit('SET_TOKEN', response.token)//登录胜利之后存储token，你能够存在vuex或者local中 setToken(response.token) resolve() }).catch(error => { reject(error) })jwt解密流程
1.前端发动申请，axios申请拦截器设置headers
service.interceptors.request.use( config => { // do something before request is sent if (store.getters.token) { // let each request carry token // ['X-Token'] is a custom headers key // please modify it according to the actual situation config.headers['Authorization'] = getToken() } return config }, error => { // do something with request error console.log(error) // for debug return Promise.reject(error) })作者这里应用的是axios库配合拦截器，具体应用参考：https://www.jianshu.com/p/86122178002a
2.服务端解析headers中的token
const { Status, Code } = ctx.app.config if (ctx.get('Authorization')) { //拿出token let token = ctx.get('Authorization'); try { //解密token ctx.app.jwt.verify(token, secret); } catch (error) { if (error.name == 'TokenExpiredError') { //token过期啦 ctx.responseMsg(Status.FAIL.UNAUTHORIZED, { msg: Code.FAIL.TOKEN_EXPIRED.MSG }); return; } else { ctx.responseMsg(Status.FAIL.UNAUTHORIZED, { msg: Code.FAIL.TOKEN_EXPIRED.MSG }); return; } } await next(); } else { //不非法的申请 ctx.responseMsg(Status.FAIL.UNAUTHORIZED, { msg: Code.FAIL.ILLEGAL_TOKEN.MSG }); return; }token：申请头中获取到的token
secret：盐值，和加密的保持一致
其中对于jwt的解密工作应用了中间件，对于egg中间件参考：https://eggjs.org/zh-cn/basics/middleware.html
3.服务端依据返回的约定code做出相应的响应
service.interceptors.response.use( response => { // if the custom code is not 20000, it is judged as an error. const res = response.data; if (res.code !== 20000) { Message({ message: res.msg || 'Error', type: 'error', duration: 5 * 1000 }) } else { return res } }, error => { //console.log(error) // for debug Message({ message: error.message, type: 'error', duration: 5 * 1000 }) if (error.response.status == 401) { MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', { confirmButtonText: 'Re-Login', cancelButtonText: 'Cancel', type: 'warning' }).then(() => { store.dispatch('user/resetToken').then(() => { location.reload() }) }) } else if (error.response.status == 422) { } return Promise.reject(error) })其中的code是依据和后端人员约定标准的，能够参考restful格调：https://zhuanlan.zhihu.com/p/66148320?utm_source=wechat_session&utm_medium=social&utm_oi=986957734650208256
如上即可实现基于jwt认证（第一次写，写得不好大佬们下手轻点）