Vue3中的Token失效攔截處理方式
Vue3 Token失效攔截處理
Token的有效性可以保持一段時(shí)間,如果用戶一段時(shí)間不做任何操作,Token就會(huì)失效,使用失效的Token再去請(qǐng)求一些接口,接口就會(huì)報(bào)錯(cuò),所以需要我們做一些處理
1. 在響應(yīng)攔截器里面攔截這個(gè)錯(cuò)誤
2. 攔截到后需要做的事:
- 1)應(yīng)清除掉過期的用戶信息
- 2) 跳轉(zhuǎn)到登錄頁
// utils/http.js
import axios from "axios";
import {useUserStore} from "@/stores/user";
import router from '@/router'
const httpInstance = axios.create({
baseURL: 'url', // 基地址
timeout: 5000 // 超時(shí)器
})
//攔截器
httpInstance.interceptors.request.use(config => {
return config
}, e => Promise.reject(e))
//響應(yīng)器
httpInstance.interceptors.response.use(res => res.data, e => {
const userStore = useUserStore() //pinia管理的用戶數(shù)據(jù)
// 401 token失效處理
// 1. 清除本地用戶數(shù)據(jù)
// 2.跳轉(zhuǎn)到登錄頁
if (e.response.status === 401) {
userStore.clearUserInfo()
// userStore.userInfo = {}
router.push('/login')
}
return Promise.reject(e)
})
export default httpInstanceVue axios 響應(yīng)攔截 token失效導(dǎo)致出現(xiàn)多個(gè)提示框的
// 響應(yīng)攔截器
let isToken=false
request.interceptors.response.use((res)=>{
// 沒錯(cuò)誤返回200 錯(cuò)誤·攔截
if (res.data.code ===200) {
return res;
}else if (res.data.code === 404){
router.push('/login')
}else if(res.data.code === 10020){
// 防止失效導(dǎo)致出現(xiàn)多個(gè)提示框的解決辦法
if(!isToken){
isToken=true
window.localStorage.removeItem('user')
router.push('/login')
setTimeout(()=>{
isToken=false
},2000)
return Message.warning(res.data.message)&&Promise.reject(res.data.message);
}
}
},)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue實(shí)戰(zhàn)指南之依賴注入(provide/inject)
這篇文章主要介紹了詳解Vue實(shí)戰(zhàn)指南之依賴注入(provide/inject),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
vue中關(guān)于element的el-image 圖片預(yù)覽功能增加一個(gè)下載按鈕(操作方法)
這篇文章主要介紹了vue中關(guān)于element的el-image 圖片預(yù)覽功能增加一個(gè)下載按鈕,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
element-plus中el-table點(diǎn)擊單行修改背景色方法
這篇文章主要給大家介紹了關(guān)于element-plus中el-table點(diǎn)擊單行修改背景色的相關(guān)資料,這是產(chǎn)品新加了的一個(gè)需求,分享給同樣遇到這個(gè)需求的朋友,需要的朋友可以參考下2023-07-07
在vue中實(shí)現(xiàn)禁止屏幕滾動(dòng),禁止屏幕滑動(dòng)
這篇文章主要介紹了在vue中實(shí)現(xiàn)禁止屏幕滾動(dòng),禁止屏幕滑動(dòng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue.set與this.$set的用法與使用場(chǎng)景介紹
Vue.set()和this.$set()這兩個(gè)api的實(shí)現(xiàn)原理基本一模一樣,都是使用了set函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue.set與this.$set的用法與使用場(chǎng)景,需要的朋友可以參考下2022-03-03
vue項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04

