React如何使用refresh_token實現(xiàn)無感刷新頁面
步驟如下:
1-token過期根據(jù)refresh_token獲取新的token 重新獲取數(shù)據(jù)
2-創(chuàng)建一個新的axios實例 【使用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 實例對象 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實例對象 這樣做的目的就是 不會進(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) {
// 對請求錯誤做些什么
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) {
// 用戶認(rèn)證失敗 若傳遞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進(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實現(xiàn)無感刷新頁面的文章就介紹到這了,更多相關(guān)React refresh_token無感刷新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
forwardRef?中React父組件控制子組件的實現(xiàn)代碼
forwardRef 用于拿到父組件傳入的 ref 屬性,這樣在父組件便能通過 ref 控制子組件,這篇文章主要介紹了forwardRef?-?React父組件控制子組件的實現(xiàn)代碼,需要的朋友可以參考下2024-01-01
React實現(xiàn)多標(biāo)簽在有限空間內(nèi)展示
在業(yè)務(wù)中,需要在一個卡片組件中展示多個標(biāo)簽,標(biāo)簽組件高度相同,寬度和出現(xiàn)順序不同,要求標(biāo)簽只能在有限的空間內(nèi)展示,所以本文給大家介紹了React實現(xiàn)多標(biāo)簽在有限空間內(nèi)展示,需要的朋友可以參考下2023-12-12
可定制react18 input otp 一次性密碼輸入組件
這篇文章主要為大家介紹了可定制react18 input otp 一次性密碼輸入組件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10

