2022-09-16Vue00
请注意,本文编写于 560 天前,最后修改于 560 天前,其中某些信息可能已经过时。

vue-router中如何保护路由?

此题是考查项目实践能力,项目中基本都有路由守卫的需求,保护指定路由考查的就是这个知识点。

答题思路:

  1. 阐述vue-router中路由保护策略
  2. 描述具体实现方式
  3. 简单说一下它们是怎么生效的

回答范例:

  1. vue-router中保护路由安全通常使用导航守卫来做,通过设置路由导航钩子函数的方式添加守卫函数,在里面判断用户的登录状态和权限,从而达到保护指定路由的目的。
  2. 具体实现有几个层级:全局前置守卫beforeEach、路由独享守卫beforeEnter或组件内守卫beforeRouteEnter。以全局守卫为例来说,可以使用router.beforeEach((to,from,next)=>{})方式设置守卫,每次路由导航时,都会执行该守卫,从而检查当前用户是否可以继续导航,通过给next函数传递多种参数达到不同的目的,比如如果禁止用户继续导航可以传递next(false),正常放行可以不传递参数,传递path字符串可以重定向到一个新的地址等等。
  3. 这些钩子函数之所以能够生效,也和vue-router工作方式有关,像beforeEach只是注册一个hook,当路由发生变化,router准备导航之前会批量执行这些hooks,并且把目标路由to,当前路由from,以及后续处理函数next传递给我们设置的hook。

可能的追问:

  1. 能不能说说全局守卫、路由独享守卫和组件内守卫区别?

    • 作用范围

    • 组件实例的获取

      beforeRouteEnter(to,from,next) {
      	next(vm => {
      		
      	})
      }
    • 名称/数量/顺序

      1. 导航被触发。
      2. 在失活的组件里调用离开守卫。
      3. 调用全局的 beforeEach 守卫。
      4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
      5. 在路由配置里调用 beforeEnter
      6. 解析异步路由组件。
      7. 在被激活的组件里调用 beforeRouteEnter
      8. 调用全局的 beforeResolve 守卫 (2.5+)。
      9. 导航被确认。
      10. 调用全局的 afterEach 钩子。
      11. 触发 DOM 更新。
      12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
  2. 你项目中的路由守卫是怎么做的?

  3. 前后端路由一样吗?

  4. 前端路由是用什么方式实现的?

  5. 你前面提到的next方法是怎么实现的?

本文作者:毛超颖

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!