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

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

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

实现步骤：

设置拦截器：在 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;
  }
});