百度360必应搜狗淘宝本站头条
mqtt服务器xftp6mybatiscollectionkeyerrorc#var
当前位置：网站首页 > 热门文章 > 正文

Token机制，refreshToken 、accessToken

bigegpt 2024-08-26 10:54 2 浏览

Token无感知刷新，说说我对解决方案的理解~

前言

大家设想一下，如果有一个超级大的表单页面，用户好不容易填完了，然后点击提交，这个时候请求接口居然返回401，然后跳转到登录页。。。那用户心里肯定是一万个草泥马~~~

所以项目里实现token无感知刷新是很有必要的~

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

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

token无感知刷新涉及到了接口重发，我理解是接口维度的，不应该把这套逻辑放在响应拦截器里去做。。我理解重发之后就是一个独立的新接口请求了，不想让两个独立的接口请求相互有交集~

所以我还是决定自己写一套方案，并分享给大家，希望大家可以提提意见啥的，共同进步~

温馨提示：需要有一些Promise基础

思路

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

  • accessToken：普通 token，时效短
  • refreshToken：刷新 token，时效长

accessToken用来充当接口请求的令牌，当accessToken过期时效的时候，会使用refreshToken去请求后端，重新获取一个有效的accessToken，然后让接口重新发起请求，从而达到用户无感知 token 刷新的效果

具体分为几步：

  • 1、登录时，拿到accessToken和refreshToken，并存起来
  • 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秒失效

前端模拟请求

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

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

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

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

ts
复制代码
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

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

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

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();

相关推荐

AI「自我复制」能力曝光，RepliBench警示:大模型正在学会伪造身份

科幻中AI自我复制失控场景，正成为现实世界严肃的研究课题。英国AISI推出RepliBench基准，分解并评估AI自主复制所需的四大核心能力。测试显示，当前AI尚不具备完全自主复制能力，但在获取资源...

【Python第三方库安装】介绍8种情况，这里最全看这里就够了!

**本图文作品主要解决CMD或pycharm终端下载安装第三方库可能出错的问题**本作品介绍了8种安装方法，这里最全的python第三方库安装教程，简单易上手，满满干货！希望大家能愉快地写代码，而不要...

pyvips，一个神奇的 Python 库!（pythonvip视频）

大家好，今天为大家分享一个神奇的Python库-pyvips。在图像处理领域，高效和快速的图像处理工具对于开发者来说至关重要。pyvips是一个强大的Python库，基于libvips...

mac 安装tesseract、pytesseract以及简单使用

一.tesseract-OCR的介绍1.tesseract-OCR是一个开源的OCR引擎，能识别100多种语言，专门用于对图片文字进行识别，并获取文本。但是它的缺点是对手写的识别能力比较差。2.用te...

实测o3/o4-mini:3分钟解决欧拉问题，OpenAI最强模型名副其实!

号称“OpenAI迄今为止最强模型”，o3/o4-mini真实能力究竟如何？就在发布后的几小时内，网友们的第一波实测已新鲜出炉。最强推理模型o3，即使遇上首位全职提示词工程师RileyGoodsid...

使用Python将图片转换为字符画并保存到文件

字符画（ASCIIArt）是将图片转换为由字符组成的艺术作品。利用Python，我们可以轻松实现图片转字符画的功能。本教程将带你一步步实现这个功能，并详细解释每一步的代码和实现原理。环境准备首先，你...

5分钟-python包管理器pip安装（python pip安装包）

pip是一个现代的，通用、普遍的Python包管理工具。提供了对Python包的查找、下载、安装、卸载的功能，是Python开发的基础。第一步：PC端打开网址：选择gz后缀的文件下载第二步：...

网络问题快速排查，你也能当好自己家的网络攻城狮

前面写了一篇关于网络基础和常见故障排查的，只列举了工具。没具体排查方式。这篇重点把几个常用工具的组合讲解一下。先有请今天的主角：nslookup及dig，traceroute，httping，teln...

终于把TCP/IP 协议讲的明明白白了，再也不怕被问三次握手了

文：涤生_Woo下周就开始和大家成体系的讲hadoop了，里面的每一个模块的技术细节我都会涉及到，希望大家会喜欢。当然了你也可以评论或者留言自己喜欢的技术，还是那句话，希望咱们一起进步。今天周五，讲讲...

记一次工控触摸屏故障的处理（工控触摸屏维修）

先说明一下，虽然我是自动化专业毕业，但已经很多年不从事现场一线的工控工作了。但自己在单位做的工作也牵涉到信息化与自动化的整合，所以平时也略有关注。上一周一个朋友接到一个活，一家光伏企业用于启动机组的触...

19、90秒快速“读懂”路由、交换命令行基础

命令行视图VRP分层的命令结构定义了很多命令行视图，每条命令只能在特定的视图中执行。本例介绍了常见的命令行视图。每个命令都注册在一个或多个命令视图下，用户只有先进入这个命令所在的视图，才能运行相应的命...

摄像头没图像的几个检查方法（摄像头没图像怎么修复）

背景描述：安防监控项目上，用户的摄像头运行了一段时间有部分摄像头不能进行预览，需要针对不能预览的摄像头进行排查，下面列出几个常见的排查方法。问题解决：一般情况为网络、供电、设备配置等情况。一，网络检查...

小谈:必需脂肪酸（必需脂肪酸主要包括）

必需脂肪酸是指机体生命活动必不可少，但机体自身又不能合成，必需由食物供给的多不饱和脂肪酸（PUFA）。必需脂肪酸主要包括两种，一种是ω-3系列的α-亚麻酸（18：3），一种是ω-6系列的亚油酸（18：...

期刊推荐:15本sci四区易发表的机械类期刊

　　虽然，Sci四区期刊相比收录在sci一区、二区、三区的期刊来说要求不是那么高，投稿起来也相对容易一些。但，sci四区所收录的期刊中每本期刊的投稿难易程度也是不一样的。为方便大家投稿，本文给大家推荐...

be sick of 用法考察（be in lack of的用法）

besick表示病了,做谓语.本身是形容词，有多种意思.最通常的是：生病,恶心，呕吐，不适，晕，厌烦，无法忍受asickchild生病的孩子Hermother'sverysi...

一周热门
最近发表
标签列表