欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中Axios添加攔截器刷新token的實現(xiàn)方法

 更新時間:2022年02月15日 10:37:13   作者:待風  
Axios是一款網絡前端請求框架,本文主要介紹了vue中Axios添加攔截器刷新token的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

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是返回的數(shù)據要解析為的數(shù)據類型,如下:

export interface RequestResponse {
    data: any;
    message: string;
    resultCode: number;
}

這樣,得到的response就是網絡請求的結果,可以進行判斷處理。

2. Axios基本封裝用法:

對Axios進行簡單的封裝,使得多個網絡請求可以使用統(tǒng)一的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. 添加攔截器的用法

現(xiàn)在我們想再增加個功能,就是調接口時,header里傳了token,但是有時候token過期了接口就會返回失敗,我們想在封裝的地方添加統(tǒng)一處理,如果token過期就刷新token,然后再調接口。

其中token的數(shù)據格式及解析方法已知如下:

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;
};

如何統(tǒng)一刷新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數(shù)據里的時間比當前時間大,也就是沒到過期時間,那也不用刷新
? }
?
? // 下面是刷新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時如果調接口,所使用的網絡請求工具不能也使用這個封裝的工具,否則就會陷入無限循環(huán),可以使用簡單未封裝的方式請求。

2.本例使用的方法,是進行請求前刷新token。也可以使用先調網絡請求,如果接口返回錯誤碼表示token過期,則刷新token,再重新請求的方式。

到此這篇關于vue中Axios添加攔截器刷新token的實現(xiàn)方法的文章就介紹到這了,更多相關Axios添加攔截器刷新token內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 從零開始封裝自己的自定義Vue組件

    從零開始封裝自己的自定義Vue組件

    如何封裝自己的Vue組件,如何把自己的Vue代碼封裝成公共組件,今天為大家簡單介紹一下如何封裝自己的Vue組件
    2018-10-10
  • vue實現(xiàn)分頁組件

    vue實現(xiàn)分頁組件

    這篇文章主要為大家詳細介紹了vue實現(xiàn)分頁組件的具體代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-12-12
  • 3種vue組件的書寫形式

    3種vue組件的書寫形式

    這篇文章主要為大家詳細介紹了3種vue組件的書寫形式,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • vue input標簽通用指令校驗的實現(xiàn)

    vue input標簽通用指令校驗的實現(xiàn)

    這篇文章主要介紹了vue input標簽通用指令校驗的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-11-11
  • vue.js 底部導航欄 一級路由顯示 子路由不顯示的解決方法

    vue.js 底部導航欄 一級路由顯示 子路由不顯示的解決方法

    下面小編就為大家分享一篇vue.js 底部導航欄 一級路由顯示 子路由不顯示的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue2中使用axios及axios攔截器的配置教程

    vue2中使用axios及axios攔截器的配置教程

    眾所周知Axios是一個基于promise的HTTP庫,可以用在瀏覽器和 node.js中,下面這篇文章主要給大家介紹了關于vue2中使用axios及axios攔截器的配置的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-05-05
  • vue中實現(xiàn)千位分隔符的示例代碼

    vue中實現(xiàn)千位分隔符的示例代碼

    本文主要介紹了vue中實現(xiàn)千位分隔符的示例代碼,主要兩種方法,一種是某一個字段轉換,一種是表格table中的整列字段轉換,具有一定的參考價值,感興趣的可以了解一下
    2023-11-11
  • 使用vue封裝一個自定義樣式的滾動條

    使用vue封裝一個自定義樣式的滾動條

    眾所周知,當容器高度固定而內容部分高度超出容器高度時,瀏覽器會渲染出一個可以滾動并用于顯示剩余界面的條 -- 滾動條,它可以簡單的樣式修改,但是位置是固定的,無法移動,而我們需要改變位置的時候,它就不能滿足我們的需求了,這時我們可以自己手寫一個
    2023-10-10
  • vue監(jiān)聽滾動條頁面滾動動畫示例代碼

    vue監(jiān)聽滾動條頁面滾動動畫示例代碼

    Vue是一套用于構建用戶界面的漸進式框架,與其它大型框架不同的是,Vue?被設計為可以自底向上逐層應用,下面這篇文章主要給大家介紹了關于vue監(jiān)聽滾動條頁面滾動動畫的相關資料,需要的朋友可以參考下
    2023-06-06
  • vue3日歷控件的具體實現(xiàn)

    vue3日歷控件的具體實現(xiàn)

    日歷在很多地方都可以使用的到,本文主要介紹了vue3日歷控件的具體實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-02-02

最新評論