前端如何根据用户权限动态隐藏敏感字段？

极客奕诺提问于 2026-03-01 05:23:22 阅读 15

安全

我在做后台管理系统，不同角色看到的字段不一样，比如普通用户不能看“薪资”字段。现在我用 Vue 做列表展示，但不知道怎么优雅地控制字段显示，硬写 v-if 感觉太乱了。

试过在组件里加判断，但字段一多就特别难维护。有没有更通用的做法？比如通过权限标识自动过滤？

<template>
  <div>
    <span>姓名：{{ user.name }}</span>
    <span v-if="hasPermission('view_salary')">薪资：{{ user.salary }}</span>
    <span>部门：{{ user.dept }}</span>
  </div>
</template>

我来解答赞 10 收藏

反馈

1 条解答

浩毅 Lv1

说实话，v-if 写多了确实头疼。两种方式能让你少掉点头发。

第一种，封装个权限容器组件，把判断逻辑收拢到一个地方：

<template>

  <slot v-if="hasAuth" />

</template>



<script setup>

import { usePermission } from '@/hooks/usePermission'

const props = defineProps(['permission'])

const { check } = usePermission()

const hasAuth = check(props.permission)

</script>

用的时候这样：

<Auth permission="view_salary">

  <span>薪资：{{ user.salary }}</span>

</Auth>

第二种更省事，在数据层直接过滤掉敏感字段，模板里压根不用管权限的事：

// utils/filterFields.js

const fieldPermMap = {

  salary: 'view_salary',

  phone: 'view_phone',

  idCard: 'view_idcard'

}



export function filterSensitive(data, permissions) {

  const result = {}

  Object.keys(data).forEach(key => {

    const needPerm = fieldPermMap[key]

    if (!needPerm || permissions.includes(needPerm)) {

      result[key] = data[key]

    }

  })

  return result

}

接口拿到数据后调一下 filterSensitive(user, userPermissions)，模板直接循环渲染就完事了，差不多就行。

2026-03-01 09:09