【原】Vue学习笔记之路由守卫

概念

路由守卫是Vue Router提供的一种机制，用于在导航过程中对路由进行控制和管理。通过使用路由守卫，你可以在路由切换前、切换后以及错误处理时执行相应的逻辑。

VueRouter三种守卫：

1：全局钩子

• router.beforeEach() 进入之前触发

• router.afterEach() 进入之后触发

每个守卫方法接收三个参数：

①to: Route: 即将要进入的目标路由对象（to是一个对象，是将要进入的路由对象，可以用to.path调用路由对象中的属性）

②from: Route: 当前导航正要离开的路由

③next: Function: 这是一个必须需要调用的方法，执行效果依赖 next 方法的调用参数。

路由守卫写在main.js文件，或者写在router文件夹下的index.js文件】

① 前置路由守卫（每次切换前被调用）

在需要配置路由守卫的地方加上 meta: { isAuth: true }

    {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue'),
        meta: { isAuth: true, title:'主页' },
    },

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    //如果路由需要跳转
    if (to.meta.isAuth) {
        //判断 如果user本地存储是admin的时候，可以通过
        if (localStorage.getItem('user') === 'admin') {
            next()  //放行
        } else {
            alert('您无权限查看！')
        }
    } else {
        // 否则，放行
        next()
    }
})

② 后置路由守卫

路由跳转之后执行的事件，可以用作跳转路由后更改网页名

    {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue'),
        meta: { isAuth: true, title:'主页' },
    },

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
    document.title = to.meta.title || 'xxx系统主页' 
})

2：独享守卫

独享路由守卫只有前置没有后置

在路由独享守卫中，我们同样可以访问到即将要进入的路由对象 to，以及当前的路由对象 from。另外，还可以通过 next 函数控制路由的跳转行为。如果调用 next 函数并传入一个路由对象，则会跳转到该路由。如果不调用 next 函数，则当前路由不会发生变化

    {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue'),
        meta: { isAuth: true },
        beforeEnter: (to, from, next) => {
            if (to.meta.isAuth) { //判断是否需要授权
                if (localStorage.getItem('user') === 'admin') {
                    next()  //放行
                } else {
                    alert('您无权限查看！')
                }
            } else {
                next()  //放行
            }
        }
    },

3：组件内守卫

• beforeRouteEnter: 在路由进入该组件之前被调用。

• beforeRouteUpdate: 在路由更新该组件时被调用。

• beforeRouteLeave: 在路由离开该组件时被调用。

在组件内的守卫中，我们同样可以访问到即将要进入的路由对象 to，以及当前的路由对象 from。另外，还可以通过 next 函数控制路由的跳转行为。如果调用 next 函数并传入一个路由对象，则会跳转到该路由。如果不调用 next 函数，则当前路由不会发生变化。

//通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next) {
  if(toString.meta.isAuth){
    if(localStorage.getTime('user')==='admin'){
      next()
    }else{
      alert('无权限查看！')
    }
  } else{
    next()
  }
},
 
//通过路由规则，离开该组件时被调用 
beforeRouteLeave(to,from,next) {
 next()
}