导航守卫? 通过路由进行一些操作,向常见的登录权限校验。当用户满足条件是进入导航, 否则取消登录,跳转到登录页面。
温馨提示: 当参数和查询的改变并不会触发进入、离开导航守卫。 要想查看当前路由,通过this.$route对象来查看,或者使用组件内的守卫beforeRouteUpdate来查看路由。
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后置钩子
导航被确认之后,调用。
router.afterEach((to, from) => { // ...})
在配置路由时进行定义,beforeEnter(to,from,next)。