首页
Javascript
Html
Css

Node.js

Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于

jwt+redis实现token自动续期

2020年01月10日 发布 阅读(534) 作者:Jerman

传统的会话认证使用的是session+cookie,前后端分离的项目,更多使用的是token。本文主要实现的token,基于eggjs+redis+jwt+cookie

token会话流程图

先来了解最终实现的token会话流程图

对几个关键流程,做以下记录

服务端使用JWT生成token

在使用JWT前,需要提前准备公钥/私钥,怎么生成密钥,可参考:https://www.imqianduan.com/server/RSA-public-private.html

nodejs生成token,使用jsonwebtokenhttps://www.npmjs.com/package/jsonwebtoken)

代码

  1. /**
  2. * 生成token
  3. * @param {*} data 数据(eg:{uuid: 'xxx-xx-xx-xxx',role:'admin'})
  4. * @param {*} expired token失效时间
  5. */
  6. createToken(data, expired) {
  7. // 时间:秒
  8. const created = Math.floor(Date.now() / 1000);
  9. // RSA私钥
  10. const cert = fs.readFileSync(
  11. path.resolve(__dirname, './rsa_private_key.pem'),
  12. );
  13. // token密钥
  14. // exp:自纪元以来的秒数
  15. const token = jwt.sign(
  16. {
  17. data,
  18. exp: created + expired,
  19. },
  20. cert,
  21. { algorithm: 'RS256' },
  22. );
  23. return token;
  24. },

服务端写入redis

写入redis比较简单,需要注意:
1、redis的过期时间跟token过期时间保持一致
2、下面的redisKey可以在token能找的到

  1. app.redis.set(redisKey, token);
  2. app.redis.expire(redisKey, Expired);

注意的两点:
1、设置cookie的httpOnly为true
2、maxAge跟token和redis的过期时间一致
3、使用eggjs,可以使用encrypt加密

  1. ctx.cookies.set(config.user.tokenName, tokenData[config.user.tokenName], {
  2. httpOnly: true,
  3. maxAge: tokenExpired * 1000,
  4. encrypt: true,
  5. domain: 'imqianduan.com',
  6. });
  7. ctx.cookies.set('x-cid', 1, {
  8. httpOnly: false,
  9. signed: false,
  10. maxAge: tokenExpired * 1000,
  11. domain: 'imqianduan.com',
  12. });

前端记录登录状态

前面服务端已经把token写入了cookie中,并设置了httpOnly为true,所以JS已经不能读取这个token了,这也是为什么token不能localstorage存储的原因之一

上面一步中,我们还在cookie中写了一个x-cid的cookie,我们可以通过它来判断是否已经登录

前端发送业务请求

在前端使用最多的框架react/vue中,axios和fetch是最常见的发送http请求的方法之一,但axios和fetch默认都是不携带cookie的,要携带cookie,都是要进行一定的设置

fetch
设置credentialsinclude

  1. credentials: 'include'

axios
设置withCredentialstrue

  1. axios.defaults.withCredentials = true;

服务端中间件验证token

如果token验证通过,会返回加密的data数据 ,如{uuid:’xx-xx-xx-xx’,role:’admin’},根据这个数据 ,可以知道这个用户是谁(以前是服务端在session中记录,会消息服务器内存,现在是加密存到了客户端)

  1. /**
  2. * 验证token
  3. * @param {*} token 登录token
  4. */
  5. verifyToken(token) {
  6. // 公钥
  7. const cert = fs.readFileSync(
  8. path.resolve(__dirname, './rsa_public_key.pem'),
  9. );
  10. let res = '';
  11. try {
  12. const result = jwt.verify(token, cert, { algorithms: ['RS256'] }) || {};
  13. const { exp } = result,
  14. current = Math.floor(Date.now() / 1000);
  15. if (current <= exp) {
  16. res = result.data || {};
  17. }
  18. } catch (e) {
  19. console.log(e);
  20. }
  21. return res;
  22. }

**根据token中取到的uuid,查询redis

中间件部分关键代码

  1. const result = verifyToken(token);
  2. const tokenKey = config.user.redisPrefix.login + result.uuid;
  3. const redisToken = await app.redis.get(tokenKey);
  4. // 服务器端可以找到token
  5. if (redisToken) {
  6. // 验证是否为最新的token
  7. if (token === redisToken) {
  8. const tokenExpired = await app.redis.ttl(tokenKey);
  9. // 如果token超过一半时间,重新续命
  10. if (tokenExpired < config.user.tokenExpired / 2) {
  11. // 重新生成token
  12. const token = createToken(
  13. { uuid: result.uuid },
  14. config.user.tokenExpired,
  15. );
  16. // 更新redis
  17. app.redis.set(tokenKey, token);
  18. app.redis.expire(tokenKey, config.user.tokenExpired);
  19. // 重置cookie值
  20. ctx.cookies.set(config.user.tokenName, token, {
  21. httpOnly: true,
  22. maxAge: config.user.tokenExpired * 1000,
  23. encrypt: true,
  24. domain: 'imqianduan.com',
  25. });
  26. }
  27. // 存储用户信息到ctx,便于controller获取
  28. ctx.userInfo = {
  29. uuid: result.uuid,
  30. };
  31. await next();
  32. } else {
  33. // 登录失败移除cookie
  34. removeCookie();
  35. ctx.status = 422;
  36. // 如果不是最新token,则代表用户在另一个机器上进行操作,需要用户重新登录保存最新token
  37. ctx.body = {
  38. status: 1001,
  39. msg:
  40. '您的账号已在其他机器保持登录,如果继续将清除其他机器的登录状态',
  41. };
  42. }
  43. }

结束

到这里OVER了,剩下的就是请求业务接口的问题了

关于CORS跨域问题

要实现token机制,跨域问题是不得不解决的

eggjs可以使用egg-cors(https://www.npmjs.com/package/egg-cors)

  1. // config/plugin.js
  2. cors: {
  3. enable: true,
  4. package: 'egg-cors',
  5. },
  1. // config/config.default.js
  2. config.cors = {
  3. origin: 'http://a.imqianduan.com',
  4. allowMethods: 'GET,POST,OPTIONS',
  5. // 要使用cookie,credentials一定要设置为true
  6. credentials: true,
  7. // maxAge:6000, //seconds
  8. // 如果要使用自定义token,可以在下面设置
  9. allowHeaders: ['x-csrf-token'],
  10. };

nginx

直接上代码,自己去调整吧

  1. server {
  2. listen 80;
  3. server_name a.imqianduan.com;
  4. location / {
  5. # add_header 'Access-Control-Allow-Origin' "http://a.imqianduan.com";
  6. # add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
  7. # add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
  8. # add_header 'Access-Control-Allow-Credentials' 'true';
  9. # add_header 'Access-Control-Expose-Headers' 'x-auth-token';
  10. if ($request_method = 'OPTIONS') {
  11. add_header 'Access-Control-Allow-Origin' "http://a.imqianduan.com";
  12. add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
  13. add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,x-csrf-token';
  14. add_header 'Access-Control-Allow-Credentials' 'true';
  15. #add_header 'Access-Control-Expose-Headers' 'x-auth-token';
  16. return 200;
  17. }
  18. proxy_pass http://127.0.0.1:7001;
  19. proxy_set_header Host $host;
  20. proxy_redirect off;
  21. proxy_set_header X-Real-IP $remote_addr;
  22. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  23. proxy_set_header Access-Control-Allow-Credentials 'true';
  24. proxy_connect_timeout 60;
  25. proxy_read_timeout 60;
  26. proxy_send_timeout 60;
  27. }
  28. }
版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论(1)

webdq 2020-06-02 10:28:44 回复

很详细,很赞

  •