React如何使用refresh_token實(shí)現(xiàn)無感刷新頁面
步驟如下:
1-token過期根據(jù)refresh_token獲取新的token 重新獲取數(shù)據(jù)
2-創(chuàng)建一個(gè)新的axios實(shí)例 【使用request防止再次進(jìn)入請求攔截和請求響應(yīng)而進(jìn)入死循環(huán)】
3-根據(jù)請求相應(yīng)的響應(yīng)值 是不是401 是:說明token過期
然后進(jìn)行判斷store中的 user :{token:'*',refresh_token:'**'}中的 refresh_token和user對象是否存在 ,如果不存在說明之前沒有登錄過,直接去登錄
4-使用新創(chuàng)建的axios 實(shí)例對象 requestFreshToken 發(fā)送新的請求 headers中的口令攜帶的是 refresh_token
5-獲取token之后 將值重新賦值給user中的token
6-將user重新存入store中
7-重新獲取剛才因?yàn)閠oken失效而沒有獲取的數(shù)據(jù) 直接使用request 參數(shù) 來自error對象中【這里保存了之前token失效的請求數(shù)據(jù)】
具體實(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({
// 所有相應(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)建一個(gè)新的axios實(shí)例對象 這樣做的目的就是 不會進(jìn)入之前的請求攔截和響應(yīng) 防止進(jìn)入死循環(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) {
// 對請求錯(cuò)誤做些什么
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)錯(cuò)誤做點(diǎn)什么
// 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
const status = error.response.status;
if (status == 400) {
// 請求參數(shù)錯(cuò)誤
Toast.file("請求參數(shù)錯(cuò)誤");
} else if (status == 401) {
// 用戶認(rèn)證失敗 若傳遞token,但token過期,則返回401
/*
token過期 根據(jù)refresh-token獲取新的token
1-發(fā)送請求 獲取新的token
2-根據(jù)新的token重新發(fā)送請求 實(shí)現(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進(jìn)行賦值
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("用戶認(rèn)證失敗");
} 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實(shí)現(xiàn)無感刷新頁面的文章就介紹到這了,更多相關(guān)React refresh_token無感刷新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
react 權(quán)限樹形結(jié)構(gòu)實(shí)現(xiàn)代碼
這篇文章主要介紹了react 權(quán)限樹形結(jié)構(gòu)實(shí)現(xiàn)代碼,項(xiàng)目背景react + ant design,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-05-05
React中使用ResizeObserver來觀察元素size變化的方法
在 React 中使用 ResizeObserver 來觀察元素的大小變化,可以通過創(chuàng)建一個(gè)自定義 Hook 來封裝 ResizeObserver 的邏輯,并在組件中使用這個(gè) Hook,以下是一個(gè)完整的示例,展示了如何在 React 中使用 ResizeObserver 來觀察元素的大小變化,需要的朋友可以參考下2024-12-12
基于webpack4搭建的react項(xiàng)目框架的方法
本篇文章主要介紹了基于webpack4搭建的react項(xiàng)目框架的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
React事件處理過程中傳參的實(shí)現(xiàn)方法
這篇文章主要介紹了React事件處理過程中傳參的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
React實(shí)現(xiàn)阿里云OSS上傳文件的示例
這篇文章主要介紹了React實(shí)現(xiàn)阿里云OSS上傳文件的示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
基于React-Dropzone開發(fā)上傳組件功能(實(shí)例演示)
這篇文章主要介紹了基于React-Dropzone開發(fā)上傳組件,主要講述的是在React-Flask框架上開發(fā)上傳組件的技巧,需要的朋友可以參考下2021-08-08

