一 router.beforeEach简介
常见用法
使用 router.beforeEach 注册一个全局前置守卫:
const router = createRouter({ ... })
router.beforeEach((to, from) => {
// ...
// 返回 false 以取消导航
return false
})
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中。
每个守卫方法接收两个参数:
to: 即将要进入的目标 用一种标准化的方式
from: 当前导航正要离开的路由 用一种标准化的方式
可选的第三个参数
在之前的 Vue Router 版本中,也是可以使用 第三个参数 next 的。这是一个常见的错误来源,可以通过 RFC 来消除错误。然而,它仍然是被支持的,这意味着你可以向任何导航守卫传递第三个参数。在这种情况下,确保 next 在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错。这里有一个在用户未能验证身份时重定向到/login的错误用例:
router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
// 如果用户未能验证身份,则 `next` 会被调用两次
next()
})
二 完整的导航解析流程
1.导航被触发。
2.在失活的组件里调用 beforeRouteLeave 守卫。
3.调用全局的 beforeEach 守卫。
4.在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
5.在路由配置里调用 beforeEnter。
6.解析异步路由组件。
7.在被激活的组件里调用 beforeRouteEnter。
8.调用全局的 beforeResolve 守卫(2.5+)。
9.导航被确认。
10.调用全局的 afterEach 钩子。
11.触发 DOM 更新。
12.调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入
三 避坑点
守卫是异步解析执行
需求是在用户退出的时候,删除存储在浏览器localstorage内的token和userinfo
const logout = () => {
get('/api/auth/logout', //发起axios请求
(message) => {
ElMessage.success(message)
Local.remove('token')//删除token
router.push("/")//路由跳转
Local.remove('userinfo')//删除userinfo
})
}
router.beforeEach((to,from,next) =>{
const store = useStore()//store内存储用户详细信息
//但是由于每次刷新页面store内的值也被清空,所以将用户信息存储在localstorage内
//每次刷新或跳转页面就从localstorage内获得用户信息
store.auth.user = Local.getObject('userinfo')
const token = window.localStorage.getItem('token')//获取token
if(to.matched.length === 0){//一些简单的登录校验拦截
next('/')
} else if(token != null && token != '' && to.name.startsWith('welcome-')){
next('/index')
} else if((token == null || token == '') && !to.name.startsWith('welcome-') ){
next('/')
} else {
next()
}
})
但是这样写会报错
大致意思是我在退出登录之前的页面没有store.auth.user.username的值了,然后就报错
<span class="nick-name">{{store.auth.user.username}}</span>
这是因为守卫是异步解析执行,我在退出的时候执行了
router.push("/")//路由跳转
Local.remove('userinfo')//删除userinfo
这个时候就会跳转到router.beforeEach函数更新了store.auth.user的值为null
但是这个时候页面还没有跳转,需要执行到next()才会放行
这个时候的页面其实还是我退出登录之前的页面,所以会报找不到username的错
解决方案
第一步
退出登录时不要删除localstorage中的userinfo
第二步
在router.beforeEach加上一个判断
const store = useStore()
store.auth.user = Local.getObject('userinfo')
//这个时候userinfo还没有删除,页面也还没有跳转,可以正常获取userinfo信息
const token = window.localStorage.getItem('token')
//因为token在退出登录的时候已经被删除了,store.auth.user的值也正常更新了
//所以这个时候可以放心大胆的删除userinfo了
if(token == null || token == '')Local.remove('userinfo')