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

React如何使用refresh_token實現(xiàn)無感刷新頁面

 更新時間:2022年04月26日 14:34:25   作者:大帥子  
本文主要介紹了React如何使用refresh_token實現(xiàn)無感刷新頁面,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

步驟如下:

1-token過期根據refresh_token獲取新的token 重新獲取數(shù)據

2-創(chuàng)建一個新的axios實例 【使用request防止再次進入請求攔截和請求響應而進入死循環(huán)】

3-根據請求相應的響應值 是不是401 是:說明token過期

然后進行判斷store中的 user :{token:'*',refresh_token:'**'}中的 refresh_token和user對象是否存在 ,如果不存在說明之前沒有登錄過,直接去登錄

4-使用新創(chuàng)建的axios 實例對象 requestFreshToken 發(fā)送新的請求 headers中的口令攜帶的是 refresh_token

5-獲取token之后 將值重新賦值給user中的token

6-將user重新存入store中

7-重新獲取剛才因為token失效而沒有獲取的數(shù)據 直接使用request 參數(shù) 來自error對象中【這里保存了之前token失效的請求數(shù)據】

具體實現(xiàn)

代碼如下:

import axios from "axios";

import store from "@/store";
import router from "@/router";

import jsonBig from "json-bigint";

import { Toast } from "vant";

// var json = '{ "value" : 9223372036854775807, "v2": 123 }'
// // console.log(JSON.parse(json),777888);
// console.log(jsonBig.parse(json).value.toString(),88888);

const request = axios.create({
  //  所有相應的數(shù)據就不會存在大數(shù)字問題了
  transformResponse: [
    function(data) {
      try {
        // 如果轉換成功則返回轉換的數(shù)據結果
        return jsonBig.parse(data);
      } catch (err) {
        // 如果轉換失敗,則包裝為統(tǒng)一數(shù)據格式并返回
        return {
          data
        };
      }
    }
  ]

  //baseURL: "http://toutiao-app.itheima.net"
});

//  創(chuàng)建一個新的axios實例對象  這樣做的目的就是 不會進入之前的請求攔截和響應 防止進入死循環(huán)
const requestFreshToken = axios.create();

// 添加請求攔截器
request.interceptors.request.use(
  function(config) {
    // 在發(fā)送請求之前做些什么
    //console.log(config, 9999);
    // if (window.localStorage.getItem('SET_TOKEN')) {
    //     config.headers.Authorization = 'Bearer ' + JSON.parse(window.localStorage.getItem('SET_TOKEN')).token
    // }

    if (store.state.user) {
      config.headers.Authorization = "Bearer " + store.state.user.token;
    }
    return config;
  },
  function(error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  }
);

// 添加響應攔截器
request.interceptors.response.use(
  function(response) {
    console.log(response, 3);

    return response;
  },
  async function(error) {
    console.log(error.response, 222);
    // 對響應錯誤做點什么
    // 對響應數(shù)據做點什么
    const status = error.response.status;
    if (status == 400) {
      //  請求參數(shù)錯誤
      Toast.file("請求參數(shù)錯誤");
    } else if (status == 401) {
      // 用戶認證失敗  若傳遞token,但token過期,則返回401

      /* 
				token過期 根據refresh-token獲取新的token  
				1-發(fā)送請求 獲取新的token
				2-根據新的token重新發(fā)送請求 實現(xiàn)無感刷新
			
			 */
      const { user } = store.state;
      if (!user || !user.refresh_token) {
        // 完全沒有登陸過  無token
        return router.push("/login");
      }
      // 有token 但是 token過期
      try {
        //  根據 refresh_token  獲取新的token
        const { data } = await requestFreshToken({
          method: "PUT",
          url: "/v1_0/authorizations",
          headers: {
            Authorization: "Bearer " + user.refresh_token
          }
        });
        // 重新對user中token進行賦值
        user.token = data.data.token;
        // 將新的user對象重新存到store中
        store.commit("setUser", user);
        //  這里重新發(fā)送請求后  使用的是request  又會走上面的請求攔截  又會重新攜帶剛剛存的新的token
        return request(error.response.config);
      } catch (error) {}
      //  捕獲異常就直接重新登陸
      return router.push("/login");

      Toast.file("用戶認證失敗");
    } else if (status == 403) {
      // 客戶端沒有權限
      Toast.file("客戶端沒有權限");
    } else if (status == 405) {
      //  請求方法不支持
      Toast.file("請求方法不支持");
    }
    return Promise.reject(error);
  }
);

export default request;

到此這篇關于React如何使用refresh_token實現(xiàn)無感刷新頁面的文章就介紹到這了,更多相關React refresh_token無感刷新內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 簡單分析React中的EffectList

    簡單分析React中的EffectList

    這篇文章主要簡單分析了React中的EffectList,幫助大家更好的理解和學習使用React進行前端開發(fā),感興趣的朋友可以了解下
    2021-04-04
  • 詳解React?hooks組件通信方法

    詳解React?hooks組件通信方法

    這篇文章主要介紹了React?hooks組件通信,在開發(fā)中組件通信是React中的一個重要的知識點,本文通過實例代碼給大家講解react hooks中常用的父子、跨組件通信的方法,需要的朋友可以參考下
    2022-07-07
  • React Hooks之useRef獲取元素示例詳解

    React Hooks之useRef獲取元素示例詳解

    這篇文章主要介紹了React Hooks之useRef獲取元素示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07
  • forwardRef?中React父組件控制子組件的實現(xiàn)代碼

    forwardRef?中React父組件控制子組件的實現(xiàn)代碼

    forwardRef 用于拿到父組件傳入的 ref 屬性,這樣在父組件便能通過 ref 控制子組件,這篇文章主要介紹了forwardRef?-?React父組件控制子組件的實現(xiàn)代碼,需要的朋友可以參考下
    2024-01-01
  • React實現(xiàn)多標簽在有限空間內展示

    React實現(xiàn)多標簽在有限空間內展示

    在業(yè)務中,需要在一個卡片組件中展示多個標簽,標簽組件高度相同,寬度和出現(xiàn)順序不同,要求標簽只能在有限的空間內展示,所以本文給大家介紹了React實現(xiàn)多標簽在有限空間內展示,需要的朋友可以參考下
    2023-12-12
  • 可定制react18 input otp 一次性密碼輸入組件

    可定制react18 input otp 一次性密碼輸入組件

    這篇文章主要為大家介紹了可定制react18 input otp 一次性密碼輸入組件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • React中useState值為對象時改變值不渲染問題

    React中useState值為對象時改變值不渲染問題

    這篇文章主要介紹了React中useState值為對象時改變值不渲染問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-02-02
  • antd form表單如何處理自定義組件

    antd form表單如何處理自定義組件

    這篇文章主要介紹了antd form表單如何處理自定義組件問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • React.js?Gird?布局編寫鍵盤組件

    React.js?Gird?布局編寫鍵盤組件

    這篇文章主要介紹了React.js?Gird?布局編寫鍵盤組件,Grid?布局則是將容器劃分成"行"和"列",產生單元格,然后指定"項目所在"的單元格,可以看作是二維布局
    2022-09-09
  • react-pdf?打造在線簡歷生成器的示例代碼

    react-pdf?打造在線簡歷生成器的示例代碼

    本文主要介紹了react-pdf?打造在線簡歷生成器的示例代碼,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-02

最新評論