Vue3 + Axios双Token刷新办理方案

        在当代前端开辟中，使用 API 进行数据交互时，我们常常会碰到身份认证的问题。为了提高安全性，许多应用接纳了 Token 机制，如 JWT（JSON Web Token）来管理用户的身份状态。本文将介绍如何在 Vue3 项目中使用 Axios 实现双 Token 刷新机制，确保用户体验流畅的同时提高安全性。
前置条件

   

• 本文只针对Vue3前端所编写的双Token刷新办理方案，关于Spring Cloud微服务项目的双Token刷新实现，请参考：Spring Cloud + JWT实现双Token刷新
  
• 关于Vue3项目的搭建，请参考：Vite 创建 Vue3 + TS 项目
  
• 本文将通过封装Axios的方式，让前端实现无感刷新Token，关于Axios的封装，请参考：Vue3项目基于Axios封装request请求
  

   刷新机制

        在完成上述步骤后，我们就可以开始对前端项目进行操作了。但起首，我们需要相识到双Token刷新的机制：
   在使用 Token 认证时，我们通常会使用两种 Token：
  

• Access Token：用于身份验证，通常时效较短（如 10 分钟）。
  
• Refresh Token：用于获取新的 Access Token，时效较长（如 7 天至几个月）。
  

  当 Access Token 逾期时，我们可以使用 Refresh Token 来请求新的 Access Token，而不是要求用户重新登录。通过这种方式，用户的体验将更加平滑。
          但是，这里是博主自己写的后端，博主的服务端在双Token刷新机制上的原理跟上述是一样的， 不同的是，博主在生成Token的时间，并没有将Refresh Token 返回给前端，而是跟UserId一起以键值对的情势存储在了Redis中。
        在客户端Access Token逾期后，直接根据Base64剖析出Access Token载荷中的UserId，然后根据这个UserId查询存储在Redis中的Refresh Token，如果这个Refresh Token有用且是合法的，那么我们就根据之前Access Token载荷中的信息重新生成一个Access Token返回给客户端，以此来达到刷新Token的目的。
   根据以上Token刷新机制，我们在Vue3前端代码中，可以给出一个无感刷新Token的思路：
  

• 如果Access Token逾期，那么我们可以通过Axios的响应拦截器获取到新的Access Token
  
• 如果获取到的这个Access Token存在且不为空，我们可以重新发送原始请求
  

  代码实现

1. // 添加响应拦截器
2. service.interceptors.response.use(
4.         async (response) => {
6.         // 判断是否有新的Token
7.                 if (response.data.ACCESS_TOKEN) {
8.             // 将服务端返回的新Token存储到Session中
9.                         Session.set('token', response.data.ACCESS_TOKEN);
10.                         // 重新发送原始请求
11.             const config = response.config;
12.             try {
13.                 const newResponse = await service.request(config);
14.                 return newResponse;
15.             } catch (error) {
16.                 return Promise.reject(error);
17.             }
18.                 }
20.                 // 对响应数据做点什么
21.                 const res = response.data;
22.                 if (res.code && res.code !== 0) {
23.                         // `token` 过期或者账号已在别处登录
24.                         if (res.code === 401 || res.code === 4001) {
25.                                 Session.clear(); // 清除浏览器全部临时缓存
26.                                 window.location.href = '/'; // 去登录页
27.                                 ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
28.                                         .then(() => { })
29.                                         .catch(() => { });
30.                                 return Promise.reject(service.interceptors.response);
31.                         } else {   // 如果响应中有新的 token，则更新 Session 中的 token
33.                                 return res;
34.                         }
36.                 } else {
37.                         return res;
38.                 }
39.         },
40.         (error) => {
41.                 // 对响应错误做点什么
42.                 if (error.message.indexOf('timeout') != -1) {
43.                         ElMessage.error('网络超时');
44.                 } else if (error.message == 'Network Error') {
45.                         ElMessage.error('网络连接错误');
46.                 } else {
47.                         if (error.response.data) ElMessage.error(error.response.statusText);
48.                         else ElMessage.error('接口路径找不到');
49.                 }
50.                 return Promise.reject(error);
51.         }
52. );

复制代码

 查验真理

   如图，当Token逾期时，我们访问这个查询接口时，Axios进行了两次接口调用 
  

   第一次调用这个查询接口时，我们的Token失效了，拿到了服务端给的新的Token 
  

           然后，根据我们之前在Axios响应拦截器中的代码逻辑，它在将这个新的Token存储到Session中后，又重新发送了一次原始请求

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。