token自动续期实现：jwt+redis

• Z时代
• 2024-01-10
• 分类：技术分享

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

token会话流程图

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

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

服务端使用JWT生成token

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

nodejs生成token，使用jsonwebtoken（https://www.npmjs.com/package/jsonwebtoken）

代码

1. 1. /**

1. 1. * 生成token

1. 1. * @param {*} data 数据(eg：{uuid: 'xxx-xx-xx-xxx',role:'admin'})

1. 1. * @param {*} expired token失效时间

1. 1. */

1. 1. createToken(data, expired){

1. 1. // 时间：秒

1. 1. const created =Math.floor(Date.now()/1000);

1. 1. // RSA私钥

1. 1. const cert = fs.readFileSync(

1. 1. path.resolve(__dirname,'./rsa_private_key.pem'),

1. 1. );

1. 1. // token密钥

1. 1. // exp:自纪元以来的秒数

1. 1. const token = jwt.sign(

1. 1. {

1. 1. data,

1. 1. exp: created + expired,

1. 1. },

1. 1. cert,

1. 1. { algorithm:'RS256'},

1. 1. );

1. 1. return token;

1. 1. },

服务端写入redis

写入redis比较简单，需要注意：

1、redis的过期时间跟token过期时间保持一致

2、下面的redisKey可以在token能找的到

1. 1. app.redis.set(redisKey, token);

1. 1. app.redis.expire(redisKey,Expired);

服务端写入cookie

注意的两点：

1、设置cookie的httpOnly为true

2、maxAge跟token和redis的过期时间一致

3、使用eggjs,可以使用encrypt加密

1. 1. ctx.cookies.set(config.user.tokenName, tokenData[config.user.tokenName],{

1. 1. httpOnly:true,

1. 1. maxAge: tokenExpired *1000,

1. 1. encrypt:true,

1. 1. domain:'imqianduan.com',

1. 1. });

1. 1. ctx.cookies.set('x-cid',1,{

1. 1. httpOnly:false,

1. 1. signed:false,

1. 1. maxAge: tokenExpired *1000,

1. 1. domain:'imqianduan.com',

1. 1. });

前端记录登录状态

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

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

前端发送业务请求

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

fetch

设置credentials为include

1. credentials:'include'

axios

设置withCredentials为true

1. axios.defaults.withCredentials =true;

服务端中间件验证token

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

1. 1. /**

1. 1. * 验证token

1. 1. * @param {*} token 登录token

1. 1. */

1. 1. verifyToken(token){

1. 1. // 公钥

1. 1. const cert = fs.readFileSync(

1. 1. path.resolve(__dirname,'./rsa_public_key.pem'),

1. 1. );

1. 1. let res ='';

1. 1. try{

1. 1. const result = jwt.verify(token, cert,{ algorithms:['RS256']})||{};

1. 1. const{ exp }= result,

1. 1. current =Math.floor(Date.now()/1000);

1. 1. if(current <= exp){

1. 1. res = result.data ||{};

1. 1. }

1. 1. }catch(e){

1. 1. console.log(e);

1. 1. }

1. 1. return res;

1. 1. }

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

中间件部分关键代码

1. 1. const result = verifyToken(token);

1. 1. const tokenKey = config.user.redisPrefix.login + result.uuid;

1. 1. const redisToken = await app.redis.get(tokenKey);

1. 1. // 服务器端可以找到token

1. 1. if(redisToken){

1. 1. // 验证是否为最新的token

1. 1. if(token === redisToken){

1. 1. const tokenExpired = await app.redis.ttl(tokenKey);

1. 1. // 如果token超过一半时间，重新续命

1. 1. if(tokenExpired < config.user.tokenExpired /2){

1. 1. // 重新生成token

1. 1. const token = createToken(

1. 1. { uuid: result.uuid },

1. 1. config.user.tokenExpired,

1. 1. );

1. 1. // 更新redis

1. 1. app.redis.set(tokenKey, token);

1. 1. app.redis.expire(tokenKey, config.user.tokenExpired);

1. 1. // 重置cookie值

1. 1. ctx.cookies.set(config.user.tokenName, token,{

1. 1. httpOnly:true,

1. 1. maxAge: config.user.tokenExpired *1000,

1. 1. encrypt:true,

1. 1. domain:'imqianduan.com',

1. 1. });

1. 1. }

1. 1. // 存储用户信息到ctx,便于controller获取

1. 1. ctx.userInfo ={

1. 1. uuid: result.uuid,

1. 1. };

1. 1. await next();

1. 1. }else{

1. 1. // 登录失败移除cookie

1. 1. removeCookie();

1. 1. ctx.status =422;

1. 1. // 如果不是最新token，则代表用户在另一个机器上进行操作，需要用户重新登录保存最新token

1. 1. ctx.body ={

1. 1. status:1001,

1. 1. msg:

1. 1. '您的账号已在其他机器保持登录，如果继续将清除其他机器的登录状态',

1. 1. };

1. 1. }

1. 1. }

结束

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

关于CORS跨域问题

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

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

1. 1. // config/plugin.js

1. 1. cors:{

1. 1. enable:true,

1. 1. package:'egg-cors',

1. 1. },

1. 1. // config/config.default.js

1. 1. config.cors ={

1. 1. origin:'http://a.imqianduan.com',

1. 1. allowMethods:'GET,POST,OPTIONS',

1. 1. // 要使用cookie,credentials一定要设置为true

1. 1. credentials:true,

1. 1. // maxAge:6000, //seconds

1. 1. // 如果要使用自定义token,可以在下面设置

1. 1. allowHeaders:['x-csrf-token'],

1. 1. };

nginx

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

1. 1. server {

1. 1. listen 80;

1. 1. server_name a.imqianduan.com;

1. 1. location /{

1. 1. # add_header 'Access-Control-Allow-Origin' "http://a.imqianduan.com";

1. 1. # add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';

1. 1. # add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

1. 1. # add_header 'Access-Control-Allow-Credentials' 'true';

1. 1. # add_header 'Access-Control-Expose-Headers' 'x-auth-token';

1. 1. if($request_method ='OPTIONS'){

1. 1. add_header 'Access-Control-Allow-Origin'"http://a.imqianduan.com";

1. 1. add_header 'Access-Control-Allow-Methods''GET, POST, PUT, DELETE, OPTIONS';

1. 1. 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';

1. 1. add_header 'Access-Control-Allow-Credentials''true';

1. 1. #add_header 'Access-Control-Expose-Headers' 'x-auth-token';

1. 1. return200;

1. 1. }

1. 1. proxy_pass http://127.0.0.1:7001;

1. 1. proxy_set_header Host $host;

1. 1. proxy_redirect off;

1. 1. proxy_set_header X-Real-IP $remote_addr;

1. 1. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

1. 1. proxy_set_header Access-Control-Allow-Credentials'true';

1. 1. proxy_connect_timeout 60;

1. 1. proxy_read_timeout 60;

1. 1. proxy_send_timeout 60;

1. 1. }

1. 1. }

以上是 token自动续期实现：jwt+redis 的全部内容， 来源链接： utcz.com/a/123222.html