前言
上一篇我们研究了无感token刷新的实现方案以及后端代码实现,本篇我们将详细研究一下前端代码实现,前端代码实现过程中也有很多细节的地方需要注意,重点要关注前端代码编码过程中的业务逻辑处理。
一、前端代码实现
1.登录处理
Login.vue文件中:
//调用接口,完成登录
let result = await userLoginService(registerData.value);
ElMessage.success(result.msg ? result.msg : '登录成功')
//把得到的token存储到pinia中
tokenStore.setToken(result.data)
//跳转到首页 路由完成跳转
router.push('/user')
仔细对比一下会发现,这段代码跟原来的一样,并没有修改。但是实际上,意思已经不同了,原代码的tokenStore中保存的是个token字符串,即一个普通token;新代码的tokenStore中保存的是个json对象,里面包含token和refresh_token两个字段内容。
2.刷新token请求增加
user.js文件中增加:
//获取token
export const refreshToken = ()=>{
return request.get('/user/refresh_token')
}
增加refreshToken方法从后端获取新的token。
3.请求拦截器修改
request.js文件中instance.interceptors.request.use:
//请求前的回调
//添加token
const tokenStore = useTokenStore();
//判断有没有token
if(tokenStore.token){
if(config.url.includes(