vue中Axios新增攔截器重新整理token的實現方法
持續創作，加速成長！這是我參與「掘金日新計劃 · 10 月更文挑戰」的第32天，點選檢視活動詳情
vue中Axios新增攔截器重新整理token的實現方法
Axios是一款網路前端請求框架，本文主要介紹了vue中Axios新增攔截器重新整理token的實現方法，
1. Axios基本用法：
```
const response = await Axios.create({
baseURL: "http://test.api.com",
headers: {
'Content-Type': 'application/json',
},
}).post
```
其中，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 = "http://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
```
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，再重新請求的方式。