关于实现token无感刷新的解决方案

问题引入

在开发中为了安全或满足分布式场景,通常会舍弃原有的session认证手段,而采用jwt(json web token);但是使用token难免遇到token有效期的问题,如果token长期有效,服务端不断发布新的token,导致有效的token越来越多,这必然是存在安全问题的。而token不想session一样,在用户操作时会进行刷新,为了用户体验,这个刷新就需要自己实现。

方案

一、使用旧token获取新token

如果采取单个token的方式要实现token的自动刷新,就必须使用定时器,每隔一段时间自动刷新token,并且这个时候token一定要是没有过期的,因为如果已经过期的token也可以用来刷新,这和长期有效的token也没什么不同。但这种方式存在一定的问题:

  1. 为了保证同一时间,账户只被单个用户登录,后端必然要保证一个账户的多个token只有一个生效,最简单的方式就是使用分布式缓存中间件如redis,而存在并发请求时,可能前一个请求带着的是旧token,此时又到了刷新token的时间,就会产生请求的token与服务端存储的token不一致的问题
  2. 使用定时器是增加了性能的损耗,不是最佳的手段

二、使用双token的方式进行无感刷新

这里重点介绍这种方式,此方案的大致流程为:登录后客户端收到两个token(access_token,refresh_token),其中access_token用来鉴定身份,而refresh_token用来刷新access_token;这就要求了refresh_token要比access_token有效时间要长,并且refresh_token不能用来鉴定身份
使用这种方案又有一下解决方式:

  1. 后端每次响应都响应一个token过期时间,前端进行判断,在token过期前进行刷新,这种方式存在太多不可控因素,如客户端系统时间被修改、长时间没请求导致token过期却未刷新,无法做到无感刷新,并且也存在并发问题
  2. 使用定时器,使用定时器增加的资源的损耗,亏损了性能,不推荐
  3. 在得到token过期的请求时,再发送refresh_token;有点懒加载的意思,这种方案性能最优

具体实现(方案二的第三种方式)

流程

再理一理程序运行的流程:

  1. 首先,登录得到了两个token,并将其存起来
  2. 当access_token过期时,自动发送refresh_token到刷新token的请求路径请求token刷新
  3. 得到新的token之后,将请求重新发送,实现用户无感刷新token

代码

用到的工具函数

//判空
let isEmpty = function(obj) { 
    return obj == null || obj == "undefined" || obj == "null" || new String(obj).trim() == '';
};
  1. 封装axios
const my_axios = axios.create({ 
    baseURL: '/app',
    timeout: 15000,
    withCredentials: true
});

这里对axios做一个简单的封装,不做过多赘述

  1. 定义请求拦截器,将请求带上token
my_axios.interceptors.request.use(
        req => { 
        	//判断当前是否存在tokenBo(tokenBo即两个token组成的对象),存在则带上token
        	//isEmpty函数在上方的工具函数中
            if (!isEmpty(sessionStorage.getItem("tokenBo"))) { 
            	//通过请求路径中是否含有refershToken来判断当前是一般请求还是token刷新请求;从而在请求头中带上不同的token
                if (-req.url.indexOf("refreshToken") == 1) { 
                    req.headers['accessToken'] = JSON.parse(sessionStorage.getItem("tokenBo")).accessToken;
                } else { 
                    req.headers['refreshToken'] = JSON.parse(sessionStorage.getItem("tokenBo")).refreshToken;
                }
            }
            return req;
        },
        err => { 
            return Promise.reject(err)
        }
    )
  1. 响应拦截,进行token的无感刷新
    这是最难的一步,我们需要考虑到几个问题,第一:要实现无感,那么用户的请求就不能被舍弃,而是需要在得到新的token后帮他再执行一次;第二,当同时出现多个请求时,可能会导致多次刷新token的情况,所以需要用一个标志量来标志是否正在刷新token,并使用一个数据对请求进行存储
//标志当前是否正在刷洗token
let isNotRefreshing = true;
//请求队列
let requests = [];
my_axios.interceptors.response.use(
    async res => { 
    	//我们可以定义一个标准响应体,比如:{code=10415,msg='token已过期',data:null},当收到token过期的响应就要进行token刷新了
        if (res.data.code == 10415) { 
        	//首先拿到响应的配置参数,这和请求的配置参数是一样的,包括了url、data等信息,待会需要使用这个config来进行重发
            const config = res.config;
            //如果当前不处于刷新阶段就进行刷新操作
            if (isNotRefreshing) { 
                isNotRefreshing = false;
                //返回刷新token的回调的返回值,本来考虑到由于请求是异步的,所以return会先执行,导致返回一个undefined,那么就需要使用async+await,但实际上没有加也成功了
                return my_axios.get("/admin/refreshToken")
                    .then(res => { 
                    	//如果token无效或token仍然过期,就只能重新登录了
                        if (res.code == 10422 || res.code == 10415) { 
                            sessionStorage.removeItem("tokenBo");
                            sessionStorage.removeItem("currentAdmin");
                            location.href = '/login';
                        } else if (res.code == 10200) { 
                        	//刷新成功之后,将新的token存起来
                            sessionStorage.setItem("tokenBo", JSON.stringify(res.data))
                            //执行requests队列中的请求,(requests中存的不是请求参数,而是请求的Promise函数,这里直接拿来执行就好)
                            requests.forEach(run => run())
                            //将请求队列置空
                            requests = []
                            //重新执行当前未执行成功的请求并返回
                            return my_axios(config);
                        }
                    })
                    .catch(() => { 
                        sessionStorage.removeItem("tokenBo");
                        sessionStorage.removeItem("currentAdmin");
                        location.href = '/';
                    })
                    .finally(() => { 
                        isNotRefreshing = true;
                    })
            } else { 
            	//如果当前已经是处于刷新token的状态,就将请求置于请求队列中,这个队列会在刷新token的回调中执行,由于new关键子存在声明提升,所以不用顾虑会有请求没有处理完的情况,这段添加请求的程序一定会在刷新token的回调执行之前执行的
                return new Promise(resolve => { 
                	//这里加入的是一个promise的解析函数,将响应的config配置对应解析的请求函数存到requests中,等到刷新token回调后再执行
                    requests.push(() => { 
                        resolve(my_axios(config));
                    })
                })
            }
        } else { 
            if (res.data.code == 10200) { 
                return res.data;
            } else { 
                if (res.data.code == 10409) { 
                    sessionStorage.removeItem("tokenBo");
                    sessionStorage.removeItem("currentAdmin");
                    location.href = "/#/login"
                }
                Message.error(res.data.message);
                return res.data;
            }
        }

    },
    err => { 
        if (err && err.response && err.response.status) { 
            switch (err.response.status) { 
                case 404:
                    Message.error("页面未找到");
                    break;
                case 401:
                    Message.error('没有权限访问')
                    break;
                case 500:
                    Message.error("系统维护中")
                    break;
                case 505:
                    Message.error("网络错误")
            }
        }
    }
)
    原文作者:老蛙@
    原文地址: https://blog.csdn.net/m0_48468380/article/details/121577011
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞