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

更新时间：2024年11月23日 15:14:01 作者：我就不思

这篇文章主要给大家介绍了关于前端无感刷新token的实现步骤,Axios无感知刷新令牌技术通过设置请求拦截器和刷新逻辑,确保API请求不会因令牌过期而中断,使用访问令牌和刷新令牌实现自动刷新,需要的朋友可以参考下

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

XMLHttpRequest

// 创建 XMLHttpRequest 实例
const xhr = new XMLHttpRequest();

// 登录成功后保存 Token 和 Refresh Token
function onLoginSuccess(response) {
    localStorage.setItem('accessToken', response.data.accessToken);
    localStorage.setItem('refreshToken', response.data.refreshToken);
}

// 发起请求的函数
function sendRequest(url, method, data) {
    return new Promise((resolve, reject) => {
        xhr.open(method, url);
        xhr.setRequestHeader('Authorization', `Bearer ${localStorage.getItem('accessToken')}`);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(JSON.parse(xhr.responseText));
                } else {
                    reject({ status: xhr.status, response: xhr.responseText });
                }
            }
        };
        if (method === 'POST' && data) {
            xhr.send(JSON.stringify(data));
        } else {
            xhr.send();
        }
    });
}

// 刷新 Token 的函数
async function refreshToken() {
    const refreshToken = localStorage.getItem('refreshToken');
    const response = await fetch('/path/to/refresh', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ refresh_token: refreshToken }),
    });
    const res = await response.json();
    if (res.success) {
        localStorage.setItem('accessToken', res.data.newAccessToken);
        return true; // 表示刷新成功
    } else {
        return false; // 表示刷新失败
    }
}

// 拦截响应并处理 Token 刷新
xhr.addEventListener('readystatechange', function() {
    if (xhr.readyState === 4 && xhr.status === 401) {
        refreshToken().then(refreshed => {
            if (refreshed) {
                xhr.setRequestHeader('Authorization', `Bearer ${localStorage.getItem('accessToken')}`);
                xhr.send(); // 重新发送请求
            } else {
                alert('请重新登录'); // Token 刷新失败，可能需要用户重新登录
            }
        });
    }
});

Axios

import axios from 'axios';

// 创建 Axios 实例
const apiClient = axios.create({
  baseURL: 'https://your-api-url.com',
  // 其他配置...
});

// 响应拦截器
apiClient.interceptors.response.use(response => {
  return response;
}, error => {
  const { response } = error;
  if (response && response.status === 401) {
    return refreshToken().then(refreshed => {
      if (refreshed) {
        // 令牌刷新成功，重试原始请求
        return apiClient.request(error.config);
      } else {
        // 令牌刷新失败，可能需要用户重新登录
        return Promise.reject(error);
      }
    });
  }
  return Promise.reject(error);
});

// 令牌刷新函数
function refreshToken() {
  return apiClient.post('/path/to/refresh', {
    // 刷新令牌所需的参数，例如 refresh_token
  }).then(response => {
    if (response.data.success) {
      // 假设响应数据中包含新的访问令牌
      const newAccessToken = response.data.newAccessToken;
      // 更新令牌存储
      localStorage.setItem('accessToken', newAccessToken);
      // 更新 Axios 实例的 headers，以便后续请求使用新令牌
      apiClient.defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;
      return true; // 表示刷新成功
    } else {
      return false; // 表示刷新失败
    }
  });
}

Fetch API

// 定义一个函数来处理Fetch请求
async function fetchWithToken(url, options = {}) {
    const token = localStorage.getItem('token');
    if (token) {
        options.headers = {
            ...options.headers,
            'Authorization': `Bearer ${token}`
        };
    }

    try {
        const response = await fetch(url, options);
        if (response.status === 401) { // 假设401表示令牌过期
            const refreshToken = localStorage.getItem('refreshToken');
            if (!refreshToken) {
                throw new Error('No refresh token available');
            }

            // 调用刷新令牌接口
            const refreshResponse = await fetch('/api/refresh-token', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ refreshToken })
            });

            if (refreshResponse.ok) {
                const data = await refreshResponse.json();
                localStorage.setItem('token', data.newAccessToken);
                // 重新尝试原始请求
                options.headers['Authorization'] = `Bearer ${data.newAccessToken}`;
                return fetch(url, options);
            } else {
                throw new Error('Failed to refresh token');
            }
        }
        return response;
    } catch (error) {
        console.error('Fetch error:', error);
        throw error;
    }
}

// 使用示例
fetchWithToken('/api/protected-resource')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

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

JQ

// 创建 JQuery 实例
const apiClient = $.ajaxSetup({
  baseURL: 'https://your-api-url.com',
  // 其他配置...
});

// 响应拦截器
$.ajaxSetup({
  complete: function(jqXHR, textStatus) {
    if (textStatus === 'error' && jqXHR.status === 401) {
      return refreshToken().then(refreshed => {
        if (refreshed) {
          // 令牌刷新成功，重试原始请求
          return apiClient.request(this);
        } else {
          // 令牌刷新失败，可能需要用户重新登录
          alert('请重新登录');
        }
      });
    }
  }
});

// 令牌刷新函数
function refreshToken() {
  return $.ajax({
    url: '/path/to/refresh',
    method: 'POST',
    data: {
      refresh_token: localStorage.getItem('refreshToken')
    },
    dataType: 'json'
  }).then(response => {
    if (response.data.success) {
      // 假设响应数据中包含新的访问令牌
      const newAccessToken = response.data.newAccessToken;
      // 更新令牌存储
      localStorage.setItem('accessToken', newAccessToken);
      // 更新 JQuery 实例的 headers，以便后续请求使用新令牌
      apiClient.defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;
      return true; // 表示刷新成功
    } else {
      return false; // 表示刷新失败
    }
  });
}

uni.request

// 导入封装的request插件
import http from './interface';
import { getRefreshToken } from '@/common/api/apis.js'; // 刷新token接口

let isRefreshing = false; // 是否处于刷新token状态中
let fetchApis = []; // 失效后同时发送请求的容器
let refreshCount = 0; // 限制无感刷新的最大次数

function onFetch(newToken) {
  refreshCount += 1;
  if (refreshCount === 3) {
    refreshCount = 0;
    fetchApis = [];
    return Promise.reject();
  }
  fetchApis.forEach(callback => {
    callback(newToken);
  });
  // 清空缓存接口
  fetchApis = [];
  return Promise.resolve();
}

// 响应拦截器
http.interceptor.response((response) => {
  if (response.config.loading) {
    uni.hideLoading();
  }
  // 请求成功但接口返回的错误处理
  if (response.data.statusCode && +response.data.statusCode !== 200) {
    if (!response.config.needPromise) {
      console.log('error', response);
      uni.showModal({
        title: '提示',
        content: response.data.message,
        showCancel: false,
        confirmText: '知道了'
      });
      // 中断
      return new Promise(() => {});
    } else {
      // reject Promise
      return Promise.reject(response.data);
    }
  }
  return response;
}, (error) => {
  const token = uni.getStorageSync('token');
  const refreshToken = uni.getStorageSync('refreshToken');
  // DESC: 不需要做无感刷新的白名单接口
  const whiteFetchApi = ['/dealersystem/jwtLogin', '/dealersystem/smsLogin', '/sso2/login', '/dealersystem/isLogin'];
  switch (error.statusCode) {
    case 401:
    case 402:
      if (token && !whiteFetchApi.includes(error.config.url)) {
        if (!isRefreshing) {
          isRefreshing = true;
          getRefreshToken({ refreshToken }).then(res => {
            let newToken = res.data;
            onTokenFetched(newToken).then(res => {}).catch(err => {
              // 超过循环次数时，回到登录页，这里可以添加你执行退出登录的逻辑
              uni.showToast({ title: '登录失效，请重新登录', icon: 'error' });
              setTimeout(() => {
                uni.reLaunch({ url: '/pages/login/login' });
              }, 1500);
            });
          }).catch(err => {
            // refreshToken接口报错，证明refreshToken也过期了，那没办法啦重新登录呗
            uni.showToast({ title: '登录失效，请重新登录', icon: 'error' });
            setTimeout(() => {
              uni.reLaunch({ url: '/pages/login/login' });
            }, 1500);
          }).finally(() => { isRefreshing = false });
        }
        return new Promise((resolve) => { // 此处的promise很关键，就是确保你的接口返回值在此处resolve，以便后续代码执行
          addFetchApi((newToken) => {
            error.config.header['Authorization'] = `Bearer ${newToken}`;
            http.request(error.config).then(response => {
              resolve(response);
            });
          });
        });
      }
      break;
    default:
      break;
  }
});

注意事项：

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

总结

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

您可能感兴趣的文章:

15位和18位身份证JS校验的简单实例
下面小编就为大家带来一篇15位和18位身份证JS校验的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
JS获得鼠标位置（兼容多浏览器ie,firefox）脚本之家修正版
这段代码经过测试，支持ie和ff是个不错的代码，并修正了错误，希望大家先运行测试下
2008-11-11
项目中使用Typescript封装axios
这篇文章主要为大家介绍了项目中使用Typescript封装axios的示例过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
深入了解JavaScript中的垃圾回收机制
JavaScript中的垃圾回收机制负责自动管理内存，回收不再使用的对象所占用的内存空间。本文主要介绍了JS中垃圾回收机制的相关知识，需要的可以参考一下
2023-04-04
基于JavaScript实现文字超出部分隐藏
这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏的相关资料,需要的朋友可以参考下
2016-02-02
使用JavaScript实现实时搜索建议功能
在我们的技术旅程中,JavaScript 无疑是一个不可或缺的伙伴,这篇文章主要为大家详细介绍了如何使用 JavaScript 来实现一个复杂功能,即实时搜索建议,感兴趣的可以了解下
2024-02-02
最新热门脚本Autojs源码分享
AutoJS 是基于一个标准字典库的文本输入自动完成 JavaScript 库。Auto.js 是使用纯 JS 实现的，没有任务外部依赖，大小仅仅 6kb，本文给大家分享最新热门脚本Autojs源码，感兴趣的朋友一起看看吧
2021-05-05
JavaScript如何将数据处理成树形结构
这篇文章主要介绍了JavaScript如何将数据处理成树形结构问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
JavaScript中return返回多个值的三个方法实现
本文主要介绍了JavaScript中return返回多个值的三个方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
JavaScript知识点总结(十一)之js中的Object类详解
这篇文章主要介绍了JavaScript知识点总结(十一)之js中的Object类详解的相关资料,需要的朋友可以参考下
2016-05-05

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

目录

XMLHttpRequest

Axios

Fetch API

JQ

uni.request

注意事项：

总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具