token过期自动跳转到登录页面
设置token有效期为2小时，超过两小时 token失效 ，接口返回结果：{code:0,msg:'token过期',}
每次路由跳转都会对token进行判断，设置一个全局的beforeEach钩子函数，如果token存在就跳到你所需要的页面，否则直接跳转到登录页面，让用户重新存取token
全局路由钩子：router.beforeEach
router.beforeEach(async (to, from, next) => {
//获取token
const hasToken = getToken()
if (hasToken) {
//token存在，如果当前跳转的路由是登录界面
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({
path: '/'
})
} else {
//在这里，就拉去用户权限，判断用户是否有权限访问这个路由
} 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}`)
}
} else {
//token不存在
if (whiteList.indexOf(to.path) !== -1) {
//如果要跳转的路由在白名单里，则跳转过去
next()
} else {
//否则跳转到登录页面
next(`/login?redirect=${to.path}`)
}
}
})
请求拦截 设置
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
})
//发送请求时把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 === 0) {
store.dispatch('user/logout').then(() => {
location.reload(true)
})
}
return res
},
error => {
Message({
message: error.msg,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service