jwt 用户认证 (前后端分别采用vue 和 egg )

之前本人一直使用的鉴权方式是服务端 redis存储session进行验证。
本次采用jwt的方式（JSON Web Token）

session验证步骤：

1. 用户输入其登录信息
2. 服务器验证信息是否正确，并创建一个session，然后将其存储在内存数据库redis中
3. 服务器为用户生成一个sessionId，将具有sesssionId的Cookie将放置在用户浏览器中
4. 在后续请求中，会根据数据库验证sessionID，如果有效，则接受请求
5. 一旦用户注销应用程序，会话将在客户端和服务器端都被销毁

本次基于vue（前端）和 node（后端，使用egg框架） 进行jwt的验证学习

服务端

放在egg.js的servicer层便于调用（也可以放在中间件处理）

'use strict';
const Service = require('egg').Service;
// 安装的jwt插件
const jwt = require('jsonwebtoken');
// 自己设置的 key
const secert_key = '#modmfog$%ls12m1fspoweXh';
class TokenService extends Service {
// 生成jwt的方法
  async signJwt(_id) {
    return jwt.sign({
      data: {
        _id,
      },
      exp: Math.floor(Date.now() / 1000) + (60 * 60 * 3600 * 24 * 7),
    }, secert_key);
  }
  // 验证jwt的方法
  async decodeJwt(token) {
    try {
      return jwt.verify(token, secert_key);
    } catch (err) {
      return err;
    }
  }
}
module.exports = TokenService;

这是用户控制器中的登陆方法登陆成功后

 async login() {
    const { ctx } = this;
    // 用户名和密码
    const { username, password } = ctx.request.body;
    // 验证登录
    const result = await ctx.service.user.login(username, password);
    if (result) {
      console.log('登陆成功');
      // 生成token
      const token = await ctx.service.token.signJwt(result.id);
      // 将token写入cookie 这是返回在客户端cookie中的token
      this.ctx.cookies.set('token', token, { maxAge: 60 * 1000, httpOnly: false, overwrite: true, signed: false });
    }
    const data = { ...result };
    // 后端返回数据
    ctx.body = data;
  }

接下来是前端vue

前端

在axios的配置拦截器时获取cookie中的token ,然后将 token 赋值给请求头 header中的 authorization 字段

// 添加请求拦截器
service.interceptors.request.use(
  config => {
    //下方注释就是获取cookie中的某一个值  应该封装起来 为了方便观看写在此处
    /*
    function getCookie(name) {
      var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
      // eslint-disable-next-line no-cond-assign
      if (arr = document.cookie.match(reg))
        return (arr[2]);
      else
        return null;
    }
    */
    // 从cookie中获取token
    let token = getCookie('token');
    if (token) { 
        // token 赋值给 请求头 header中的  authorization 字段
      config.headers.authorization = token;
    }
    return config
  },
  err => console.log(err)
)

这样再请求的时候都会带上这个请求头，后端在获取 token , 进行验证即可

jwt 验证步骤总结

1. 用户输入其登录信息
2. 服务器验证信息是否正确，并返回已签名的token
3. token储在客户端，例如存在local storage或cookie中
4. 之后的HTTP请求都将token添加到请求头里
5. 服务器解码JWT，并且如果令牌有效，则接受请求
6. 一旦用户注销，令牌将在客户端被销毁，不需要与服务器进行交互一个关键是，令牌是无状态的。后端服务器不需要保存令牌或当前session的记录。

最后编辑于：2019.10.18 13:17:50