【Javascript】不满意网上的Token无感知刷新方案,自己琢磨了个感觉还不错~

news2024/11/13 8:47:16

​前言

大家设想一下,如果有一个超级大的表单页面,用户好不容易填完了,然后点击提交,这个时候请求接口居然返回401,然后跳转到登录页。。。那用户心里肯定是一万个草泥马~~~
所以项目里实现token无感知刷新是很有必要的~

在这里插入图片描述

这几天在项目中实践了一套token无感知刷新的方案,其实也有看了一下网上那些解决方案,也知道这类的方案已经烂大街了,但是感觉不太符合我想要的效果,主要体现在以下几个方面:

  • 逻辑都写拦截器里,耦合性高,不太好
  • 接口重试的机制做的,不太好
  • 接口并发时的逻辑处理做的,不太好

我为什么不想要让这套逻辑耦合在拦截器里呢?

一方面是因为,我想要写一套代码,在很多的项目里面可以用,把代码侵入性降到最低
另一方面,因为我觉得token无感知刷新涉及到了接口重发,我理解是接口维度的,不应该把这套逻辑放在响应拦截器里去做。。我理解重发之后就是一个独立的新接口请求了,不想让两个独立的接口请求相互有交集~

所以我还是决定自己写一套方案,并分享给大家,希望大家可以提提意见啥的,共同进步~
温馨提示:需要有一些Promise基础

思路

其实大体思路是一样的,只不过实现可能有差别~就是需要有两个 token

  • accessToken:普通 token,时效短
  • refreshToken:刷新 token,时效长

accessToken用来充当接口请求的令牌,当accessToken过期时效的时候,会使用refreshToken去请求后端,重新获取一个有效的accessToken,然后让接口重新发起请求,从而达到用户无感知 token 刷新的效果
具体分为几步:
1、登录时,拿到accessTokenrefreshToken,并存起来
2、请求接口时,带着accessToken去请求
3、如果accessToken过期失效了,后端会返回401
4、401时,前端会使用refreshToken去请求后端再给一个有效的accessToken
5、重新拿到有效的accessToken后,将刚刚的请求重新发起
6、重复1/2/3/4/5
在这里插入图片描述

有人会问:那如果refreshToken也过期了呢?
好问题,如果refreshToken也过期了,那就真的过期了,就只能乖乖跳转到登录页了~

Nodejs 模拟 token

为了方便给大家演示,我用 express 模拟了后端的 token 缓存与获取,代码如下图(文末有完整代码)由于这里只是演示作用,所以我设置了

  • accessToken:10秒失效
  • refreshToken:30秒失效
const express = require("express");
const server = express();
// 启用 CORS
server.use((req, res, next) => {
  res.setHeader("Access-Control-ALlow-Origin", "*"); // 允许来自任何源的请求
  res.setHeader("Access-Control-ALLow-Methods", "GET,POST,PUT, DELETE"); // 允许的HTTP 方法
  res.setHeader("Access-Control-Allow-Headers", "Content-Type,Authorization"); // 允许的请求头
  next();
});
// 普通 token
let accessToken = null;
//刷新 token
let refreshToken = null;
// 普通 token,10s过期
const ACCESS_EXPIRES = 10 * 1000;
//刷新 token,50s辻期
const REFRESH_EXPIRES = 30 * 1000;
// 模拟服务端缓存 accessToken
const getAccessToken = (() => {
  let timer = null;
  return () => {
    if (timer) return accessToken;
    accessToken = `accessToken ${new Date().getTime()}`;
    timer = setTimeout(() => {
      timer = null;
      accessToken = null;
    }, ACCESS_EXPIRES);
    return accessToken;
  };
})();
// 模拟服务端缓存 refreshToken
const getRefreshToken = (() => {
  let timer = null;
  return () => {
    if (timer) return refreshToken;
    refreshToken = `refreshToken ${new Date() - getTime()}`;
    timer = setTimeout(() => {
      timer = null;
      refreshToken = null;
    }, REFRESH_EXPIRES);
    return refreshToken;
  };
})();
// 登录接口
server.post("/login", (req, res) => {
  // 将两个token 发到前端
  res.send({
    accessToken: getAccessToken(),
    refreshToken: getRefreshToken(),
  });
});
// 测试接口
server.get("/test", (req, res) => {
  const _accessToken = req.headers.authorization;
  if (_accessToken !== accessToken) {
    return res.status(401).json({ error: "Unauthorized" });
  }
  res.send({
    name: "test",
  });

  // 荻取token的接口
  server.get("/token", (req, res) => {
    const _refreshToken = req.headers.authorization;
    // refreshToken 过期那就是真的过期了
    if (_refreshToken !== refreshToken) {
      return res.status(401).json({ error: "Unauthorized" });
    }
    res.send({ accessToken: getAccessToken() });
  });
});

server.listen(8888, () => {
  console.log("成功启动端口:8888");
});

前端模拟请求

先创建一个constants.ts来储存一些常量(文末有完整源码)

// constants.ts
// LocalStorage 存储的 key
export const LOCAL ACCESS KEY ='access_token';
export const LOCAL REFRESH KEY = 'refresh token';
// 请求的baseUrl
export const BASE URL = 'http://localhost:8888';// 路径
export const LOGIN_URL = '/login';
export const TEST_URL = '/test';
export const FETCH TOKEN URL = '/token';

接着我们需要对axios进行简单封装,并且模拟:

  • 模拟登录之后获取双 token 并存储
  • 模拟10s后accessToken失效了
  • 模拟30s后refreshToken失效了

理想状态下,用户无感知的话,那么控制台应该会打印

test-1
test-2
test-3
test-4

打印test-1、test-2比较好理解
打印test-3、test-4是因为虽然accessToken失效了,但我用refreshToken去重新获取有效的accessToken,然后重新发起3、4的请求,所以会照常打印test-3、test-4

不会打印test-5、test-6是因为此时refreshToken已经过期了,所以这个时候双token都过期了,任何请求都不会成功了~
但是我们看到现状是,只打印了test-1、test-2
在这里插入图片描述

不急,我们接下来就实现token无感知刷新这个功能~

实现

我的期望是封装一个class,这个类提供了以下几个功能:

  • 1、能带着refreshToken去获取新accessToken
  • 2、不跟axios的拦截器耦合
  • 3、当获取到新accessToken时,可以重新发起刚刚失败了的请求,无缝衔接,达到无感知的效果
  • 4、当有多个请求并发时,要做好拦截,不要让多次去获取accessToken

针对这几点我做了以下这些事情:

  • 1、类提供一个方法,可以发起请求,带着refreshToken去获取新accessToken
  • 2、提供一个wrapper高阶函数,对每一个请求进行额外处理
  • 3/4、维护一个promise,这个promise只有在请求到新accessToken时才会fulfilled

并且这个类还需要支持配置化,能传入以下参数:
baseUrl:基础url
url:请求新accessToken的url
getRefreshToken:获取refreshToken的函数
unauthorizedCode:无权限的状态码,默认 401
onSuccess:获取新accessToken成功后的回调
onError:获取新accessToken失败后的回调

最后实现了最终效果,打印出了这四个文本
在这里插入图片描述

完整代码

constants.ts

// constants.ts

// localStorage 存储的 key
export const LOCAL_ACCESS_KEY = 'access_token';
export const LOCAL_REFRESH_KEY = 'refresh_token';

// 请求的baseUrl
export const BASE_URL = 'http://localhost:8888';
// 路径
export const LOGIN_URL = '/login';
export const TEST_URL = '/test';
export const FETCH_TOKEN_URL = '/token';

retry.ts

// retry.ts

import { Axios } from 'axios';

export class AxiosRetry {
  // 维护一个promise
  private fetchNewTokenPromise: Promise<any> | null = null;

  // 一些必须的配置
  private baseUrl: string;
  private url: string;
  private getRefreshToken: () => string | null;
  private unauthorizedCode: string | number;
  private onSuccess: (res: any) => any;
  private onError: () => any;

  constructor({
    baseUrl,
    url,
    getRefreshToken,
    unauthorizedCode = 401,
    onSuccess,
    onError,
  }: {
    baseUrl: string;
    url: string;
    getRefreshToken: () => string | null;
    unauthorizedCode?: number | string;
    onSuccess: (res: any) => any;
    onError: () => any;
  }) {
    this.baseUrl = baseUrl;
    this.url = url;
    this.getRefreshToken = getRefreshToken;
    this.unauthorizedCode = unauthorizedCode;
    this.onSuccess = onSuccess;
    this.onError = onError;
  }

  requestWrapper<T>(request: () => Promise<T>): Promise<T> {
    return new Promise((resolve, reject) => {
      // 先把请求函数保存下来
      const requestFn = request;
      return request()
        .then(resolve)
        .catch(err => {
          if (err?.status === this.unauthorizedCode && !(err?.config?.url === this.url)) {
            if (!this.fetchNewTokenPromise) {
              this.fetchNewTokenPromise = this.fetchNewToken();
            }
            this.fetchNewTokenPromise
              .then(() => {
                // 获取token成功后,重新执行请求
                requestFn().then(resolve).catch(reject);
              })
              .finally(() => {
                // 置空
                this.fetchNewTokenPromise = null;
              });
          } else {
            reject(err);
          }
        });
    });
  }

  // 获取token的函数
  fetchNewToken() {
    return new Axios({
      baseURL: this.baseUrl,
    })
      .get(this.url, {
        headers: {
          Authorization: this.getRefreshToken(),
        },
      })
      .then(this.onSuccess)
      .catch(() => {
        this.onError();
        return Promise.reject();
      });
  }
}

index.ts

import { Axios } from 'axios';
import {
  LOCAL_ACCESS_KEY,
  LOCAL_REFRESH_KEY,
  BASE_URL,
  LOGIN_URL,
  TEST_URL,
  FETCH_TOKEN_URL,
} from './constants';
import { AxiosRetry } from './retry';

const axios = new Axios({
  baseURL: 'http://localhost:8888',
});

axios.interceptors.request.use(config => {
  const url = config.url;
  if (url !== 'login') {
    config.headers.Authorization = localStorage.getItem(LOCAL_ACCESS_KEY);
  }
  return config;
});

axios.interceptors.response.use(res => {
  if (res.status !== 200) {
    return Promise.reject(res);
  }
  return JSON.parse(res.data);
});

const axiosRetry = new AxiosRetry({
  baseUrl: BASE_URL,
  url: FETCH_TOKEN_URL,
  unauthorizedCode: 401,
  getRefreshToken: () => localStorage.getItem(LOCAL_REFRESH_KEY),
  onSuccess: res => {
    const accessToken = JSON.parse(res.data).accessToken;
    localStorage.setItem(LOCAL_ACCESS_KEY, accessToken);
  },
  onError: () => {
    console.log('refreshToken 过期了,乖乖去登录页');
  },
});

const get = (url, options?) => {
  return axiosRetry.requestWrapper(() => axios.get(url, options));
};

const post = (url, options?) => {
  return axiosRetry.requestWrapper(() => axios.post(url, options));
};

const login = (): any => {
  return post(LOGIN_URL);
};
const test = (): any => {
  return get(TEST_URL);
};

// 模拟页面函数
const doing = async () => {
  // 模拟登录
  const loginRes = await login();
  localStorage.setItem(LOCAL_ACCESS_KEY, loginRes.accessToken);
  localStorage.setItem(LOCAL_REFRESH_KEY, loginRes.refreshToken);

  // 模拟10s内请求
  test().then(res => console.log(`${res.name}-1`));
  test().then(res => console.log(`${res.name}-2`));

  // 模拟10s后请求,accessToken失效
  setTimeout(() => {
    test().then(res => console.log(`${res.name}-3`));
    test().then(res => console.log(`${res.name}-4`));
  }, 10000);

  // 模拟30s后请求,refreshToken失效
  setTimeout(() => {
    test().then(res => console.log(`${res.name}-5`));
    test().then(res => console.log(`${res.name}-6`));
  }, 30000);
};

// 执行函数
doing();

结语

在前面的Token无感知刷新方案中,我们详细介绍了该方案的设计思路、实现方法和注意事项。通过这种方法,我们可以在不影响用户使用体验的情况下,实现Token的自动刷新,从而保障了系统的安全性和稳定性。
当然,该方案也存在一些局限性。例如,对于一些需要手动输入Token的操作,该方案无法实现自动刷新。此外,如果用户在短时间内连续进行多次登录操作,该方案也可能会引发一些问题。
针对这些问题,我们可以采取一些额外的措施来完善该方案。例如,对于需要手动输入Token的操作,我们可以在登录时自动生成一个Token并将其保存到本地或数据库中,然后在需要使用Token的操作时自动读取并使用该Token。此外,我们还可以在用户登录时对Token进行校验,如果发现Token已经过期或被篡改,则提示用户重新登录并生成新的Token。
总的来说,Token无感知刷新方案是一种非常实用的技术手段,可以有效保障系统的安全性和稳定性。当然,我们也需要不断对其进行改进和完善,以适应不断变化的应用场景和需求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1123202.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Cooking Casual -A Chef‘s Game

Cooking Casual brings out your inner crazy chef in this cool restaurant game! support email : 825407372qq.com

你真的懂Java中的equals和==吗?看完这篇文章你就知道了

和 equals() 是 Java 中两个用于比较对象是否相等的操作符和方法。它们的区别主要有以下几点&#xff1a; 一、类型 是一个运算符&#xff0c;而 equals() 是一个方法。 二、比较对象 Java数据对象类型分为两大类&#xff1a;基本类型和引用类型。 比较的对象可以是基本类型…

Navicat Premium 16 安装教程

一、下载地址 网址&#xff1a;https://pan.baidu.com/s/1jGISrlLGjAUYSIfLbm8IBw?pwd0i90 提取码&#xff1a;0i90 二、安装步骤 1.双击运行安装包 2.下一步 3.选择我同意&#xff0c;下一步 4.自定义安装路径&#xff0c;下一步 5.创建快捷方式&#xff0c;下一步 6.安装…

嵌入式学习笔记(61)位操作寄存器时的特殊作用

2.2.1寄存器操作的要求&#xff08;特定位改变而不影响其他位&#xff09; (1)ARM是内存与IO统一编址的&#xff0c;ARM中有很多内部外设&#xff0c;SoC中CPU通过向这些内部外设的寄存器写入一些特定的值来操控这个内部外设&#xff0c;进而操控硬件动作。所以可以说&#xf…

服务器中了mkp勒索病毒怎么解决,勒索病毒解密,数据恢复

自从九月份以来&#xff0c;云天数据恢复中心陆续接到很多企业的求助&#xff0c;企业的服务器数据库遭到了mkp勒索病毒的攻击&#xff0c;导致企业的所有业务工作中断无法开展&#xff0c;严重影响了企业的正常运行。经过云天数据恢复中心对其该病毒的详细了解与解密&#xff…

论坛议程 | COSCon'23 开源操作系统(O)

众多开源爱好者翘首期盼的开源盛会&#xff1a;第八届中国开源年会&#xff08;COSCon23&#xff09;将于 10月28-29日在四川成都市高新区菁蓉汇举办。本次大会的主题是&#xff1a;“开源&#xff1a;川流不息、山海相映”&#xff01;各位新老朋友们&#xff0c;欢迎到成都&a…

项目管理中的变数:从不同角度洞悉团队管理的重要性

在项目管理中&#xff0c;人是最重要的变数。每个成员的能力、特长、处事方式和思考方法&#xff0c;以及价值观和沟通方式都各不相同。因此&#xff0c;团队管理是项目管理过程中至关重要的环节。尽管成功的团队管理并不一定能保证项目的成功&#xff0c;但失败的团队管理却必…

台灯显色指数多少好?推荐显色指数优秀的护眼台灯

台灯的显色指数是其非常重要的指标&#xff0c;它可以表示灯光照射到物体身上&#xff0c;物体颜色的真实程度&#xff0c;一般用平均显色指数Ra来表示&#xff0c;Ra值越高&#xff0c;灯光显色能力越强。常见的台灯显色指数最低要求一般是在Ra80以上即可&#xff0c;比较好的…

第十五章 I/O(输入/输出)流

15.1 输入/输出流 流是一组有序的数据序列&#xff0c;可分为输入流和输出流两种。 程序从指向源的输入流中读取源中数据&#xff0c;源可以是文件、网络、压缩包或者其他数据源 输出流的指向是数据要到达的目的地&#xff0c;输出流的目标可以是文件、网络、压缩包、控制台和…

宁波市:做大做强跨境电商 赋能外贸创新发展

近日&#xff0c;全国政协第十四届常委会第二次会议专题研究“构建新发展格局&#xff0c;推进中国式现代化”议题&#xff0c;市政协主席徐宇宁参加“推动高水平对外开放”专题小组讨论&#xff0c;全国政协副主席蒋作君到会听取发言&#xff0c;国家发改委、商务部相关司局负…

AI的Prompt是什么

一.AI的Prompt的作用 在人工智能&#xff08;AI&#xff09;中&#xff0c;"Prompt"通常指的是向AI系统提供的输入或指令&#xff0c;用于引导AI进行特定的操作或生成特定的输出。例如&#xff0c;在一个对话型AI系统中&#xff0c;用户输入的问题就是一个prompt&…

设计模式:观察者模式(C#、JAVA、JavaScript、C++、Python、Go、PHP)

简介&#xff1a; 观察者模式&#xff0c;它是一种行为型设计模式&#xff0c;它允许一个对象自动通知其依赖者&#xff08;观察者&#xff09;状态的变化。当被观察者的状态发生改变时&#xff0c;它会通知所有的观察者对象&#xff0c;使他们能够及时做出响应。在观察者模式…

c++ json 库的调用报错 “value, object or array expected“

表示输入的json 文件&#xff0c;写的格式有点不正确例如 双引号 逗号 字符串 列表等 aa.json 出现了一些问题&#xff0c;不是代码问题

Kubernetes概述及其组件/核心组件

Kubernetes 概述&#xff1a; 1、K8S 是什么&#xff1f; K8S 的全称为 Kubernetes (K12345678S)&#xff0c;PS&#xff1a;“嘛&#xff0c;写全称也太累了吧&#xff0c;不如整个缩写”。 作用&#xff1a; 用于自动部署、扩展和管理“容器化&#xff08;containerized&…

文章发表丨求臻医学发布病理AI模型,实现肿瘤精准分型

近日&#xff0c;求臻医学科研团队研发一款基于数字病理图像的肿瘤分型深度学习模型—TMG(The Transformer-based Multiple instance learning with Global average pooling)。该模型可有效消除对病理图像细粒度标记的依赖&#xff0c;实现高准确率的分型&#xff0c;将用于原发…

武汉凯迪正大—线圈匝间耐压测试仪

产品概述 KDYD2830绕组匝间冲击耐压试验仪适用于试验电压30kV及以下高压电机、中小型电机、直流电机的绕组匝间绝缘检测&#xff1b;也可用于变压器绕组、电器线圈绕组的匝间绝缘检测。因电机、变压器绕组由于绝缘结构和绝缘材料的不一致&#xff0c;特别是操作者工艺水平的不…

全志R128适配 ST7789v LCD

适配 ST7789v LCD R128 平台提供了 SPI DBI 的 SPI TFT 接口&#xff0c;具有如下特点&#xff1a; Supports DBI Type C 3 Line/4 Line Interface ModeSupports 2 Data Lane Interface ModeSupports data source from CPU or DMASupports RGB111/444/565/666/888 video form…

华为bug汇报:华为NPU竟成“遥遥领先”?

华为bug汇报&#xff1a;华为NPU竟成“遥遥领先”&#xff1f; 本文为我汇报在Ascend / pytorch 社区的一个bug&#xff0c;其中对NPU的实际算力进行了测试&#xff0c;并发现了华为NPU实际显存与销售宣传时存在着较大差差距的问题&#xff08;算力问题见问题一、显存问题见问…

数据分析和机器学习的11个高级可视化图表介绍

可视化是一种强大的工具&#xff0c;用于以直观和可理解的方式传达复杂的数据模式和关系。它们在数据分析中发挥着至关重要的作用&#xff0c;提供了通常难以从原始数据或传统数字表示中辨别出来的见解。 可视化对于理解复杂的数据模式和关系至关重要&#xff0c;我们将介绍11…

【软考】12.3 质量管理/风险管理

《质量管理》 影响质量&#xff1a;范围、进度、成本质量规划 ——> 质量保证&#xff08;阶段性评审&#xff09; ——> 质量控制&#xff08;实时监控&#xff09; 质量特性 功能性、可靠性、可用性、效率、可维护性、可移植性 McCall质量模型 产品修正、产品转移、…