前端如何实现列级权限控制？

胜楠提问于 2026-03-10 15:13:22 阅读 53

安全

我们后台返回的表格数据里，有些字段是敏感信息，比如手机号、身份证号，不同角色看到的列不一样。我在前端用的是 Vue + Element Plus 表格，现在直接把所有字段都渲染出来了，但不知道怎么根据用户权限动态隐藏某些列。

后端倒是能按权限返回不同的字段，但为了减少接口改动，想在前端做控制。我试过用 v-if 判断权限，但列太多写起来很麻烦，而且容易漏掉。有没有更优雅的方式？比如通过配置项自动过滤列？

比如现在表格列定义是这样的：

const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'phone', label: '手机号', permission: 'view_phone' },
  { prop: 'idCard', label: '身份证', permission: 'view_id_card' }
]

然后根据用户权限 user.permissions = ['view_phone'] 自动过滤掉没权限的列？

我来解答赞 7 收藏

反馈

1 条解答

司空梓涵 Lv1

这个需求很常见，直接用计算属性过滤一下就行：

import { computed, reactive } from 'vue'



// 用户权限

const user = reactive({

  permissions: ['view_phone']

})



// 表格列定义

const columns = [

  { prop: 'name', label: '姓名' },

  { prop: 'phone', label: '手机号', permission: 'view_phone' },

  { prop: 'idCard', label: '身份证', permission: 'view_id_card' }

]



// 过滤出有权限的列

const visibleColumns = computed(() => {

  return columns.filter(col => {

    // 没有 permission 字段的列默认显示

    if (!col.permission) return true

    // 有 permission 的列检查用户是否拥有该权限

    return user.permissions.includes(col.permission)

  })

})

模板里这样用：

<el-table :data="tableData">

  <el-table-column

    v-for="col in visibleColumns"

    :key="col.prop"

    :prop="col.prop"

    :label="col.label"

  />

</el-table>

搞定了，列多也不怕，配置好 permission 就完事。

如果想更省事，可以把权限判断抽成公共方法：

const hasPermission = (permission) => {

  if (!permission) return true

  return user.permissions.includes(permission)

}



const visibleColumns = computed(() => {

  return columns.filter(col => hasPermission(col.permission))

})

后面权限体系变复杂了，比如加角色判断或者多权限组合，改 hasPermission 这一个地方就行。

2026-03-10 18:05