当前位置：首页 > VUE

权限管理vue如何实现

2026-03-06 18:01:26VUE

权限管理实现方案

在Vue中实现权限管理通常涉及前端路由控制、按钮级权限和API请求拦截。以下是常见的实现方法：

基于路由的权限控制

使用Vue Router的beforeEach钩子进行路由拦截，结合用户角色或权限列表过滤可访问路由：

// router.js
router.beforeEach((to, from, next) => {
  const hasPermission = checkUserPermission(to.meta.requiresAuth)
  if (to.matched.some(record => record.meta.requiresAuth) && !hasPermission) {
    next({ path: '/403' }) // 无权限跳转
  } else {
    next()
  }
})

动态注册路由时根据权限过滤：

// 过滤异步路由表
const accessedRoutes = asyncRoutes.filter(route => {
  return hasPermission(route.meta.roles)
})
router.addRoutes(accessedRoutes)

按钮级权限控制

通过自定义指令v-permission实现按钮显示/隐藏：

权限管理vue如何实现

// main.js
Vue.directive('permission', {
  inserted(el, binding) {
    if (!checkPermission(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

模板中使用：

<button v-permission="'user:create'">创建用户</button>

权限数据存储方案

Vuex存储权限数据：

// store/modules/permission.js
state: {
roles: [],
permissions: []
},
mutations: {
SET_ROLES(state, roles) {
 state.roles = roles
}
}

从接口获取权限：

权限管理vue如何实现

// 登录后获取权限
getUserInfo().then(res => {
const { roles, permissions } = res.data
store.commit('SET_ROLES', roles)
store.commit('SET_PERMISSIONS', permissions)
})

API请求拦截

在axios拦截器中验证权限：

// request拦截器
service.interceptors.request.use(config => {
  if (config.url.includes('/admin/') && !hasAdminRole()) {
    return Promise.reject(new Error('无权限访问'))
  }
  return config
})

权限校验工具函数

创建通用的权限检查方法：

// utils/permission.js
export function checkPermission(requiredPermissions) {
  const userPermissions = store.getters.permissions
  return userPermissions.some(perm => requiredPermissions.includes(perm))
}

动态菜单生成

根据权限树生成导航菜单：

// 过滤菜单项
function filterAsyncMenus(menus, permissions) {
  return menus.filter(menu => {
    if (menu.permission && !permissions.includes(menu.permission)) {
      return false
    }
    if (menu.children) {
      menu.children = filterAsyncMenus(menu.children, permissions)
    }
    return true
  })
}