eladmin按钮权限分配超详情很简单checkPermission和v-permission的区别

最新推荐文章于 2025-09-19 18:11:20 发布

原创最新推荐文章于 2025-09-19 18:11:20 发布 · 4.3k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #element

本文介绍了在Vue项目中使用Element-UI进行权限管理的方法，包括为不同用户分配不同权限，以及如何利用v-permission指令和checkPermission方法控制表格列的显示。在遇到v-permission无法删除表格空列的问题时，通过checkPermission解决，确保无权限的列不会显示。

前言

在最近的项目中，有对于不同用户分配不同权限的需求，以前写的时候知识跟着用，这次按照登录-刷新-验证打算自己去看一遍（使用element-ui）

上文总结

另一篇按钮权限分配我们说到了 v-permission 的用法和执行过程，先来个小总结

对于管理员

如果要让管理员拥有对某个表格的增删改权限
只需要在表格 v-permission 列表中添加 ‘admin’ 字段就可以了

<el-table-column
  v-permission="['admin', 'user:edit', 'user:del']"
  label="操作"
  align="center"
  fixed="right"
>
	<template slot-scope="scope">
	<udOperation
	  :data="scope.row"
	  :permission="permission"
	>
	</udOperation>
	</template>
</el-table-column>

对于普通用户

需要在 permission 中写上当前权限标识。

permission: {
 add: ['user:add'],
 edit: ['user:edit'],
 del: ['user:del']
}

然后在菜单页面，添加按钮，然后写上相应的权限标识。
再在角色管理页面给相应用户分配这个权限。

v-permission只能对按钮做判断么？

当然不是的，再来看这个自定义指令

inserted(el, binding, vnode) {
  // 解构赋值拿到v-permission绑定的值
  const { value } = binding
  // 获取gatters里面的roles(user下的roles)
  const roles = store.getters && store.getters.roles
  if (value && value instanceof Array && value.length > 0) {
    const permissionRoles = value
	// 判断roles里面是否含有v-permission绑定的值
    const hasPermission = roles.some(role => {
      return permissionRoles.includes(role)
    })
	// 如果该用户没有权限，就找到父节点，然后在父节点将次节点移除
    if (!hasPermission) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  } else {
    throw new Error(`使用方式： v-permission="['admin','editor']"`)
  }
}

我们可以看到，v-permission 通过vuex拿到存储的用户所有权限和传进来的权限标识数组匹配，匹配到了就 return true，匹配不到就移除当前节点
所以，v-permission不只可以作用于按钮，可以使用在任意标签上（此处感谢远远学姐精炼的总结能力以及强大的实践能力）

碰到的问题

在处理表格时，使用v-permission并不能移除当前节点，按钮是没了，但是留下了空列

对此我打印发现，用在表格中时，他的父节点为null
这就不难解释为什么留下了空列了

checkPermission

对此，我们可以用 checkPermission 方法

此方法在 src/mixins 下
使用

在vueComponents中引入

import crud from '@/mixins/crud'

混入

mixins: [crud]

使用

checkPermission(['repay:edit','repay:sure'])

看实现过程

在 src/utils/permission.js

export default function checkPermission(value) {
  if (value && value instanceof Array && value.length > 0) {
    const roles = store.getters && store.getters.roles
    const permissionRoles = value

    const hasPermission = roles.some(role => {
      return permissionRoles.includes(role)
    })

    if (!hasPermission) {
      return false
    }
    return true
  } else {
    console.error(`need roles! Like v-permission="['admin','editor']"`)
    return false
  }
}

我们可以看到，checkPermission接收的是一个权限数组，还是去拉取当前用户所有权限，然后跟传进来的权限数组进行比对。有权限就return true，没有权限就return fakse

所以对于控制不同角色动态显示不同的列，可以使用 v-if+checkPermission

<el-table-column
  v-if="checkPermission(['repay:edit','repay:sure'])"
  label="操作"
  width="250px"
  align="center"
  fixed="right"
>
</el-table-column>