Vue路由守卫

我们在看一些网页的时候如果想进一步了解一些东西的详情信息的话,当前的网页就会让我们进行登录,我们必须及逆行登录后才能够看到我们想看到的详情信息,这个操作我们称之为路由守卫也是我们在做一些项目的时候必要进行的一步,如果我们不做这一步的话,自己所作项目中的所有的数据,不管是可以公共访问的还是不能进行公共访问的都会展现给用户,这样是存在一定性的危险的,会极可能的导致自己公司的一些重要数据的丢失或者被盗用,这个还是值得我们学习的.

咱们先看一下文件的结构

我们开始写代码之前要先下载一下关于路路由配置的包npm install vue-router --save 安装好了之后我们就可以开始写代码了我们需要在main.js进行配置一下:

import router from './router'  //引入连接router文件 在main.js进行引入

我们在main.js引入好了之后就可以在router文件中进行对路由的配置了,我们vue的路由守卫有两种:一种是全局的路由守卫、一种是局部的路由守卫,我们先说一下全局的路由守卫吧,看一下代码,以下的代码是在router文件夹中的index文件进行写入的:

router.beforeEach((to,from,next)=> { 
  let isLogin = localStorage.username
  if(to.meta.guard){  //判断是否为true
    if(isLogin){  判断是否为true
      next()
    }else{
      next('/')//不为true跳转到登录页面
    }
  }else{
    next()//不为true往下执行
  }
})

export default router;//抛出

这个就是一个全局的路由守卫,里面有三个参数,一个是关于我们进行判断的to中含有我门需要进行判断的对象我们需要判断相关的对象的属性是否为true如果为true就往下依次执行,如果不为true的话就让其进行页面中的下一步操作,我们判断完为true后就要判断localStorage是否有值(这里用什么都可以,只要可以存储值进行判断),如果有值的话就往下执行页面的操作,如果不为true的话就返回到登录页面让用户进行登录操作,等到用户登录完成后我们可以存入一条数据用作进行判断,form是离开路由的页面,next是继续执行,这三个参数是必不可少的我们看一下判断使用的对象该怎么使用:

{    
      path:'/tablelist',
      component:tablelist,
      meta:{guard:true} //如果为true的话就进行路由守卫如果不为true的话就不进行路由守卫
}

文中的注释也写道了如果为true的话就进行路由守卫如果不为true的话就不进行路由守卫,对当前的路由进行监控,如果当前的路由想要前往其他的页面就必须进行路由守卫的流程.好了全局的路由守卫就说到这,我们下面说一下局部的路由守卫

局部的路由守卫与全局的路由守卫是非常类似的,也可以说是长得很像的双胞胎但是只是性格不一样,我们的两个路由守卫也是如此,我们局部的路由守卫的写法:

{
    path: '/table',
    component: TableList,
    meta:{
      requireAuth:true  //如果为true 对此路由进行鉴权处理  就是进行路由守卫
    },
//局部的路由守卫写法
    beforeEnter:(to,from,next)=>{
      console.log(to,from)
      let isLogin = localStorage.getItem('name')
      console.log(isLogin)
      if(isLogin){
        next()
      }else{
        next('/')
      }
    }
    
  }

看说的没错吧,两种路由守卫是非常的类似的,我们的局部路由守卫的用法是谁要进行路由守卫就在谁那里面写入路由守卫就可以了.

是不是非常的简单易懂,如果看懂的小伙伴们就赶紧练习一下,勤学苦练,方能成为人上人,加油!!!!

如果没有看懂的小伙伴请在下方进行评论,我会尽快回复的.

觉得咱写的还可以的,请用发财的小手点点赞和关注,小编在此隆重感谢!!!