前端无感刷新token的实现步骤

石头和桃子

1. Axios 无感知刷新令牌是一种在前端应用中实现自动刷新访问令牌（access token）的技术，确保用户在进行 API 请求时不会因为令牌过期而中断操作

复制代码

• 访问令牌（Access Token）：用于访问受保护资源的凭证，通常有一定的有效期。
  
• 刷新令牌（Refresh Token）：用于获取新的访问令牌，当访问令牌过期时使用。
  

实现步骤：

• 设置拦截器：在 Axios的请求拦截器中添加逻辑，检查当前时间与令牌的过期时间。如果访问令牌已过期但刷新令牌仍然有效，则调用刷新令牌接口获取新的访问令牌。
  
• 更新令牌存储：一旦获得新的访问令牌，将其存储到 localStorage、Vuex 或其他状态管理工具中，以便后续请求使用新令牌。
  
• 重试原始请求：在成功刷新令牌后，重新发送被拦截的请求，此时使用新的访问令牌。
  

XMLHttpRequest

1. // 创建 XMLHttpRequest 实例
   
2. const xhr = new XMLHttpRequest();
   
3. 
   
4. // 登录成功后保存 Token 和 Refresh Token
   
5. function onLoginSuccess(response) {
   
6.     localStorage.setItem('accessToken', response.data.accessToken);
   
7.     localStorage.setItem('refreshToken', response.data.refreshToken);
   
8. }
   
9. 
   
10. // 发起请求的函数
    
11. function sendRequest(url, method, data) {
    
12.     return new Promise((resolve, reject) => {
    
13.         xhr.open(method, url);
    
14.         xhr.setRequestHeader('Authorization', `Bearer ${localStorage.getItem('accessToken')}`);
    
15.         xhr.onreadystatechange = function() {
    
16.             if (xhr.readyState === 4) {
    
17.                 if (xhr.status === 200) {
    
18.                     resolve(JSON.parse(xhr.responseText));
    
19.                 } else {
    
20.                     reject({ status: xhr.status, response: xhr.responseText });
    
21.                 }
    
22.             }
    
23.         };
    
24.         if (method === 'POST' && data) {
    
25.             xhr.send(JSON.stringify(data));
    
26.         } else {
    
27.             xhr.send();
    
28.         }
    
29.     });
    
30. }
    
31. 
    
32. // 刷新 Token 的函数
    
33. async function refreshToken() {
    
34.     const refreshToken = localStorage.getItem('refreshToken');
    
35.     const response = await fetch('/path/to/refresh', {
    
36.         method: 'POST',
    
37.         headers: {
    
38.             'Content-Type': 'application/json',
    
39.         },
    
40.         body: JSON.stringify({ refresh_token: refreshToken }),
    
41.     });
    
42.     const res = await response.json();
    
43.     if (res.success) {
    
44.         localStorage.setItem('accessToken', res.data.newAccessToken);
    
45.         return true; // 表示刷新成功
    
46.     } else {
    
47.         return false; // 表示刷新失败
    
48.     }
    
49. }
    
50. 
    
51. // 拦截响应并处理 Token 刷新
    
52. xhr.addEventListener('readystatechange', function() {
    
53.     if (xhr.readyState === 4 && xhr.status === 401) {
    
54.         refreshToken().then(refreshed => {
    
55.             if (refreshed) {
    
56.                 xhr.setRequestHeader('Authorization', `Bearer ${localStorage.getItem('accessToken')}`);
    
57.                 xhr.send(); // 重新发送请求
    
58.             } else {
    
59.                 alert('请重新登录'); // Token 刷新失败，可能需要用户重新登录
    
60.             }
    
61.         });
    
62.     }
    
63. });

复制代码

Axios

1. import axios from 'axios';
   
2. 
   
3. // 创建 Axios 实例
   
4. const apiClient = axios.create({
   
5.   baseURL: 'https://your-api-url.com',
   
6.   // 其他配置...
   
7. });
   
8. 
   
9. // 响应拦截器
   
10. apiClient.interceptors.response.use(response => {
    
11.   return response;
    
12. }, error => {
    
13.   const { response } = error;
    
14.   if (response && response.status === 401) {
    
15.     return refreshToken().then(refreshed => {
    
16.       if (refreshed) {
    
17.         // 令牌刷新成功，重试原始请求
    
18.         return apiClient.request(error.config);
    
19.       } else {
    
20.         // 令牌刷新失败，可能需要用户重新登录
    
21.         return Promise.reject(error);
    
22.       }
    
23.     });
    
24.   }
    
25.   return Promise.reject(error);
    
26. });
    
27. 
    
28. // 令牌刷新函数
    
29. function refreshToken() {
    
30.   return apiClient.post('/path/to/refresh', {
    
31.     // 刷新令牌所需的参数，例如 refresh_token
    
32.   }).then(response => {
    
33.     if (response.data.success) {
    
34.       // 假设响应数据中包含新的访问令牌
    
35.       const newAccessToken = response.data.newAccessToken;
    
36.       // 更新令牌存储
    
37.       localStorage.setItem('accessToken', newAccessToken);
    
38.       // 更新 Axios 实例的 headers，以便后续请求使用新令牌
    
39.       apiClient.defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;
    
40.       return true; // 表示刷新成功
    
41.     } else {
    
42.       return false; // 表示刷新失败
    
43.     }
    
44.   });
    
45. }

复制代码

Fetch API

1. // 定义一个函数来处理Fetch请求
   
2. async function fetchWithToken(url, options = {}) {
   
3.     const token = localStorage.getItem('token');
   
4.     if (token) {
   
5.         options.headers = {
   
6.             ...options.headers,
   
7.             'Authorization': `Bearer ${token}`
   
8.         };
   
9.     }
   
10. 
    
11.     try {
    
12.         const response = await fetch(url, options);
    
13.         if (response.status === 401) { // 假设401表示令牌过期
    
14.             const refreshToken = localStorage.getItem('refreshToken');
    
15.             if (!refreshToken) {
    
16.                 throw new Error('No refresh token available');
    
17.             }
    
18. 
    
19.             // 调用刷新令牌接口
    
20.             const refreshResponse = await fetch('/api/refresh-token', {
    
21.                 method: 'POST',
    
22.                 headers: {
    
23.                     'Content-Type': 'application/json'
    
24.                 },
    
25.                 body: JSON.stringify({ refreshToken })
    
26.             });
    
27. 
    
28.             if (refreshResponse.ok) {
    
29.                 const data = await refreshResponse.json();
    
30.                 localStorage.setItem('token', data.newAccessToken);
    
31.                 // 重新尝试原始请求
    
32.                 options.headers['Authorization'] = `Bearer ${data.newAccessToken}`;
    
33.                 return fetch(url, options);
    
34.             } else {
    
35.                 throw new Error('Failed to refresh token');
    
36.             }
    
37.         }
    
38.         return response;
    
39.     } catch (error) {
    
40.         console.error('Fetch error:', error);
    
41.         throw error;
    
42.     }
    
43. }
    
44. 
    
45. // 使用示例
    
46. fetchWithToken('/api/protected-resource')
    
47.     .then(response => response.json())
    
48.     .then(data => console.log(data))
    
49.     .catch(error => console.error('Error:', error));

复制代码

• fetchWithToken函数： 这是一个封装了Fetch API的函数，它首先检查本地存储中的访问令牌是否存在，并在请求头中添加该令牌。如果响应状态码为401（表示令牌过期），则尝试使用刷新令牌获取新的访问令牌，并重新发送原始请求。
  
• 刷新令牌逻辑： 在检测到令牌过期时，函数会调用刷新令牌接口，并将新的访问令牌存储到本地存储中。然后，它会重新设置请求头中的授权信息，并重新发送原始请求。
  
• 错误处理： 如果在刷新令牌或发送请求的过程中发生错误，函数会抛出相应的错误，并在控制台中记录错误信息。
  

JQ

1. // 创建 JQuery 实例
   
2. const apiClient = $.ajaxSetup({
   
3.   baseURL: 'https://your-api-url.com',
   
4.   // 其他配置...
   
5. });
   
6. 
   
7. // 响应拦截器
   
8. $.ajaxSetup({
   
9.   complete: function(jqXHR, textStatus) {
   
10.     if (textStatus === 'error' && jqXHR.status === 401) {
    
11.       return refreshToken().then(refreshed => {
    
12.         if (refreshed) {
    
13.           // 令牌刷新成功，重试原始请求
    
14.           return apiClient.request(this);
    
15.         } else {
    
16.           // 令牌刷新失败，可能需要用户重新登录
    
17.           alert('请重新登录');
    
18.         }
    
19.       });
    
20.     }
    
21.   }
    
22. });
    
23. 
    
24. // 令牌刷新函数
    
25. function refreshToken() {
    
26.   return $.ajax({
    
27.     url: '/path/to/refresh',
    
28.     method: 'POST',
    
29.     data: {
    
30.       refresh_token: localStorage.getItem('refreshToken')
    
31.     },
    
32.     dataType: 'json'
    
33.   }).then(response => {
    
34.     if (response.data.success) {
    
35.       // 假设响应数据中包含新的访问令牌
    
36.       const newAccessToken = response.data.newAccessToken;
    
37.       // 更新令牌存储
    
38.       localStorage.setItem('accessToken', newAccessToken);
    
39.       // 更新 JQuery 实例的 headers，以便后续请求使用新令牌
    
40.       apiClient.defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;
    
41.       return true; // 表示刷新成功
    
42.     } else {
    
43.       return false; // 表示刷新失败
    
44.     }
    
45.   });
    
46. }

复制代码

uni.request

1. // 导入封装的request插件
   
2. import http from './interface';
   
3. import { getRefreshToken } from '@/common/api/apis.js'; // 刷新token接口
   
4. 
   
5. let isRefreshing = false; // 是否处于刷新token状态中
   
6. let fetchApis = []; // 失效后同时发送请求的容器
   
7. let refreshCount = 0; // 限制无感刷新的最大次数
   
8. 
   
9. function onFetch(newToken) {
   
10.   refreshCount += 1;
    
11.   if (refreshCount === 3) {
    
12.     refreshCount = 0;
    
13.     fetchApis = [];
    
14.     return Promise.reject();
    
15.   }
    
16.   fetchApis.forEach(callback => {
    
17.     callback(newToken);
    
18.   });
    
19.   // 清空缓存接口
    
20.   fetchApis = [];
    
21.   return Promise.resolve();
    
22. }
    
23. 
    
24. // 响应拦截器
    
25. http.interceptor.response((response) => {
    
26.   if (response.config.loading) {
    
27.     uni.hideLoading();
    
28.   }
    
29.   // 请求成功但接口返回的错误处理
    
30.   if (response.data.statusCode && +response.data.statusCode !== 200) {
    
31.     if (!response.config.needPromise) {
    
32.       console.log('error', response);
    
33.       uni.showModal({
    
34.         title: '提示',
    
35.         content: response.data.message,
    
36.         showCancel: false,
    
37.         confirmText: '知道了'
    
38.       });
    
39.       // 中断
    
40.       return new Promise(() => {});
    
41.     } else {
    
42.       // reject Promise
    
43.       return Promise.reject(response.data);
    
44.     }
    
45.   }
    
46.   return response;
    
47. }, (error) => {
    
48.   const token = uni.getStorageSync('token');
    
49.   const refreshToken = uni.getStorageSync('refreshToken');
    
50.   // DESC: 不需要做无感刷新的白名单接口
    
51.   const whiteFetchApi = ['/dealersystem/jwtLogin', '/dealersystem/smsLogin', '/sso2/login', '/dealersystem/isLogin'];
    
52.   switch (error.statusCode) {
    
53.     case 401:
    
54.     case 402:
    
55.       if (token && !whiteFetchApi.includes(error.config.url)) {
    
56.         if (!isRefreshing) {
    
57.           isRefreshing = true;
    
58.           getRefreshToken({ refreshToken }).then(res => {
    
59.             let newToken = res.data;
    
60.             onTokenFetched(newToken).then(res => {}).catch(err => {
    
61.               // 超过循环次数时，回到登录页，这里可以添加你执行退出登录的逻辑
    
62.               uni.showToast({ title: '登录失效，请重新登录', icon: 'error' });
    
63.               setTimeout(() => {
    
64.                 uni.reLaunch({ url: '/pages/login/login' });
    
65.               }, 1500);
    
66.             });
    
67.           }).catch(err => {
    
68.             // refreshToken接口报错，证明refreshToken也过期了，那没办法啦重新登录呗
    
69.             uni.showToast({ title: '登录失效，请重新登录', icon: 'error' });
    
70.             setTimeout(() => {
    
71.               uni.reLaunch({ url: '/pages/login/login' });
    
72.             }, 1500);
    
73.           }).finally(() => { isRefreshing = false });
    
74.         }
    
75.         return new Promise((resolve) => { // 此处的promise很关键，就是确保你的接口返回值在此处resolve，以便后续代码执行
    
76.           addFetchApi((newToken) => {
    
77.             error.config.header['Authorization'] = `Bearer ${newToken}`;
    
78.             http.request(error.config).then(response => {
    
79.               resolve(response);
    
80.             });
    
81.           });
    
82.         });
    
83.       }
    
84.       break;
    
85.     default:
    
86.       break;
    
87.   }
    
88. });

复制代码

注意事项：

• 错误处理：确保在刷新令牌失败时，有适当的错误处理机制，例如提示用户重新登录。
  
• 并发请求：处理多个请求同时需要刷新令牌的情况，避免重复刷新。
  
• 安全性：确保刷新令牌的安全存储和传输，防止被恶意攻击者获取。
  

总结

到此这篇关于前端无感刷新token的文章就介绍到这了,更多相关前端无感刷新token内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/3312596dd.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！