Vue 导航解析流程 router.beforeEach使用避坑

一 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')