8、导航守卫

最新推荐文章于 2024-07-28 10:00:00 发布

原创最新推荐文章于 2024-07-28 10:00:00 发布 · 置顶 · 682 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue-router 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Vue Router中的导航守卫机制，包括全局守卫、路由独享守卫和组件内守卫的使用场景及实现方式。阐述了如何通过beforeEach、beforeEnter和beforeRouteEnter等钩子函数控制路由跳转，实现权限验证和数据预加载。

介绍

学习vue-router的一些学习笔记，所有笔记内容请看 vue-router学习笔记

导航守卫

导航守卫就是路由跳转过程中的一些钩子函数，再直白点就是路由跳转是一个大的过程，这个大的过程分为跳转前中后等细小的过程，每一个过程中都有一个函数，这个函数给了你能操作一些其它事的时机，这就是导航守卫。(可以类比于vue的生命周期)
导航守卫分为：全局导航守卫、组件内的导航守卫、单个路由独享的导航守卫

全局的导航守卫

分为全局前置守卫（beforeEach）、全局解析守卫（beforeResolve）、全局后置钩子（afterEach）。全局的是指路由实例上直接操作的钩子函数，它的特点是所有路由配置的组件都会触发，直白点就是触发路由都会触发这些钩子函数。这些钩子函数的执行顺序为 beforeEach()、beforeResolve()、afterEach() 。
1、全局解析守卫 [beforeEach]
在路由跳转前触发，参数包括 to、from、next 三个，这个钩子函数的主要作用是用于登录验证，也就是路由还没跳转前提前告知，以免跳转了再通知就为时已晚。
如下所示：
使用 router.beforeEach() 注册一个全局的前置守卫：

const router = new VueRouter({..})
router.beforeEach((to,from.next)=>{
    //..
    next()  //调用该方法,才能进入下一个钩子
})

进入/app 前需要先登陆：

index.js
router.beforeEach((to, from, next) => {
  console.log('before each invoked');
  if (to.fullPath === '/app') {
    // next('/login')//不仅可以写字符串还可以是一个对象
    next({path: '/login', replace})
  } else {
    next()//  调用该方法,才能进入下一个钩子
  }
});

当一个导航触发时，全局守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有的守卫resolve完之前，一直处于等待中。
每个守卫方法接受三个参数：
（1）to:Route :即将进入的目标路由对象
（2）from：Route：当前导航正要离开的路由
（3）next：Function：一定要调用该方法来resolve 这个钩子。执行效果依赖 next 方法调用参数。

next()：进行管道中的下一个钩子。如果全部钩子执行完成，则导航的状态就是confirmed(确认的)。
next(false)：中断当前的导航。如果浏览器的URL改变了（可能是用户手动或者浏览器后退按钮），那么URL地址会充值到from路由对应的地址。
next(’/’) 或者 next({ path : ‘/’})：跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递认为位置对象，且允许设置诸如 repalce: true、name:‘home’ 之类的选项以及任何可以用在 router-link 的to prop 或router.push 中的选项。
next (error)：如果传入 next的参数是一个Error实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调

next()函数一定要被调用，否则钩子不会被resolved

完整示例如下：

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <h1>导航守卫</h1>
       <router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
        <br />
        <router-link to="/user/222">b title</router-link>
        <router-view></router-view>
    </div>
    <script>
    var user = {
        template: "<div>this is user </div>"
    };

    const router = new VueRouter({
        routes: [{
            path: "/user/:id",
			name:"user",
            component: user,
        }],
		
    })
	router.beforeEach((to,from,next)=>{
	 console.log(to);
    console.log(to.name);//user
	 next();
	})
    const app = new Vue({ router }).$mount("#app")
	//:to="{ name: 'user', params: { id: 123 }}" 前面的：不能省略，需要获得路由path里面的id
    </script>
</body>

2、全局解析守卫[beforeResolve]
注册方式：

router.afterEach((to,from)=>{
    //...
})

与beforeEach()类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
即在beforeEach（）和beforeRouterEnter（）之后调用，afterEach()之前调用

3、全局后置钩子[afterEach()]
注册方式：

router.afterEach((to,from)=>{
    //...
})

路由独享的守卫

是指在单个路由配置的时候也可以设置的钩子函数，其位置如下所示。目前只有一个钩子函数beforeEnter():

const router = new VueRouter({
    routes:[
        {
            path:'/foo',
            component:Foo,
            beforeEnter:(to,from,next)=>{
                //..
            }
        }
    ]
})

在routes.js（路由）里面设置
export default [
  {
    path: '/login',
    component: Login,
    name: 'login',
    // 进入Login页面前执行的钩子函数
    beforeEnter (to, from, next) {
      console.log("Loginroute before enter")
      next();
    },
  },
]

组件内的守卫

是指在组件内执行的钩子函数，类似于组件的生命周期，相当于为配置路由的组件添加的生命周期钩子函数。钩子函数按执行顺序包括 beforeRouterEnter、beforeRouteUpdate、beforeRouteLeave 三个，执行位置如下：
1、beforeRouteEnter:

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

beforeRouteEnter钩子在全局守卫beforeEach和独享守卫beforeEnter之后，全局的beforeResolve和全局的afterEach前调用，要注意该守卫内不能访问组件实例，因为组件实例还没有被创建，也就是this为undefined。

在钩子函数中，可以传一个回调给next来访问组件实例，在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数，可以在这个守卫中请求服务端获取数据，当成功获取并能进入路由时，调用next并在回调中通过vm访问组件实例进行赋值操作。

export default{
//  从另外的组件进入该组件前触发该钩子
beforeRouteEnter(to, from, next) {
    console.log("todo before enter");
    console.log(this) // 这里获取不到上下文，输出为undefined
    next(vm => { 
    // next里面有一个回到函数可以获取到上下文，
    // 把请求到的数据塞到vue对象中
    
    // 在next中可以设置id=‘test’
      vm.id='test'
      console.log(vm.id)// 输出 test
    });
  },
//  同一个组件，param不同的是触发,常用与同一个组件当传入不通参数时，
//  展示不同的数据
  beforeRouteUpdate(to, from, next){
    console.log("todo update enter")
    next();
  },
//  该组件离开跳转到另外的组件时触发该钩子,常应用于用户表单，
//  当用户填了一部分内容，需要提醒用户是否离开页面
 beforeRouteLeave(to, from, next){
    console.log("todo leave enter")
    if(global.confirm('are you sure')){
      next();
    }
  },
  data(){
     return{
  }
}
}

2、 beforeRouteUpdate：

const Foo={
    template:`...`,

    beforeRouteUpdate(to,from,next){
        // 在当前路由改变，但是该组件被服用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/：id 在/foo/1 和/foo/2
        // 之间跳转的时候，由于会渲染同样的组件，因此组件实例会被复用。而这个钩子
        // 就是在这个情况下被调用
        // 可以访问组件实例 ‘this’
    }
    
}

beforeRouteUpdate (to, from, next) {
  // 可以直接使用this,不需要使用next回调
  this.name = to.params.name
  next()
}

3、 beforeRouteLeave：

const Foo={
    template:`...`,
  
  beforeRouteLeave(to,from,next){
        // 导航离开组件的对应路由时调用
        // 可以访问组件实例 'this'
        // 这个离开守卫通常用来禁止用户在还未保存修改前突然离开。
        // 该导航可以通过 next(false) 来取消
    }
       
}

对上述进行总结：

全局路由钩子：
beforeEach(to,from, next)、
beforeResolve(to,from, next)、
afterEach(to,from)；
独享路由钩子：
beforeEnter(to,from, next)；
组件内路由钩子：
beforeRouteEnter(to,from, next)、
beforeRouteUpdate(to,from, next)、
beforeRouteLeave(to,from, next)

最后屡一下顺序：
当点击切换路由时：beforeRouterLeave–>beforeEach–>beforeEnter–>beforeRouteEnter–>beforeResolve–>afterEach–>beforeCreate–>created–>beforeMount–>mounted–>beforeRouteEnter的next的回调
当路由更新时：beforeRouteUpdate