vue中Axios添加 * 刷新token的实现方法
作者:待风 发布时间:2024-05-13 09:07:41
标签:Axios, , ,刷新token
Axios是一款网络前端请求框架,基本用法如下:
1. Axios基本用法:
const response = await Axios.create({
baseURL: "https://test.api.com",
headers: {
'Content-Type': 'application/json',
},
}).post<RequestResponse>('/signin', {
user_id: "test_user",
password: "xxx",
});
其中,RequestResponse是返回的数据要解析为的数据类型,如下:
export interface RequestResponse {
data: any;
message: string;
resultCode: number;
}
这样,得到的response就是网络请求的结果,可以进行判断处理。
2. Axios基本封装用法:
对Axios进行简单的封装,使得多个网络请求可以使用统一的header等配置。
新建一个工具类,进行封装:
import Axios, { AxiosRequestConfig, AxiosError, AxiosInstance, AxiosResponse } from 'axios';
?
export const BASE_URL = "https://test.api.com";
?
export const axiosApi = (): AxiosInstance => {
? const instance = Axios.create({
? ? baseURL: BASE_URL,
? ? headers: {
? ? ? ?'Content-Type': 'application/json',
? ? ? ?Authorization: `${getAccessToken()}`,
? ? },
? });
? ??
? return instance;
}
?
const getAccessToken = () => {
? ? // 这里获取本地保存的token
? ? return xxxxx
}
然后使用的地方是这样:
const response = await axiosApi().post<RequestResponse>('/signin', {
user_id: "test_user",
password: "xxx",
});
3. 添加 * 的用法
现在我们想再增加个功能,就是调接口时,header里传了token,但是有时候token过期了接口就会返回失败,我们想在封装的地方添加统一处理,如果token过期就刷新token,然后再调接口。
其中token的数据格式及解析方法已知如下:
import * as crypto from 'crypto';
import * as jwt from "jsonwebtoken";
?
export interface TokenData {
? userid: string;
? exp: number;
? iat: number;
}
?
export const decodeJWT = function (token: string): TokenData {
? if (!token) {
? ? return null;
? }
? const decoded = jwt.decode(token, { complete: true });
? return decoded?.payload;
};
如何统一刷新token呢?可以添加 * 进行处理。把对Axios的封装再改下,添加 * :
export const axiosApi = (): AxiosInstance => {
? const instance = Axios.create({
? ? baseURL: BASE_URL,
? ? headers: {
? ? ? ?'Content-Type': 'application/json',
? ? ? ?Authorization: `${getAccessToken()}`,
? ? },
? });
??
? // 添加 *
? instance.interceptors.request.use(
? ? config => {
? ? ? return refreshToken(config);
? ? },
? ? err => {
? ? ? return Promise.reject(err)
? ? }
? )
? return instance;
}
?
// 刷新token的方法
const refreshToken = async (config: AxiosRequestConfig) => {
? const oldToken = getAccessToken();
? if (!oldToken) { //如果本地没有token,也就是没登录,那就不用刷新token
? ? return config;
? }
?
? const tokenData = decodeJWT(oldToken);//解析token,得到token里包含的过期时间信息
? const currentTimeSeconds = new Date().getTime()/1000;
?
? if (tokenData && tokenData.exp > currentTimeSeconds) {
? ? return config; // token数据里的时间比当前时间大,也就是没到过期时间,那也不用刷新
? }
?
? // 下面是刷新token的逻辑,这里是调API获取新的token
? const response = await signInRefreshToken(tokenData?.userid);
? if (response && response.status == 200) {
? ? const { token, refresh_token } = response.data?.data;
? ? // 保存刷新后的token
? ? storeAccessToken(token);
? ? // 给API的header设置新的token
? ? config.headers.Authorization = token;
? }
? return config;
}
经过这样添加了 * ,如果token没过期,就直接进行网络请求;如果token过期了,那就会调接口刷新token,然后给header设置新的token再进行网络请求。
4. 注意事项:
要注意的一点是,实际应用时,要注意:
1.刷新token时如果调接口,所使用的网络请求工具不能也使用这个封装的工具,否则就会陷入无限循环,可以使用简单未封装的方式请求。
2.本例使用的方法,是进行请求前刷新token。也可以使用先调网络请求,如果接口返回错误码表示token过期,则刷新token,再重新请求的方式。
来源:https://blog.csdn.net/fenggering/article/details/122932230


猜你喜欢
- 1.如果每页都增加打印时间,又如何设置?打印时间的,你可以参考 for(var i=0;i<page.length;i++)
- 使用MySQL的命令终端时,如果输入SQL有误,将有beep声。若要关闭该功能,根据mysql --help,使用mysql --no-be
- 我们在开发项目的时候经常会在后台管理时用到批量展示功能来动态的修改数据库的值。下面以修改数据库的status状态值来实现批量展示功能。批量选
- kelon 问:格式如下:s="地,在要,大,奇功,不知,但是,不示"我想把它split分出來,变成数组來循环,但是不知
- sql_mode="",即强制不设定MySql模式(如不作输入检测、错误提示、语法模式检查等)应该能提高性能,但有如下问
- 作用有局限性,必须在指定的环境下,才能匹配成功,是受到很多因素的影响,所以有一定的适应性模板匹配是一种最原始、最基本的模式识别方法,研究某一
- 斐波那契数列(Fibonacci)最早由印度数学家Gopala提出,而第一个真正研究斐波那契数列的是意大利数学家 Leonardo Fibo
- opencv读取和写入路径有汉字的处理读取图片 img_gt = cv2.imdecode(np.fromfile(path, d
- python3批量删除豆瓣分组下的好友的实现代码"""python3批量删除豆瓣分组下的好友2016年6月7日
- 前言无论是单机锁还是分布式锁,原理都是基于共享的数据,判断当前操作的行为。对于单机则是共享RAM内存,对于集群则可以借助Redis,ZK,D
- 我们先看一下浅复制的缺陷,不知多少人中过招呢? var oOriginal = { memNum: 1, // number memStr:
- 今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,
- Git合并分支后,需要将子分支提交到git仓库,这个时候就需要单独提交子分支,其步骤如下:1.先创建子分支,并包含最新当前分支下的修改数据g
- 今天小编给大家详细的讲解一下Scrapy爬虫框架,希望对大家的学习有帮助。1、Scrapy爬虫框架Scrapy是一个使用Python编程语言
- 本文实例讲述了JS异步函数队列功能。分享给大家供大家参考,具体如下:场景:做直播,会有入场消息,入场特效,用户如果有坐骑,需要给他展示几秒钟
- 1.官网下载:https://dev.mysql.com/downloads/找到Mysql Community Server 点击点击do
- 一、前言阿姨花了30元给幼儿园的小弟弟买了一本习题,里面都是简单的二元加减法。我一听,惊道:“怎么还花钱买题?我动动手指能给你生成一千条。”
- Golang的接口是什么在 Golang 中,接口是一种类型,它是由一组方法签名组成的抽象集合。接口定义了对象应该具有的行为,而不关心对象的
- 1、sys.stdin.readline()与inputimport sys# sys.stdin.readline() 相当于input,
- 引言提到 numpy 的数组操作,我们就不得不说到 np.concatenate() 函数,concatenate 一词在英文中是级联的意思