Skip to content

Vue前端路由鉴权的使用

vue项目前端鉴权方式

vue项目前端鉴权方式常用的有以下三种：

  1. 渲染菜单时控制模块按钮的显示隐藏（不足：直接输入链接仍然可以访问模块）

  2. 在路由导航守卫中拦截，针对没有权限的模块进行重定向（不足：每次访问模块都需要鉴定权限，模块数量过多时会影响系统性能）

  3. 借助vue-router 2.x版本新加的API addRouters动态添加路由信息（不足：首次加载需要解析和添加，多跳转一次路由）

路由导航守卫中拦截

这里我先讲讲我们项目中用到的路由鉴权方式，这里我们主要用到我们Vue Router中的router.beforeEach, 这个函数的作用就是注册一个全局前置守卫

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数：

  • to: Route: 即将要进入的目标 路由对象

  • from: Route: 当前导航正要离开的路由

  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!sessionStorage || !sessionStorage.getItem('token')) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

可以看到我们这里弄了一个优化，我们使用record.meta.requiresAuth来查看我们前往的路由是否是需要鉴权的，在这基础之上，我们添加需要鉴权的路由时，无需在这个函数进行修改，我们只需要给我们路由添加meta信息如下

{
    path: '/user/settings',
    name: 'Settings',
    meta: { requiresAuth: true },
    component: Settings
}

这样，我们就实现了我们前端的鉴权了