|
我们在做项尤其是后台项目。都会涉及到登录。我们一般是用token来设置项目的登录状态。token的有效时长，根据自身的项目需求来设定，而当token过期之后，我们就需要使得整个项目页面自动跳转到登录页面，去让用户重新登录。
例如： 我公司的token时效在生产环境设置为一个小时，当token过期，所有接口都直接返回；每次路由跳转都会对token进行判断，设置了一个全局的beforeEach钩子函数，如果token存在就跳到你所需要的页面，否则就直接跳转到登录页面，让用户登录重新存取token：
接口返回的信息
{
code:10009,
msg:'token过期',
data:null
}
全局的路由钩子函数
router.beforeEach(async(to, from, next) => {
//获取token
// determine whether the user has logged in
const hasToken = getToken()
if (hasToken) {
//token存在，如果当前跳转的路由是登录界面
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({ path: '/' })
NProgress.done()
} 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}`)
NProgress.done()
}
} else {
//token不存在
if (whiteList.indexOf(to.path) !== -1) {
//如果要跳转的路由在白名单里，则跳转过去
next()
} else {
//否则跳转到登录页面
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
所以我直接在对所有的请求进行拦截，当响应的数据返回的code是10009，就直接清空用户信息，重新加载页面。我对代码简化了下，因为用户在登录时就会把token，name以及权限信息存在store/user.js文件里，所以只要token过期，把user文件的信息清空。这样，在token过期后，刷新页面或者跳转组件时，都会调用全局的beforeEach判断，当token信息不存在就会直接跳转到登录页面
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 === 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
|