vue路由拦截 ｜ 青训营

所有bug都会改
119 阅读3分钟

一、概述

在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录，前端可以判断，后端也会进行判断的，我们前端最好也进行判断。

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。

导航钩子有3个参数：

/ 1、to:即将要进入的目标路由对象；

2、from:当前导航即将要离开的路由对象；

3、next ：调用该方法后，才能进入下一个钩子函数(afterEach)。

    next()//直接进to 所指路由
    next(false) //中断当前路由
    next('route') //跳转指定路由
    next('error') //跳转错误路由

以下是刚刚实现登录路由拦截 在router/index.js中

 // 路由拦截（守卫）：每次跳转之前都会执行
router.beforeEach((to,from,next)=>{
  if(to.name==="login"){
    next()
  }else{
    // 如果授权（已经登录过）next()
    // 未授权，重定向到login
    if(!localStorage.getItem("token")){
      next({
        path:"/login"
      })
    }else{
      if(!store.state.isGetterRouter){
      ConfigRouter()
      // 再次放行
      next({
        path:to.fullPath
      })
      }else{
        next()
      }
    }
  }
})

const ConfigRouter=()=>{
  RoutesConfig.forEach(item=>{
    router.addRoute("mainbox",item)
  })

  //改变 isGetterRouter=true
  store.commit("changeGetterRouter",true)

在store/index.js中


import { createStore } from 'vuex'

export default createStore({
  state: {
    // 是否第一次
    isGetterRouter:false
  },
  getters: {
  },
  mutations: {
    // 改变方法
    changeGetterRouter(state,value){
      state.isGetterRouter=value
    }
  },
  actions: {
  },
  modules: {
  }
})

说明：

在router.beforeEach中，做了token判断，为空时，跳转到登录页面。

访问首页

http://localhost:8080

会跳转到

http://localhost:8080/login 效果如下：

打开F12，进入console，手动写入一个token

localStorage.setItem('token', '饱饱')

效果如下：

image.png

再次访问首页，就可以正常访问了。

打开Application，删除Local Storage里面的值，右键，点击Clear即可

刷新页面，就会跳转到登录页面。 以及访问其他路由网页也都可以实现

image.png

vue中鉴权的两种方法

常用的鉴权有两种：一种是路由拦截，一种是动态路由。

路由拦截

通过vue-router的beforeEach方法进行每一次路由访问的拦截，判断拦截信息中是否有鉴权要求或者权限校验，以此来实现鉴权。 如果权限不够，访问的路径虽然存在但会被拦截。

动态路由

在登录后根据用户信息以及权限动态地添加正确的权限路由，如果权限不够，访问的路径是不存在的。

比较

路由拦截实现起来相对简单，只需在登录的时候保存用户权限信息，然后编写路由的时候将需要鉴权的路由加上权限信息，然后在beforeEach拦截中进行判断处理是否可进入，并且，即使通过f5刷新页面， 只要用户信息权限信息保存下来，就可以实现鉴权。

而动态路由，实现起来相对麻烦，可能还需要要后端配合，不过看起来或者安全性上更高级一些，毕竟你即使知道有某个权限路由，但是我根本就不渲染，你就绝对无法走进去。动态路由需要登录后记录用户权限 菜单列表，这个列表可能是后端给的也可能是前端自己总结。前端自己总结的话就需要根据不同权限用户生成不同的路由列表，然后在登录后进行按需渲染。且这个动态路由加载判断的条件以及实现逻辑会比较复 杂。需要考虑f5刷新后动态路由重新加载，因为此时不会再次经历登录操作，所以动态路由加载不会放在登录功能的回调中，但又必须是登陆后渲染，所以就同样放在router的beforeEach这个方法里，只是 判断条件需要改为用户权限信息已存在但动态路由为渲染加载

avatar
文章
阅读
粉丝