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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
forwardRef?中React父組件控制子組件的實現(xiàn)代碼
forwardRef 用于拿到父組件傳入的 ref 屬性,這樣在父組件便能通過 ref 控制子組件,這篇文章主要介紹了forwardRef?-?React父組件控制子組件的實現(xiàn)代碼,需要的朋友可以參考下2024-01-01可定制react18 input otp 一次性密碼輸入組件
這篇文章主要為大家介紹了可定制react18 input otp 一次性密碼輸入組件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10