问题引入
在开发中为了安全或满足分布式场景,通常会舍弃原有的session认证手段,而采用jwt(json web token);但是使用token难免遇到token有效期的问题,如果token长期有效,服务端不断发布新的token,导致有效的token越来越多,这必然是存在安全问题的。而token不想session一样,在用户操作时会进行刷新,为了用户体验,这个刷新就需要自己实现。
方案
一、使用旧token获取新token
如果采取单个token的方式要实现token的自动刷新,就必须使用定时器,每隔一段时间自动刷新token,并且这个时候token一定要是没有过期的,因为如果已经过期的token也可以用来刷新,这和长期有效的token也没什么不同。但这种方式存在一定的问题:
- 为了保证同一时间,账户只被单个用户登录,后端必然要保证一个账户的多个token只有一个生效,最简单的方式就是使用分布式缓存中间件如redis,而存在并发请求时,可能前一个请求带着的是旧token,此时又到了刷新token的时间,就会产生请求的token与服务端存储的token不一致的问题
- 使用定时器是增加了性能的损耗,不是最佳的手段
二、使用双token的方式进行无感刷新
这里重点介绍这种方式,此方案的大致流程为:登录后客户端收到两个token(access_token,refresh_token),其中access_token用来鉴定身份,而refresh_token用来刷新access_token;这就要求了refresh_token要比access_token有效时间要长,并且refresh_token不能用来鉴定身份
使用这种方案又有一下解决方式:
- 后端每次响应都响应一个token过期时间,前端进行判断,在token过期前进行刷新,这种方式存在太多不可控因素,如客户端系统时间被修改、长时间没请求导致token过期却未刷新,无法做到无感刷新,并且也存在并发问题
- 使用定时器,使用定时器增加的资源的损耗,亏损了性能,不推荐
- 在得到token过期的请求时,再发送refresh_token;有点懒加载的意思,这种方案性能最优
具体实现(方案二的第三种方式)
流程
再理一理程序运行的流程:
- 首先,登录得到了两个token,并将其存起来
- 当access_token过期时,自动发送refresh_token到刷新token的请求路径请求token刷新
- 得到新的token之后,将请求重新发送,实现用户无感刷新token
代码
用到的工具函数
//判空
let isEmpty = function(obj) {
return obj == null || obj == "undefined" || obj == "null" || new String(obj).trim() == '';
};
- 封装axios
const my_axios = axios.create({
baseURL: '/app',
timeout: 15000,
withCredentials: true
});
这里对axios做一个简单的封装,不做过多赘述
- 定义请求拦截器,将请求带上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)
}
)
- 响应拦截,进行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("网络错误")
}
}
}
)