Vue3中的Token失效攔截處理方式
更新時間:2024年08月30日 14:45:01 作者:velpro_!
這篇文章主要介紹了Vue3中的Token失效攔截處理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue3 Token失效攔截處理
Token的有效性可以保持一段時間,如果用戶一段時間不做任何操作,Token就會失效,使用失效的Token再去請求一些接口,接口就會報錯,所以需要我們做一些處理
1. 在響應攔截器里面攔截這個錯誤
2. 攔截到后需要做的事:
- 1)應清除掉過期的用戶信息
- 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 // 超時器
})
//攔截器
httpInstance.interceptors.request.use(config => {
return config
}, e => Promise.reject(e))
//響應器
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 響應攔截 token失效導致出現(xiàn)多個提示框的
// 響應攔截器
let isToken=false
request.interceptors.response.use((res)=>{
// 沒錯誤返回200 錯誤·攔截
if (res.data.code ===200) {
return res;
}else if (res.data.code === 404){
router.push('/login')
}else if(res.data.code === 10020){
// 防止失效導致出現(xiàn)多個提示框的解決辦法
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);
}
}
},)
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue3+elementui-plus實現(xiàn)無限遞歸菜單示例代碼
這篇文章主要介紹了vue3+elementui-plus實現(xiàn)無限遞歸菜單,當一個組件的 key 值發(fā)生變化時,Vue 會認為這是一個新的組件實例,會強制重新創(chuàng)建和渲染這個組件,本文通過示例代碼詳細講解,需要的朋友可以參考下2024-04-04
基于vue-cli、elementUI的Vue超簡單入門小例子(推薦)
這篇文章主要介紹了基于vue-cli、elementUI的Vue超簡單入門小例子,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
vue3+js+elementPlus使用富文本編輯器@vueup/vue-quill詳細教程
富文本編輯器在任何項目中都會用到,下面這篇文章主要給大家介紹了關于vue3+js+elementPlus使用富文本編輯器@vueup/vue-quill的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07

