vue项目中的路由守卫

路由守卫的意义就相当于一个保安一样,作用很大,在实际的项目中运用也是不少,也就是当客户在登陆自己账号的时候,有可能存在客户有啥事的时候,自己后台或者pc的关闭全部浏览器,没有点击退出登录,或者在退出登录以后,部分客户收藏了登录过后的链接地址,为了不需要登录就直接进入软件或者页面,这样就会存在部分隐患,所以在实际项目中,公司也会让你考虑到这一点。所以就需要记录一下。

这里我们使用的是router.beforeEach()的方法

一:这个方法含有3个参数

1.1:第一个to(我理解的去哪里)

1.2:第二个from(来自哪里)

1.3:第三个next()(就是放行,放你的路由通过)

router.beforeEach((to, from, next)=>{})

 然后我们就可以在这个箭头函数内部进行我们自己想要的判断

router.beforeEach((to, from, next) => {
  let isLogin = local.get('Code') ? true : false; // 获取登录的状态

  // 如果登录过 且是登录成功的
  if (isLogin) {
    next()  // 直接放行
  } else {
    // 否则
    // 如果去的是登录页
    if (to.path === '/') {
      next() // 直接放行
    } else {
      next('/') // 如果去的是别的页面 直接跳转到登录页
    }
  }
})

 我这个是通过登录过的账号本地会存储这该账号的信息进行判断的,大家也可以用自己的方式设置账号是否登录。 

原文地址:https://www.cnblogs.com/Old-vegetable-chicken/p/14201614.html