路由守卫&导航解析流程

完整的导航解析流程

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 的回调函数，创建好的组件实例会作为回调函数的参数传入。

1. 如果访问的是 首页， 无token， 拦走

2. 如果访问的是 列表页，无token， 拦走

3. 如果访问的是 详情页，无token， 拦走

....

分析：哪些页面，是不需要登录，就可以访问的！ => 注册 和 登录 （白名单 - 游客可以随意访问的）

核心逻辑：

1. 判断用户有没有token， 有token， 直接放行 （有身份的人，想去哪就去哪~）

2. 没有token（游客），如果是白名单中的页面，直接放行

3. 否则，无token（游客），且在访问需要权限访问的页面，直接拦截到登录

刚开始接触路由导航守卫你会发现和axios拦截器有点像，实际上它们是两个不同的东西。

1.相同点

(1)都是钩子函数(回调函数的一种,到某个时机了自动触发)

(2)都是起到拦截作用

2.不同点

(1)功能不同 : axios拦截器拦截网络请求, 导航守卫拦截路由跳转

(2)应用场景不同 :

axios拦截器一般用于发送token

导航守卫用于页面跳转权限管理(有的页面可以无条件跳转,例如登录注册页可以无条件跳转。有的页面需要满足条件才能跳转，例如购物车页面就需要用户登录才可以跳转)

• 什么是路由导航守卫？ ： 通俗来讲，就是路由跳转的时候需要执行的一个回调函数

  • 路由导航：就是路由跳转的意思

  • 守卫：类似于门卫，你做某件事之前会对你进行一个检查

• 2.为什么要有路由导航守卫

  • 在项目开发中，并不是每一个路由跳转都是明确的。 例如很多页面跳转需要登录判断，如果你有登录，则跳转到指定页面，没有登录则跳转到登录页面。

    • 举例子：我想进小区(个人信息)，门卫（导航守卫）会检查我有没有做核酸(是否登录)，如果做了就让我进去（跳转个人信息）。没做就让我去核酸点（登录页面）做完核算才可以进去。

• 3.路由导航守卫有哪些？

  • 前置守卫：跳转前执行

  • 后置勾子：跳转后执行

• 导航守卫语法介绍(导航守卫需要创建完路由对象之后才能使用)：

  • ==一定要注意，在导航守卫中必须要调用next()否则你的路由无法跳转==