README.md

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方法是怎么实现的？