toke过期失效 ---提示并跳转到登录页面
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了toke过期失效 ---提示并跳转到登录页面相关的知识，希望对你有一定的参考价值。
参考技术A 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
以上是关于toke过期失效 ---提示并跳转到登录页面的主要内容，如果未能解决你的问题，请参考以下文章