Vue之导航守卫

导航守卫? 通过路由进行一些操作,向常见的登录权限校验。当用户满足条件是进入导航, 否则取消登录,跳转到登录页面。

温馨提示: 当参数和查询的改变并不会触发进入、离开导航守卫。 要想查看当前路由,通过this.$route对象来查看,或者使用组件内的守卫beforeRouteUpdate来查看路由。

  1. 作用: — 类似 【保安】

全局守卫

1、route.beforeEach 全局前置守卫

可以改变导航本身。 当导航触发时,全局前置守卫顺序调用。守卫是异步解析的, 此时导航在所有守卫resolve之前一直处于等待阶段 。

应用: 用户未登录时,根据条件跳转到不同的页面。若当前用户登录状态失效,登录收跳转页面, 根据路径中的redirect的数据进行相应跳转。

router.beforeEach((to, from, next) => {    if (Vue.ls.get(ACCESS_TOKEN)) {        // 已经登录时,        next({ path: ‘/home’ }    } else {        // 未登录或登录失效        next({ path: ‘/login’ })    }})

2、route.beforeResolve 全局解析守卫

和route.beforeEach类似,在导航确认之前,同时在所有的组件内守卫、路由组件被解析之后, 解析导航守卫才会被调用。

3、route.afterEach后置钩子

导航被确认之后,调用。

  1. 可以做一些用户友好提示
  2. 与全局前置守卫参数相同
router.afterEach((to, from) => {  // ...})

二、路由独享守卫

在配置路由时进行定义,beforeEnter(to,from,next)。

  1. 写在路由表中的守卫钩子
  2. 针对的是和当前路由相关的,那么其他与之不相关的路由,它是无法监听它的变化情况的