什么是路由守卫？

谁践踏了优雅 2024-04-01 13:19 20阅读 0赞

第一次认识路由守卫：之前我做过的小项目里面，我们直接在浏览器网址的地方进行修改就能跳转页面，这是不安全的，因此就需要路由守卫，实现通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览，避免非法登录。

路由守卫的概念：路由守卫也叫导航守卫，路由拦截。

Vue.js 的官方路由学习链接：[https://router.vuejs.org/zh/][https_router.vuejs.org_zh]

### 路由守卫分为三类： ###

**1.全局导航守卫**

1.全局前置守卫，路由跳转之前执行：router.beforeEach(to，from，next)  
2.全局解析守卫：router.beforeResolve  
3.全局后置守卫，路由跳转之后执行：router.afterEach((to,from)\{ 条件代码 \}）

**2.路由独享守卫：**

beforeEnter:(to,from,next)\{ 条件代码 \}

**3.组件内守卫**

1.组件内的前置守卫： beforeRouteEnter((to,from,next)=>\{\})  
2.组件内的后置守卫： beforeRouteLeave (to,from,next)\{ 条件代码 \}  
3.组件内的更新守卫：beforeRouteUpdate ( to,from,next )\{\}

### 使用 ###

全局导航守卫-全局前置守卫（常用）：router.beforeEach(to，from，next)

router.beforeEach((to,from,next)=>{
        
        console.log(to);  // 即将要跳转的路由
        console.log(from); // 即将要离开的路由
        next() // 一定要调用 ，执行之后的效果依赖next内带的参数
    })

路由发生变化就会调用beforeEach函数。其中参数to指向下一个路由（即将跳到的路由），from指向下一个路由（跳转之前的原页面），next为一个方法，并且一定要调用

**next需要注意的地方：**

1.但凡涉及到有next参数的钩子，必须调用next() 才能继续往下执行下一个钩子，否则路由跳转会停止。

2.next(false)。中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。主要用于登录验证不通过的处理。

3.next(‘/’) 或者 next(\{ path: ‘/’ \}) : 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。可以向next中传递任意位置的对象。

4.next(error): (v2.4.0+) ：如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

5.在beforeRouteEnter钩子中next((vm)=>\{\})内接收的回调函数参数为当前组件的实例vm，这个回调函数在生命周期mounted之后调用，也就是，他是所有导航守卫和生命周期函数最后执行的那个钩子。

[https_router.vuejs.org_zh]: https://router.vuejs.org/zh/