手把手教你入门vue+springboot开发（十三）--无感token前端实现

---

前言

上一篇我们研究了无感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(