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

這篇文章主要介紹了React怎么使用refresh_token實現(xiàn)無感刷新頁面的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇React怎么使用refresh_token實現(xiàn)無感刷新頁面文章都會有所收獲，下面我們一起來看看吧。

步驟如下：

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

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

3-根據(jù)請求相應(yīng)的響應(yīng)值 是不是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ù)據(jù) 直接使用request 參數(shù) 來自error對象中【這里保存了之前token失效的請求數(shù)據(jù)】

具體實現(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({
  //  所有相應(yīng)的數(shù)據(jù)就不會存在大數(shù)字問題了
  transformResponse: [
    function(data) {
      try {
        // 如果轉(zhuǎn)換成功則返回轉(zhuǎn)換的數(shù)據(jù)結(jié)果
        return jsonBig.parse(data);
      } catch (err) {
        // 如果轉(zhuǎn)換失敗，則包裝為統(tǒng)一數(shù)據(jù)格式并返回
        return {
          data
        };
      }
    }
  ]

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

//  創(chuàng)建一個新的axios實例對象  這樣做的目的就是 不會進入之前的請求攔截和響應(yīng) 防止進入死循環(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);
  }
);

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

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

      /* 
				token過期 根據(jù)refresh-token獲取新的token  
				1-發(fā)送請求 獲取新的token
				2-根據(jù)新的token重新發(fā)送請求 實現(xiàn)無感刷新
			
			 */
      const { user } = store.state;
      if (!user || !user.refresh_token) {
        // 完全沒有登陸過  無token
        return router.push("/login");
      }
      // 有token 但是 token過期
      try {
        //  根據(jù) 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) {
      // 客戶端沒有權(quán)限
      Toast.file("客戶端沒有權(quán)限");
    } else if (status == 405) {
      //  請求方法不支持
      Toast.file("請求方法不支持");
    }
    return Promise.reject(error);
  }
);

export default request;

關(guān)于“React怎么使用refresh_token實現(xiàn)無感刷新頁面”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“React怎么使用refresh_token實現(xiàn)無感刷新頁面”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。