前后端分离，vue中以token来判断是否登录，但是token过期如何判断呢？我们可以通过挂载路由导航守卫和响应拦截器来判断
在main.js加入如下代码
/* 响应拦截器 */
axios.interceptors.response.use(function (response) { // ①10010 token过期（30天） ②10011 token无效
if (response.data.code === 1003) {
window.sessionStorage.removeItem('token');
router.replace({
path: '/login' // 到登录页重新获取token
})
}else if (response.data.token) { // 判断token是否存在，如果存在说明需要更新token
window.sessionStorage.setItem("token",response.data.token); // 覆盖原来的token(默认一天刷新一次)
}
return response
}, function (error) {
return this.$message.error(error)
})然后在路由文件挂载路由守卫
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: 'Login'
},
{
path: '/login',
component: Login
},
{
path: '/home',
component: Home,
}
]
const router = new VueRouter({
routes
})