0
0

前端无感刷新token

在这里插入图片描述
摘要：

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

目录概览

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

实现步骤：

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

XMLHttpRequest

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

Axios

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

Fetch API

  1. // 定义一个函数来处理Fetch请求
  2. async function fetchWithToken(url, options ={}){
  3.     const token = localStorage.getItem('token');if(token){
  4.         options.headers ={...options.headers,
  5.             'Authorization':`Bearer ${token}`};}
  7.     try {
  8.         const response = await fetch(url, options);if(response.status ===401){ // 假设401表示令牌过期
  9.             const refreshToken = localStorage.getItem('refreshToken');if(!refreshToken){
  10.                 throw new Error('No refresh token available');}
  12.             // 调用刷新令牌接口
  13.             const refreshResponse = await fetch('/api/refresh-token', {
  14.                 method: 'POST',
  15.                 headers: {'Content-Type':'application/json'},
  16.                 body: JSON.stringify({ refreshToken })});if(refreshResponse.ok){
  17.                 const data = await refreshResponse.json();
  18.                 localStorage.setItem('token', data.newAccessToken);
  19.                 // 重新尝试原始请求
  20.                 options.headers['Authorization']=`Bearer ${data.newAccessToken}`;return fetch(url, options);}else{
  21.                 throw new Error('Failed to refresh token');}}return response;} catch (error){
  22.         console.error('Fetch error:', error);
  23.         throw error;}}
  25. // 使用示例
  26. fetchWithToken('/api/protected-resource')
  27.     .then(response => response.json())
  28.     .then(data => console.log(data))
  29.     .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. });
  7. // 响应拦截器
  8. $.ajaxSetup({
  9.   complete: function(jqXHR, textStatus){if(textStatus ==='error'&& jqXHR.status ===401){return refreshToken().then(refreshed =>{if(refreshed){
  10.           // 令牌刷新成功，重试原始请求
  11.           return apiClient.request(this);}else{
  12.           // 令牌刷新失败，可能需要用户重新登录
  13.           alert('请重新登录');}});}}});
  15. // 令牌刷新函数
  16. functionrefreshToken(){return $.ajax({
  17.     url: '/path/to/refresh',
  18.     method: 'POST',
  19.     data: {
  20.       refresh_token: localStorage.getItem('refreshToken')},
  21.     dataType: 'json'}).then(response =>{if(response.data.success){
  22.       // 假设响应数据中包含新的访问令牌
  23.       const newAccessToken = response.data.newAccessToken;
  24.       // 更新令牌存储
  25.       localStorage.setItem('accessToken', newAccessToken);
  26.       // 更新 JQuery 实例的 headers，以便后续请求使用新令牌
  27.       apiClient.defaults.headers.common['Authorization']=`Bearer ${newAccessToken}`;returntrue; // 表示刷新成功
  28.     }else{returnfalse; // 表示刷新失败
  29.     }});}

uni.request

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

注意事项：

  • 错误处理：确保在刷新令牌失败时，有适当的错误处理机制，例如提示用户重新登录。
  • 并发请求：处理多个请求同时需要刷新令牌的情况，避免重复刷新。
  • 安全性：确保刷新令牌的安全存储和传输，防止被恶意攻击者获取。
标签： 前端 javascript
本文转载自: https://blog.csdn.net/weixin_45788691/article/details/143817612
版权归原作者 我就不思 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端无感刷新token”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。