React怎么使用refresh_token實現無感刷新頁面

蝸牛 互聯網技術資訊 2022-04-27 134 0

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

步驟如下:

1-token過期根據refresh_token獲取新的token 重新獲取數據

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

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

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

4-使用新創建的axios 實例對象 requestFreshToken 發送新的請求 headers中的口令攜帶的是 refresh_token

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

6-將user重新存入store中

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

具體實現

代碼如下:

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({
??//??所有相應的數據就不會存在大數字問題了
??transformResponse:?[
????function(data)?{
??????try?{
????????//?如果轉換成功則返回轉換的數據結果
????????return?jsonBig.parse(data);
??????}?catch?(err)?{
????????//?如果轉換失敗,則包裝為統一數據格式并返回
????????return?{
??????????data
????????};
??????}
????}
??]

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

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

//?添加請求攔截器
request.interceptors.request.use(
??function(config)?{
????//?在發送請求之前做些什么
????//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);
????//?對響應錯誤做點什么
????//?對響應數據做點什么
????const?status?=?error.response.status;
????if?(status?==?400)?{
??????//??請求參數錯誤
??????Toast.file("請求參數錯誤");
????}?else?if?(status?==?401)?{
??????//?用戶認證失敗??若傳遞token,但token過期,則返回401

??????/*?
				token過期?根據refresh-token獲取新的token??
				1-發送請求?獲取新的token
				2-根據新的token重新發送請求?實現無感刷新
			
			?*/
??????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);
????????//??這里重新發送請求后??使用的是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實現無感刷新頁面”這篇文章的內容就介紹到這里,感謝各位的閱讀!相信大家對“React怎么使用refresh_token實現無感刷新頁面”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注蝸牛博客行業資訊頻道。

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看