router.beforeEach(async (to, from, next) => {
let token = localStorage.getItem("token");
let name = store.state.user.userInfo.name;
if (token) { //1
if (to.path == '/login'|| to.path == '/register') {
next(false)
} else { //2
if (name) { //3
next()
} else { //4
try {
await store.dispatch("user/userInfo")
next()
} catch (error) { //5
//token失效
store.dispatch("user/logout");
next("/login")
}
}
}
} else { //6
next()
}
})
在路由全局前置守卫进行判断
页面刷新时进入导航守卫,登录状态(token)进入1,进入登录注册之外的其他页面进入2,刷新时仓库信息丢失,获取不到仓库中用户信息的name,进入4,在4中通知仓库获取用户信息(请求头携带token,后端返回用户信息),如果出错进入catch 5,说明本地存储的token过期,通知仓库进行用户退出,并跳转到登录页。