您好,登录后才能下订单哦!
这篇文章将为大家详细讲解有关vue中Axios如何添加拦截器刷新token,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
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就是网络请求的结果,可以进行判断处理。
对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", });
现在我们想再增加个功能,就是调接口时,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再进行网络请求。
要注意的一点是,实际应用时,要注意:
1.刷新token时如果调接口,所使用的网络请求工具不能也使用这个封装的工具,否则就会陷入无限循环,可以使用简单未封装的方式请求。
2.本例使用的方法,是进行请求前刷新token。也可以使用先调网络请求,如果接口返回错误码表示token过期,则刷新token,再重新请求的方式。
关于“vue中Axios如何添加拦截器刷新token”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。