vue中Axios新增攔截器重新整理token的實現方法

語言: CN / TW / HK

持續創作,加速成長!這是我參與「掘金日新計劃 · 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('/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 = "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('/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,再重新請求的方式。