Vue 权限管理实现方案

问题

在 Vue 应用中如何实现完整的权限管理系统，包括路由权限、菜单权限和按钮级别的权限控制？

解答

权限控制的本质

前端权限控制的核心是控制请求的发起权。请求触发来源有两种：页面加载触发和按钮点击触发。因此需要从路由和视图两方面入手控制。

接口权限

使用 JWT 进行接口权限验证，通过 axios 拦截器在每次请求时携带 token：

axios.interceptors.request.use(config => {
  const token = getToken()
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // 跳转到登录页
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

路由权限

方案一：初始化挂载全部路由

在路由配置中标记权限信息，每次跳转前校验：

const routerMap = [
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/index',
    alwaysShow: true,
    meta: {
      title: 'permission',
      icon: 'lock',
      roles: ['admin', 'editor']
    },
    children: [...]
  }
]

router.beforeEach((to, from, next) => {
  const userRoles = store.getters.roles
  if (hasPermission(userRoles, to.meta.roles)) {
    next()
  } else {
    next('/401')
  }
})

缺点：加载所有路由影响性能，菜单信息写死在前端，路由与菜单耦合。

方案二：动态挂载路由

登录后根据权限动态添加路由：

router.beforeEach(async (to, from, next) => {
  const hasToken = getToken()
  
  if (hasToken) {
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        next()
      } else {
        try {
          // 获取用户权限信息
          const { roles } = await store.dispatch('user/getInfo')
          // 根据权限生成可访问路由
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
          // 动态添加路由
          router.addRoutes(accessRoutes)
          next({ ...to, replace: true })
        } catch (error) {
          await store.dispatch('user/resetToken')
          next(`/login?redirect=${to.path}`)
        }
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
    }
  }
})

菜单权限

方案一：菜单与路由分离

前端定义路由，后端返回菜单，通过 name 字段关联：

// 前端路由定义
{
  name: "userManage",
  path: "/user/manage",
  component: () => import("@/pages/UserManage.vue")
}

// 后端返回菜单
[
  {
    name: "userManage",
    title: "用户管理",
    icon: "user"
  }
]

// 权限判断
function hasPermission(router, accessMenu) {
  if (whiteList.indexOf(router.path) !== -1) {
    return true
  }
  let menu = accessMenu.find(item => item.name === router.name)
  return !!menu
}

方案二：菜单和路由都由后端返回

前端定义路由组件映射表：

// 组件映射
const componentMap = {
  home: () => import("@/pages/Home.vue"),
  userInfo: () => import("@/pages/UserInfo.vue")
}

// 后端返回
[
  {
    name: "home",
    path: "/",
    component: "home"
  }
]

// 处理路由
function formatRoutes(routes) {
  return routes.map(route => {
    return {
      ...route,
      component: componentMap[route.component]
    }
  })
}

const accessRoutes = formatRoutes(backendRoutes)
router.addRoutes(accessRoutes)

按钮权限

使用自定义指令实现按钮级别权限控制：

// 路由配置
{
  path: '/permission',
  component: Layout,
  meta: {
    btnPermissions: ['edit', 'delete', 'add']
  }
}

// 自定义指令
import Vue from 'vue'

Vue.directive('has', {
  bind: function (el, binding, vnode) {
    let btnPermissionsArr = []
    
    if (binding.value) {
      // 使用指令传值
      btnPermissionsArr = Array.of(binding.value)
    } else {
      // 使用路由配置
      btnPermissionsArr = vnode.context.$route.meta.btnPermissions
    }
    
    if (!Vue.prototype.$_has(btnPermissionsArr)) {
      el.parentNode.removeChild(el)
    }
  }
})

// 权限检查方法
Vue.prototype.$_has = function (value) {
  const btnPermissionsStr = sessionStorage.getItem("btnPermissions")
  if (!btnPermissionsStr) {
    return false
  }
  return value.some(item => btnPermissionsStr.includes(item))
}

使用方式：

<template>
  <div>
    <el-button @click="editClick" type="primary" v-has="'edit'">编辑</el-button>
    <el-button @click="deleteClick" type="danger" v-has="'delete'">删除</el-button>
  </div>
</template>

关键点

• 接口权限通过 JWT 和 axios 拦截器实现，401 状态码跳转登录页
• 路由权限推荐动态挂载方案，登录后根据用户权限动态添加路由，避免加载无权限路由
• 菜单权限可选择菜单与路由分离或完全由后端返回，根据项目复杂度选择合适方案
• 按钮权限使用自定义指令 v-has 实现，通过移除 DOM 元素控制按钮显示
• 前端权限控制是辅助手段，核心权限验证必须在后端完成