当前位置：首页 > VUE

vue element 实现权限

2026-02-16 23:39:20VUE

vue element 实现权限的方法

在Vue和Element UI中实现权限控制通常涉及前端路由权限、菜单权限和按钮权限的管理。以下是几种常见的实现方式：

基于路由的动态权限控制

通过路由守卫拦截未授权访问，结合后端返回的权限数据动态生成可访问路由。

// 在router.beforeEach中校验权限
router.beforeEach((to, from, next) => {
  const hasPermission = checkUserPermission(to.meta.requiredRole)
  if (!hasPermission) next('/403')
  else next()
})

动态添加路由：

// 根据后端返回的权限数据动态添加路由
const asyncRoutes = [/* 动态路由配置 */]
router.addRoutes(asyncRoutes)

菜单权限控制

使用v-if或自定义指令控制菜单项的显示，通常与后端返回的权限列表匹配。

vue element 实现权限

// 在Vuex中存储权限菜单
state: {
  permissionMenus: [] // 从后端获取的权限菜单
}

模板中使用：

<el-menu>
  <el-submenu 
    v-for="menu in permissionMenus" 
    :key="menu.path"
    v-if="hasPermission(menu.requiredAuth)"
  >
    <!-- 子菜单项 -->
  </el-submenu>
</el-menu>

按钮级权限控制

通过自定义指令或高阶组件实现按钮级别的权限控制。

自定义指令方式：

vue element 实现权限

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

使用方式：

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

高阶组件方式：

const withPermission = (WrappedComponent, permission) => {
  return {
    render(h) {
      return checkPermission(permission) 
        ? h(WrappedComponent)
        : null
    }
  }
}

权限数据管理

建议将权限数据存储在Vuex中，便于全局访问和更新。

// Vuex store示例
export default {
  state: {
    roles: [],
    permissions: []
  },
  mutations: {
    SET_PERMISSIONS(state, permissions) {
      state.permissions = permissions
    }
  },
  actions: {
    async fetchPermissions({ commit }) {
      const res = await getPermissionsAPI()
      commit('SET_PERMISSIONS', res.data)
    }
  }
}

后端配合要点

后端应提供用户权限标识接口
返回数据结构建议包含：
- 角色信息
- 可访问路由
- 按钮权限标识
采用JWT等认证方式传递权限信息

// 示例权限数据结构
{
  "roles": ["admin"],
  "permissions": [
    "user:add",
    "user:edit",
    "user:view"
  ],
  "menus": [
    "/dashboard",
    "/user/list"
  ]
}