Vue3中的Token失效攔截處理方式
更新時間:2024年08月30日 14:45:01 作者:velpro_!
這篇文章主要介紹了Vue3中的Token失效攔截處理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue3 Token失效攔截處理
Token的有效性可以保持一段時間,如果用戶一段時間不做任何操作,Token就會失效,使用失效的Token再去請求一些接口,接口就會報錯,所以需要我們做一些處理
1. 在響應(yīng)攔截器里面攔截這個錯誤
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 // 超時器 }) //攔截器 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 httpInstance
Vue axios 響應(yīng)攔截 token失效導(dǎo)致出現(xiàn)多個提示框的
// 響應(yīng)攔截器 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){ // 防止失效導(dǎo)致出現(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); } } },)
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue實戰(zhàn)指南之依賴注入(provide/inject)
這篇文章主要介紹了詳解Vue實戰(zhàn)指南之依賴注入(provide/inject),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11vue中關(guān)于element的el-image 圖片預(yù)覽功能增加一個下載按鈕(操作方法)
這篇文章主要介紹了vue中關(guān)于element的el-image 圖片預(yù)覽功能增加一個下載按鈕,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04element-plus中el-table點擊單行修改背景色方法
這篇文章主要給大家介紹了關(guān)于element-plus中el-table點擊單行修改背景色的相關(guān)資料,這是產(chǎn)品新加了的一個需求,分享給同樣遇到這個需求的朋友,需要的朋友可以參考下2023-07-07