什么是路由守卫？

最新推荐文章于 2024-07-01 15:42:38 发布

短短·

最新推荐文章于 2024-07-01 15:42:38 发布

阅读量639

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45662026/article/details/128025284

版权

一.什么是路由守卫？

路由守卫就是如果用户访问某个页面就要判断是否登录，没有登录就跳转到登录页，登录了就直接放行。

二.路由守卫分为哪几种？

每个守卫方法有3个参数（to,from,next）
1.全局守卫：beforeEach,beforeLeave
2.独享守卫：beforeEnter,beforeLeave
3.组件内守卫：beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave

2.1前置路由守卫

// 为路由对象添加beforeEach守卫
router.beforeEach((to, from, next) => {
  // 如果用户访问的是登录页，直接放行
  if (to.path === '/login') {
    return next()
  }
  // 从sessionStorage中获取到保存的token值
  const token = sessionStorage.getItem('token')
  if (!token) {
    // 没有token,强制跳转到登录页
    return '/login'
  }
  return next()
})



export default router

2.2后置路由守卫

是路由跳转之后执行的事件，可以用作跳转路由后更改网页名
首先路由的meta需要配置title的名字

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

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

3.3独享路由守卫

是某一个路由单独使用的守卫。独享路由守卫只有前置没有后置。

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

3.4组件路由守卫

某一个路由所单独使用的守卫，只有前置没有后置。

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