1. 为什么要使用路由守卫?什么是路由守卫?

第一次认识路由守卫:之前我做过的小项目里面,我们直接在浏览器网址的地方进行修改就能跳转页面,这是不安全的,因此就需要路由守卫,实现通过路由拦截,来判断用户是否登录,该页面用户是否有权限浏览,避免非法登录。

路由守卫的概念:路由守卫也叫导航首位,路由拦截。

官方的解释是:

正如其名,vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

其实我们可以理解为:路由守卫就是路由跳转过程中的一些钩子函数,是一个大的过程,这个过程分为:跳转前,中,后等等细小的过程,在每一个过程中都有一函数,这个函数能让你进行一些操作,这就是导航守卫。

2. 路由守卫分类

路由守卫分为三类:

1.全局导航守卫

1.全局前置守卫,路由跳转之前执行:router.beforeEach(to,from,next)
2.全局解析守卫:router.beforeResolve
3.全局后置守卫,路由跳转之后执行:router.afterEach((to,from){ 条件代码 })

2.路由独享守卫:

beforeEnter:(to,from,next){  条件代码 }

3.组件内守卫

1.组件内的前置守卫: beforeRouteEnter((to,from,next)=>{})
2.组件内的后置守卫: beforeRouteLeave (to,from,next){ 条件代码 }
3.组件内的更新守卫:beforeRouteUpdate ( to,from,next ){} 

3.使用

全局导航守卫-全局前置守卫(常用):router.beforeEach(to,from,next)

router.beforeEach((to,from,next)=>{
    console.log(to);  // 即将要跳转的路由
    console.log(from); // 即将要离开的路由
    next() // 一定要调用 ,执行之后的效果依赖next内带的参数
})

路由发生变化就会调用beforeEach函数。其中参数to指向下一个路由(即将跳到的路由),from指向下一个路由(跳转之前的原页面),next为一个方法,并且一定要调用

next需要注意的地方:

  1. 但凡涉及到有next参数的钩子,必须调用next() 才能继续往下执行下一个钩子,否则路由跳转会停止。
  2. next(false)。中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到from路由对应的地址。主要用于登录验证不通过的处理
  3. next('/') 或者 next({ path: '/' }) : 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。可以向next中传递任意位置的对象。
  4. next(error): (v2.4.0+) :如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
  5. 在beforeRouteEnter钩子中next((vm)=>{})内接收的回调函数参数为当前组件的实例vm,这个回调函数在生命周期mounted之后调用,也就是,他是所有导航守卫和生命周期函数最后执行的那个钩子。

4.token

前面了解了路由导航基本使用,那么我们需要判断用户权限,判断是否为非法登录,怎么判断呢?这个时候我们就要用到token令牌了。

  1. token运行模式

695d042fe189e39ec575dcc7ea6b5666.png

token是怎么来的呢?在用户登录完成之后,后台会返回一个token值给我们,我们把它存储到cookie中,然后使用cookie.get就能取到想要的东西,关于如何存储以及使用,后面一篇再记录。

所以上面的整个流程我们可以用代码实现

//记得导入cookie
import cookie from "cookie-js"
//定义gettoken方法获取token
function getToken(){
  return cookie.get("token")
}

路由守卫部分,添加判断语句

router.beforeEach((to,from,next)=>{
//如果调用getToken()方法得到了token,则输出存在,由于我们还没存储token,所以不会进入这个语句中
//在这里,我们可以进行路由的动态添加,分配菜单等等,下一篇再学习
//先重点看不存在的情况下的处理方法
    if(getToken()){
       console.log("存在token")
    }
//如果调用getToken()方法没有得到token,则输出不存在
    else{
       console.log("不存在token!!")
    }
    next() 
})

不存在token的时候,我们跳转到登录界面,直接在else语句中添加next("/login")就可以吗?

答案是不可以。这个会造成一个死循环。我们来分析一下:

通过判断,我们得到没有token的结论,因此调用else中的语句next("/login"),此时路由跳转到登录界面login,可是由于next中带了参数,会再次触发beforeEach钩子函数,再次进行判断。。第二次判断,我们仍然没有token,仍然进入else语句中,仍然执行next("/login"),再次触发beforeEach。。就将会进入一个死循环。

为了,避免死循环,这个时候我们就需要用到白名单来进行相关处理

//声明一个白名单
const whiteRouter = ['/login'];  

补充一个indexof方法,判断数组中是否存在指定的某个对象,如果不存在,则返回 -1

在上面的else语句中,添加一个判断

//当to.path == '/login' 的时候,存在
if (whiteRouter.indexOf(to.path) !== -1) {  
            next(); //执行next(),指向to.path,而且由于没有参数,不会再次触发beforeEach
        }
//不存在时
else{
 //发生路由指向变化,触发beforeEach,重新判断,此时to.path == '/login',在下一次判断中,在白名单中存在
            next('/login');
        }
Logo

前往低代码交流专区

更多推荐