国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

請求時token過期自動刷新token

MSchumi / 699人閱讀

摘要:當失效時,現在的網站一般會做兩種處理,一種是跳轉到登陸頁面讓用戶重新登陸獲取新的,另外一種就是當檢測到請求失效時,網站自動去請求新的,第二種方式在保持登陸狀態上面用得比較多。

1.在開發過程中,我們都會接觸到token,token的作用是什么呢?主要的作用就是為了安全,用戶登陸時,服務器會隨機生成一個有時效性的token,用戶的每一次請求都需要攜帶上token,證明其請求的合法性,服務器會驗證token,只有通過驗證才會返回請求結果。

2.當token失效時,現在的網站一般會做兩種處理,一種是跳轉到登陸頁面讓用戶重新登陸獲取新的token,另外一種就是當檢測到請求失效時,網站自動去請求新的token,第二種方式在app保持登陸狀態上面用得比較多。

3.下面進入主題,我們請求用的是axios,不管用何種請求方式,刷新token的原理都是一樣的。

//封裝了一個統一的請求函數,這個不是重點

export default function request(url, options) {
    const token = localStorage.getItem("token");
    const defaultOptions = {
        headers: {
            Authorization: `Bearer ${token}`,
        },
        withCredentials: true,
        url: url,
        baseURL: BASE_URL,
    };
    const newOptions = { ...options, ...defaultOptions };
    return axios.request(newOptions)
        .then(checkStatus)
        .catch(error => console.log(error));
}

// 封裝了一個檢測返回結果的函數,與后臺返回狀態碼code === 1002表示token失效

let isRefreshing = true;
function checkStatus(response) {
  if (response && response.code === 1002) {
    // 刷新token的函數,這需要添加一個開關,防止重復請求
    if(isRefreshing){
        refreshTokenRequst()
    }
    isRefreshing = false;
    // 這個Promise函數很關鍵
      const retryOriginalRequest = new Promise((resolve) => {
                addSubscriber(()=> {
                    resolve(request(url, options))
                })
            });
            return retryOriginalRequest;
  }else{
      return response;
  }
}

// 刷新token的請求函數

function refreshTokenRequst(){
    let data;
    const refreshToken = localStorage.getItem("refreshToken");
    data:{
        authorization: "YXBwYXBpczpaSWxhQUVJdsferTeweERmR1praHk=",
        refreshToken,
    }
    axios.request({
        baseURL: BASE_URL,
        url:"/app/renewal",
        method: "POST",
        data,
    }).then((response)=>{
        localStorage.setItem("refreshToken",response.data.refreshToken);
        localStorage.setItem("token",response.data.token);
        onAccessTokenFetched();
        isRefreshing = true;
    });
}

// Promise函數集合

let subscribers = [];
function onAccessTokenFetched() {
    subscribers.forEach((callback)=>{
        callback();
    })
    subscribers = [];
}

function addSubscriber(callback) {
    subscribers.push(callback)
}

總結:其實token失效,自動刷新token,在頁面只有一個請求的時候是比較好處理的,但是如果頁面同時有多個請求,并且都會產生token失效,這就需要一些稍微復雜的處理,解決方式主要是用了Promise 函數來進行處理。每一個token失效的請求都會存到一個Promise函數集合里面,當刷新token的函數執行完畢后,才會批量執行這些Promise函數,返回請求結果。還有一點要注意一下,這兒設置一個刷新token的開關isRefreshing,這個是非常有必要的,防止重復請求。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99089.html

相關文章

  • 請求token過期自動刷新token

    摘要:當失效時,現在的網站一般會做兩種處理,一種是跳轉到登陸頁面讓用戶重新登陸獲取新的,另外一種就是當檢測到請求失效時,網站自動去請求新的,第二種方式在保持登陸狀態上面用得比較多。 1.在開發過程中,我們都會接觸到token,token的作用是什么呢?主要的作用就是為了安全,用戶登陸時,服務器會隨機生成一個有時效性的token,用戶的每一次請求都需要攜帶上token,證明其請求的合法性,服務...

    X1nFLY 評論0 收藏0
  • 請求token過期自動刷新token

    摘要:當失效時,現在的網站一般會做兩種處理,一種是跳轉到登陸頁面讓用戶重新登陸獲取新的,另外一種就是當檢測到請求失效時,網站自動去請求新的,第二種方式在保持登陸狀態上面用得比較多。 1.在開發過程中,我們都會接觸到token,token的作用是什么呢?主要的作用就是為了安全,用戶登陸時,服務器會隨機生成一個有時效性的token,用戶的每一次請求都需要攜帶上token,證明其請求的合法性,服務...

    Vicky 評論0 收藏0
  • 前后端分離——token刷新策略

    摘要:實現目標延長過期時間活躍用戶在過期時,在用戶無感知的情況下動態刷新,做到一直在線狀態不活躍用戶在過期時,直接定向到登錄頁登錄返回字段如何簽發,請看上一篇推文,這里不做過多介紹。如果你有更好的做法,歡迎留言告知我,謝謝啦。 前言 記錄一下前后端分離下————token超時刷新策略! 需求場景 昨天發了一篇記錄 前后端分離應用——用戶信息傳遞 中介紹了token認證機制,跟幾位群友討論了...

    hatlonely 評論0 收藏0

發表評論

0條評論

MSchumi

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<