解密!Vue路由守卫的使用

这篇具有很好参考价值的文章主要介绍了解密!Vue路由守卫的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

什么是路由

对路由这个概念,可能有些人并不很理解,但是路由器大家应该都不陌生。我们可以先来了解一下路由器是什么。路由器现在基本上家家都会有,大家是否好奇过它名字的来源?其实搞懂了路由器名字的来历,我们就可以搞懂什么是路由了,如下图:

解密!Vue路由守卫的使用,Java,vue.js,智能路由器,前端

解密!Vue路由守卫的使用,Java,vue.js,智能路由器,前端

上面两张图分别介绍了路由器和路由的功能。首先他们都是用来进行请求分发,并且都是根据地址进行分发的。在进行分发时,只要匹配到了地址就会将请求指向该地址对应的资源。只不过路由器分发的是网络资源,而Vue路由则是分页指向不同的请求页面,但本质上他们的功能是类似的。

什么是路由守卫

路由守卫,顾名思义就是守护每个请求在路由到目标资源时,检查该请求是否合法。如上图所示,对左侧的/test1请求,理论上可以匹配到右侧的 /test1 资源,但有时右侧的 /test1 需要权限才可以访问。所以现在就算路由的地址正确,但因为有路由守卫的功能,可能会因为未认证或者权限不够等问题,我们也不能访问,这就是路由守卫。所以路由守卫其实就是对一些请求进行校验和过滤的防护检查机制。

路由守卫的分类

1. 守卫分类

我们先来看看路由守卫具体有哪些分类吧。

1.1 全局前置守卫(重要)

全局前置守卫会在用户发起请求触发导航时被创建,并且时刻处于等待中,等待着请求的到来。

//创建路由对象
const router = new VueRouter({ ... })
/**
 * 调用全局前置守卫
 * 参数1: to: 跳转的目标路由对象
 * 参数2: from: 当前要离开的路由
 * 参数3: next函数: 类似于Java中过滤器的放行,如果校验结束之后放行,让请求通过
 */
router.beforeEach((to, from, next) => {// ...})


/**
 * 案例使用
 */
 router.beforeEach((to, from, next) => {
     if (to.name !== 'Login' && !isAuthenticated){
         //如果未认证,重新回到登录页
         next({ name: 'Login' })
     }else{
         //如果已认证直接放行去to指向的目标资源
         next()
     }
 })

1.2 全局解析守卫(2.5.0 新增)

全局解析守卫是Vue在2.5.0之后新增的守卫类型,和全局前置守卫类似。但区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后解析守卫就被调用。

1.3 全局后置钩子

全局后置钩子函数和守卫不同,在守卫执行的过程中,挂载到守卫的执行周期中,不会影响守卫导航本身。
router.afterEach((to, from) => {
    //因为没有next函数所以全局后置钩子不会影响导航本身
})
1.4 路由独享守卫(私有守卫,非全局)
路由独享守卫就是将守卫设置到路由对象中,作为此路由的私有守卫。
const router = new VueRouter({
    routes: [
        {
            path: '/foo',
            component: Foo,
            beforeEnter: (to, from, next) => {
                // 使用方式和全局前置守卫相同
            }
        }
    ]
})
1.5 组件内守卫

组件内守卫,就是在组件内部定义的守卫。

const Foo = {
    template: `...`,
    beforeRouteEnter(to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不!能!获取组件实例 `this`
        // 因为当守卫执行前,组件实例还没被创建
    },
    beforeRouteUpdate(to, from, next) {
        // 在当前路由改变,但是该组件被复用时调用
        // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
        // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
    },
    beforeRouteLeave(to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
    }
}

2.守卫的完整运行流程

接下来我们来看看守卫的完整运行流程:

1.导航被触发;

2.在失活的组件里调用 beforeRouteLeave 守卫;

3.调用全局的 beforeEach 守卫;

4.在重用的组件里调用 beforeRouteUpdate 守卫;

5.在路由配置里调用 beforeEnter;

6.解析异步路由组件;

7.在被激活的组件里调用 beforeRouteEnter;

8.调用全局的 beforeResolve 守卫;

9.导航被确认;

10.调用全局的 afterEach 钩子;

11.触发 DOM 更新;

12.调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。

全局前置守卫详解

全局前置守卫是在工作中用的最多的守卫,一般用于进行资源的保护(权限认证和授权认证),下面我们来看看壹哥具体的案例,代码如下:

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <title>路由守卫</title>
        </head>
        <body>
                <div id="app">
                        <h4>路由守卫案例</h4>
                        <p>    
                                
                                <router-link to="/foo">Go to Foo</router-link>
                                <router-link to="/bar">Go to Bar</router-link>
                        </p>
                        <div>
                                
                                <router-view></router-view>
                        </div>
                </div>
                
                <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
                <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
                
                <script>
                        //定义组件
                        const Foo = { template: '<div>页面1(不需要权限)</div>' }
                        const Bar = { template: '<div>页面2(需要认证)</div>' }
                        const Login = { template: '<div>登录页</div>' }
                        //定义路由映射
                        const routes = [
                          { path: '/foo',name:'Foo', component: Foo },
                          { path: '/bar',name:'Bar', component: Bar },
                          { path: '/Login',name:'Login', component: Login }
                        ]
                        //创建路由
                        const router = new VueRouter({
                          routes // (缩写) 相当于 routes: routes
                        })
                        
                        //路由守卫(全局前置路由守卫)
                        router.beforeEach((to, from, next) => {
                                if(to.name==='Bar'){
                                        //跳转认证页面
                                        next({name:'Login'})
                                }else if(to.name==='Foo'){
                                        //直接放行
                                        next();
                                }else{
                                        next();
                                }
                        })
                        
                        var app = new Vue({
                          el: '#app',
                          data: {
                            
                          },
                          /* 注册路由 */
                          router:router
                        })
                </script>
        </body>
</html>

以上就是Vue中路由守卫的一些小秘密,你get到了吗?大家不妨把最后的案例运行一下,仔细体会一下Vue路由的具体作用。文章来源地址https://www.toymoban.com/news/detail-678282.html

到了这里,关于解密!Vue路由守卫的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 若依ruoyi前端vue使用jsencrypt.js加密后端java进行RSA解密(前后端交互RSA加解密)

    目录 1、前后端RSA加解密实现思路 2、前端 3、后端 按照约定来说公钥一般用来加密,大家都可以获取得到,私钥用来解密,当然你也可以混着用,以下示例是前端通过加密,后端解密.  -----BEGIN PUBLIC KEY----- MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ81AMIIBCgKCAQEA1+05vAf7m5NcLNLkRtsm gp+QdzcW6MVdayGTGBJG0v

    2024年02月06日
    浏览(70)
  • Vue2路由:手动配置使用路由&路由嵌套、路由动态传参(:参数,query、props)、编程式导航(back、go)、导航守卫

    过了一遍vue2的router,整理一下小结 目录 一、前端路由的概念与原理 1.1 什么是路由 1.2 路由的工作方式 二、vue-router的基本使用 2.1 安装、配置、使用router 2.2 redirect重定向 三、嵌套路由 3.1 声明子路由的规则 3.2 默认子路由 四、动态路由 4.1 动态路由的概念 4.2 动态路由取参方

    2024年02月05日
    浏览(43)
  • Vue——路由守卫(全局前置路由守卫beforeEach、全局后置路由守卫router.afterEach、独享路由守卫beforeEnter、组件内路由守卫 )

     作用:对路由进行权限控制 分类:全局守卫、独享守卫、组件内守卫 目录 一、全局前置路由守卫router.beforeEach(切换之前调用,to、from、next参数) 改进代码 二、全局后置路由守卫router.afterEach( 切换之后调用,to、from参数,没有next参数) 三、独享路由守卫beforeEnter(某一

    2024年02月08日
    浏览(53)
  • vue - 路由守卫

    Vue路由守卫是一种机制,用于在导航过程中对路由进行监控和控制。Vue Router提供了三种类型的路由守卫: 1. 全局前置守卫:router.beforeEach 2. 全局解析守卫:router.beforeResolve 3. 全局后置守卫:router.afterEach 这些守卫可以用来进行权限验证、页面加载前的处理、页面切换时的

    2024年04月25日
    浏览(37)
  • vue三种路由守卫详解

    查看本专栏目录 关于作者 还是大剑师兰特 :曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信,一起交流。 热门推荐 内容链接

    2024年02月20日
    浏览(37)
  • 编程式导航、缓存路由组件、路由守卫、Vue UI组件库【VUE】

    作用:不借助 router-link 实现路由跳转,让路由跳转更加灵活 具体编码: 作用:让不展示的路由组件保持挂载,不被销毁 具体编码: 作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。 具体名字: (1)activated路由组件被激活时触发 (2)deactivated路由组件失

    2024年02月03日
    浏览(50)
  • vue-router路由守卫

    在我们使用vue-router的时候,路由守卫就像监听器、拦截器一样,帮我们做一些鉴权等操作,vue中的路由守卫分为全局路由守卫、独享路由守卫、组件内的路由守卫 全局路由守卫 : beforeEach、 afterEach 组件独享路由守卫 :beforeEnter、 beforeLeave 组件内路由守卫 :beforeRouteEnter、

    2024年02月11日
    浏览(38)
  • React/Vue实现路由鉴权/导航守卫/路由拦截

    1、实现思路 自己封装  AuthRoute  路由鉴权高阶组件,实现未登录拦截,并跳转到登录页面 思路为:判断本地是否有token,如果有,就返回子组件,否则就重定向到登录Login 2、实现步骤 在 components 目录中,创建 AuthRoute/index.js 文件 判断是否登录 登录时,直接渲染相应页面组

    2024年02月15日
    浏览(38)
  • 【学Vue就跟玩一样】Vue中的路由与多种守卫

    vue的一个插件库,专门用来实现对 SPA应用 的单页Web应用(single page web application, SPA)。整个应用只有一个完整的页面。点击页面中的导航链接不会刷新页面,只会做页面的局部更新。数据需要通过ajax请求获取。 一个路由就是一组映射关系(key :value) key 为路径, value可能是funct

    2024年02月02日
    浏览(31)
  • Vue--》深入理解 Vue 3 导航守卫,掌握前端路由的灵魂技能!

    目录 vue3导航守卫讲解与使用 element-ui的安装与使用 配置路由和设置路径别名

    2024年02月05日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包