vue實(shí)現(xiàn)token過期自動(dòng)跳轉(zhuǎn)到登錄頁面
這幾天項(xiàng)目提測,測試給我提了個(gè)bug,說token過期,路由應(yīng)該自動(dòng)跳轉(zhuǎn)到登陸頁面,讓用戶重新登錄。先說下一些前置條件,
1:我公司的token時(shí)效在生產(chǎn)環(huán)境設(shè)置為一個(gè)小時(shí),當(dāng)token過期,所有接口都直接返回
2:每次路由跳轉(zhuǎn)都會(huì)對token進(jìn)行判斷,設(shè)置了一個(gè)全局的beforeEach鉤子函數(shù),如果token存在就跳到你所需要的頁面,否則
就直接跳轉(zhuǎn)到登錄頁面,讓用戶登錄重新存取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)到登錄頁面
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
所以我直接在對所有的請求進(jìn)行攔截,當(dāng)響應(yīng)的數(shù)據(jù)返回的code是10009,就直接清空用戶信息,重新加載頁面。我對代碼簡化了下,因?yàn)橛脩粼诘卿洉r(shí)就會(huì)把token,name以及權(quán)限信息存在store/user.js文件里,所以只要token過期,把user文件的信息清空。這樣,在token過期后,刷新頁面或者跳轉(zhuǎn)組件時(shí),都會(huì)調(diào)用全局的beforeEach判斷,當(dāng)token信息不存在就會(huì)直接跳轉(zhuǎn)到登錄頁面
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ā)送請求時(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)到登錄頁面的文章就介紹到這了,更多相關(guān)vue token過期自動(dòng)跳轉(zhuǎn) 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue.js獲取被選擇的option的value和text值方法
今天小編就為大家分享一篇Vue.js獲取被選擇的option的value和text值方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue實(shí)現(xiàn)手機(jī)號碼抽獎(jiǎng)上下滾動(dòng)動(dòng)畫示例
本篇文章主要介紹了vue實(shí)現(xiàn)手機(jī)號碼抽獎(jiǎng)上下滾動(dòng)動(dòng)畫示例。具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10
vue項(xiàng)目中請求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決
這篇文章主要介紹了vue項(xiàng)目中請求數(shù)據(jù)特別多導(dǎo)致頁面卡死的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
el-date-picker默認(rèn)結(jié)束為當(dāng)前時(shí)分秒的操作方法
在element?ui中的日期時(shí)間選擇組件中默認(rèn)是00:00,現(xiàn)在需求是點(diǎn)擊默認(rèn)結(jié)束時(shí)間為當(dāng)前時(shí)分秒,查了很多資料寫的都不準(zhǔn)確?,今天給大家分享el-date-picker默認(rèn)結(jié)束為當(dāng)前時(shí)分秒的操作方法,感興趣的朋友一起看看吧2024-01-01
vue?cli2?和?cli3去掉eslint檢查器報(bào)錯(cuò)的解決
這篇文章主要介紹了vue?cli2?和?cli3去掉eslint檢查器報(bào)錯(cuò)的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
Vue-cli項(xiàng)目部署到Nginx服務(wù)器的方法
這篇文章主要介紹了Vue-cli項(xiàng)目部署到Nginx服務(wù)器的方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11

