vue實(shí)現(xiàn)token過期自動(dòng)跳轉(zhuǎn)到登錄頁(yè)面
這幾天項(xiàng)目提測(cè),測(cè)試給我提了個(gè)bug,說token過期,路由應(yīng)該自動(dòng)跳轉(zhuǎn)到登陸頁(yè)面,讓用戶重新登錄。先說下一些前置條件,
1:我公司的token時(shí)效在生產(chǎn)環(huán)境設(shè)置為一個(gè)小時(shí),當(dāng)token過期,所有接口都直接返回
2:每次路由跳轉(zhuǎn)都會(huì)對(duì)token進(jìn)行判斷,設(shè)置了一個(gè)全局的beforeEach鉤子函數(shù),如果token存在就跳到你所需要的頁(yè)面,否則
就直接跳轉(zhuǎn)到登錄頁(yè)面,讓用戶登錄重新存取token
接口返回的信息
{
code:10009,
msg:'token過期',
data:null
}
全局的路由鉤子函數(shù)
router.beforeEach(async(to, from, next) => {
//獲取token
// determine whether the user has logged in
const hasToken = getToken()
if (hasToken) {
//token存在,如果當(dāng)前跳轉(zhuǎn)的路由是登錄界面
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({ path: '/' })
NProgress.done()
} else {
//在這里,就拉去用戶權(quán)限,判斷用戶是否有權(quán)限訪問這個(gè)路由
} catch (error) {
// remove token and go to login page to re-login
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
} else {
//token不存在
if (whiteList.indexOf(to.path) !== -1) {
//如果要跳轉(zhuǎn)的路由在白名單里,則跳轉(zhuǎn)過去
next()
} else {
//否則跳轉(zhuǎn)到登錄頁(yè)面
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
所以我直接在對(duì)所有的請(qǐng)求進(jìn)行攔截,當(dāng)響應(yīng)的數(shù)據(jù)返回的code是10009,就直接清空用戶信息,重新加載頁(yè)面。我對(duì)代碼簡(jiǎn)化了下,因?yàn)橛脩粼诘卿洉r(shí)就會(huì)把token,name以及權(quán)限信息存在store/user.js文件里,所以只要token過期,把user文件的信息清空。這樣,在token過期后,刷新頁(yè)面或者跳轉(zhuǎn)組件時(shí),都會(huì)調(diào)用全局的beforeEach判斷,當(dāng)token信息不存在就會(huì)直接跳轉(zhuǎn)到登錄頁(yè)面
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
//發(fā)送請(qǐng)求時(shí)把token攜帶過去
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['sg-token'] = getToken()
}
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
service.interceptors.response.use(
response => {
console.log(response.data)
const res = response.data
// token過期,重返登錄界面
if (res.code === 10009) {
store.dispatch('user/logout').then(() => {
location.reload(true)
})
}
return res
},
error => {
console.log('err' + error) // for debug
Message({
message: error.msg,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
好啦,關(guān)于token的分享就到這里了,以上代碼根據(jù)你們項(xiàng)目的情況換成你們的數(shù)據(jù)
到此這篇關(guān)于vue實(shí)現(xiàn)token過期自動(dòng)跳轉(zhuǎn)到登錄頁(yè)面的文章就介紹到這了,更多相關(guān)vue token過期自動(dòng)跳轉(zhuǎn) 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue項(xiàng)目History模式404問題解決方法
本文主要解決Vue項(xiàng)目使用History模式發(fā)布到服務(wù)器Nginx上刷新頁(yè)面404問題。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-10-10
vue3如何使用postcss-px-to-viewport適配屏幕
這篇文章主要介紹了vue3如何使用postcss-px-to-viewport適配屏幕問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03
vue實(shí)現(xiàn)token登錄驗(yàn)證的完整實(shí)例
最近公司新啟動(dòng)了個(gè)項(xiàng)目,用的是vue框架在做,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)token登錄驗(yàn)證的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題
這篇文章主要介紹了關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
vue項(xiàng)目中跳轉(zhuǎn)到外部鏈接的實(shí)例講解
今天小編就為大家分享一篇vue項(xiàng)目中跳轉(zhuǎn)到外部鏈接的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09
vue如何解決sass-loader的版本過高導(dǎo)致的編譯錯(cuò)誤
這篇文章主要介紹了vue如何解決sass-loader的版本過高導(dǎo)致的編譯錯(cuò)誤問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue靜態(tài)配置文件不進(jìn)行編譯的處理過程(在public中引入js)
這篇文章主要介紹了vue靜態(tài)配置文件不進(jìn)行編譯的處理過程(在public中引入js),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03
超詳細(xì)動(dòng)手搭建一個(gè)VuePress 站點(diǎn)及開啟PWA與自動(dòng)部署的方法
這篇文章主要介紹了超詳細(xì)動(dòng)手搭建一個(gè)VuePress 站點(diǎn)及開啟PWA與自動(dòng)部署的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-01-01

