当前位置：首页 > VUE

vue实现权限管理

2026-01-15 22:11:32VUE

Vue 权限管理实现方案

权限管理通常分为路由权限和功能权限两部分，以下是常见的实现方式：

路由权限控制

动态路由加载 通过用户角色或权限标识动态生成可访问的路由表。在路由守卫中校验权限：

// router/index.js
router.beforeEach((to, from, next) => {
  const hasPermission = checkPermission(to.meta.requiredRole)
  if (!hasPermission) next('/403')
  else next()
})

路由配置示例

const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    meta: { requiredRole: 'admin' }
  }
]

功能权限控制

指令方式 创建自定义指令控制元素显隐：

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

组件中使用

<button v-permission="'user:delete'">删除</button>

函数式校验 在方法中校验权限：

vue实现权限管理

methods: {
  handleDelete() {
    if (!this.$permission.check('user:delete')) return
    // 执行删除操作
  }
}

权限数据存储

Vuex 方案

// store/modules/auth.js
export default {
  state: {
    roles: [],
    permissions: []
  },
  mutations: {
    SET_PERMISSIONS(state, payload) {
      state.permissions = payload
    }
  }
}

API 交互流程

登录后获取权限数据
提交 mutation 存储权限
初始化动态路由

后端配合要点

权限数据结构建议：

vue实现权限管理

{
"roles": ["admin"],
"permissions": ["user:create", "user:delete"]
}

接口需返回当前用户的完整权限树
建议采用 JWT 携带基础权限信息

完整实现示例

权限工具类

// utils/permission.js
export default {
  check(permission) {
    return store.state.auth.permissions.includes(permission)
  }
}

动态路由加载

// 过滤异步路由
const filterRoutes = (routes, permissions) => {
  return routes.filter(route => {
    if (route.meta && route.meta.permission) {
      return permissions.includes(route.meta.permission)
    }
    return true
  })
}