網站首頁 編程語言 正文
步驟如下:
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;
原文鏈接:https://juejin.cn/post/7085376985655935012
相關推薦
- 2022-05-22 redis數據結構之壓縮列表_Redis
- 2022-11-22 CentOS?7.9?安裝?docker20.10.12的過程解析_docker
- 2023-03-16 Python庫functools示例詳解_python
- 2022-12-01 Git基礎學習之分支操作的示例詳解_相關技巧
- 2022-09-15 docker倉庫登錄及配置insecure-registries的方法_docker
- 2022-03-21 C++二維數組螺旋加密信息_C 語言
- 2022-04-17 C語言?動態內存管理全面解析_C 語言
- 2022-04-08 Python實現自定義異常實例_python
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支