路由守卫

偏执的太偏执、 2024-04-19 12:18 95阅读 0赞

[路由守卫][Link 1]

- 监听整个项目的路由变化情况          全局的前置守卫
      - 监听某个路由的变化情况             路由的独享守卫
      - 监听的路由组件的路由变化情况         组件内的导航守卫

## 导航守卫（也叫路由守卫） ##

技术标签： [导航首位][Link 2]

# 导航守卫（也叫路由守卫） #

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

*  守卫路由
    
     *  进
        
         *  举例： 携带数据进
     *  出
        
         *  举例： 事情完成才能出

1.  导航守卫一共有三种形式

\- A: 全局导航守卫

. **全局前置守卫** `router.beforeEach(fn)`

1.  fn中有三个参数
    
     *  to:表示要去哪里
     *  from：表示从哪里来
     *  next：表示通不通过

*  关于next的使用
    
     *  next() 等价于 next( true ) 表示可以从当前路由跳转到目标路由
     *  next( false ) 表示不通过， 表示从当前路由跳转不到目标路由
     *  next(’/login’) 等价于 next(\{path:’/login’\}) 跳转指定的路由
     *  next(’/login’) 等价于 next(\{path:’/login’,params,query\})
     *  next( fn ) 数据预载

全局前置守卫是写在入口文件 main.js 中的，在进入路由前执行

// 全局前置路由守卫
    router.beforeEach( (to,from,next) =>{
        const name = localStorage.getItem('name');//查看本地存储上是否有name对象
        if( name || to.path === '/login'){//短路逻辑，有就可以继续执行，没有就跳转到登录页面
            next()
        }else{
         next( '/login' )//跳转登录页面
        }
    })
    
    
    // 全局后置路由守卫 router.afterEach(fn)，表示离开当前路由时执行
    router.afterEach( (to,from,next)=> {
        if(to.path === '/user'){//当to的path值等于这个时
            alert('确定进入user吗')
        }
    })

1.  全局的解析守卫
2.  在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
3.  必须保证整个项目的守卫和异步路由组件解析完成

3. 全局的后置守卫 `afterEach(fn)`

*  可以做一些用户友好提示

代码在上面

B: 路由独享守卫

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

{
    path: '/user',
    component: User,
    beforeEnter: ( to,from,next ) =>{
        // console.log(to)
        const name = localStorage.getItem('name');//判断本地存储有没有name对象
        if( name){//存在就可以继续执行
            next()
        }else{
            setTimeout(()=>{
                    alert('你还没有登录，点击跳转登录')//不存在就弹窗告诉没有登录，点击登录
                    next('/login')
                },0)
           }
        }
    },

C: 组件内守卫

*  有三种
    
     *  beforeRouteEnther( (to,from,next) =>\{\} ) 进入组件时触发【 //注意写法，fore route 】
     *  beforeRouteUpdate( (to,from,next) =>\{\} ) 数据改变时触发
     *  beforeRouteLeave( (to,from,next) =>\{\} ) 离开组件时触发

*  组件内的前置守卫 beforeRouteEnter((to,from,next)=>\{\})
    
     *  导航进入组件时，调用
     *  this是访问不到的，如果非要访问this ,必须通过 next(vm=>\{\})访问
     *  因为组件此时没有创建，所以没有this
     *  案例： 数据预载（进入组件前就获得数据）

next(vm => { //vm指的就是组件
        const result = JSON.parse(res.data.slice(7,-1)).rp_result.categorys
        vm.$set(vm.category,'categorys',result)
    })

组件内的后置守卫

*  离开组件时，调用
 *  this是可以访问到

//判断两个输入框是否有值输入，有就可以直接离开，没有弹窗告诉确定是否离开，防止误触
    beforeRouteLeave(to,from,next){
        if(this.username && this.pwd){
            next()
        }else{
            if(confirm('你确定要离开吗')){//返回一个布尔值
                next()
            }else{
                next(false)
            }
        }
    }

组件内的更新守卫（ 路由传参和路由的接参 ）

*  **在当前路由改变，但是该组件被复用时调用**
 *  举例来说，**对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，**
 *  由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
 *  可以访问组件实例 `this`

![在这里插入图片描述][format_png]  
![在这里插入图片描述][format_png 1]  
![在这里插入图片描述][format_png 2]

路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。对此，vue-route 提供的beforeRouterUpdate可以方便地实现导航守卫（navigation-guards）。导航守卫（navigation-guards）这个名字，听起来怪怪的，但既然官方文档是这样翻译的，就姑且这么叫吧。

一、全局前置守卫beforEach

*  守卫方法接收三个参数：
    
     *  **to：即将要进入的目标路由对象**
     *  **from：当前导航正要离开的路由**
     *  **next：执行下一步  **一定要调用该方法来 resolve 这个钩子。执行效果依赖 `next` 方法的调用参数。

*  `next()`: 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
 *  `next(false)`: 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 `from` 路由对应的地址。
 *  `next('/')` 或者 `next({ path: '/' })`: 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
 *  `next(error)`: (2.4.0+) 如果传入 `next` 的参数是一个 `Error` 实例，则导航会被终止且该错误会被传递给 `router.onError()` 注册过的回调。

1.全局守卫

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcwNjIyNA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcwNjIyNA_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcwNjIyNA_size_16_color_FFFFFF_t_70 2]看to打印的是什么（见下图），以便确定下个路径是什么  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcwNjIyNA_size_16_color_FFFFFF_t_70 3]

1.  全局守卫实现方法![List item][]
2.  现在已经初步把功能实现，也就是说现在点击其他组件，比如：关于我们，就可以跳转到login这个组件、
3.  后置钩子（更多使用的还是全局守卫，一般不用）
4.  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcwNjIyNA_size_16_color_FFFFFF_t_70 4][]

5。路由独享守卫（与全局守卫操作方式一样，作用范围不同）

![List item][List item 1]

6 . 组件内守卫（进入路由之前可以进行操作，离开路由也可以进行操作）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcwNjIyNA_size_16_color_FFFFFF_t_70 5]

[Link 1]: http://www.pianshen.com/article/6147372856/
[Link 2]: http://www.pianshen.com/tag/%E5%AF%BC%E8%88%AA%E9%A6%96%E4%BD%8D/
[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5waWFuc2hlbi5jb20vaW1hZ2VzLzYyNi85NDZlOTE3MTIwMzhlNWY0MjYzM2QwMzEzMzBkZTNhMi5wbmc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5waWFuc2hlbi5jb20vaW1hZ2VzLzk1NS9lYWNlYWIxZjIyN2Y0ZGU3ZDg2MTliYTcxNWU1NjZiYi5wbmc?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5waWFuc2hlbi5jb20vaW1hZ2VzLzc2LzM4MTBiNDNiYTRjNDQwMWU3NGJkNDgzNGI5YWVjYTc0LnBuZw?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcwNjIyNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190210115627845.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcwNjIyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcwNjIyNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190210120054871.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcwNjIyNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcwNjIyNA_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/56bd5beafce941abb2f4cfc63b5f78f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcwNjIyNA_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/efdd5ee1d6a94aa8989d9762c252a080.png
[List item]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/75547ebbb2234e69a9bee9e8c111dcec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcwNjIyNA_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/828a339659c545968db385262c06a10a.png
[List item 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/45dc983159cb49aa9138e92dd5b39d6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcwNjIyNA_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8757273802fa47faa7a301600246b2d2.png