Angular中如何隐藏permission-wrapper组件的DOM标签并渲染内容

核心思路 #

要让组件不生成自身的DOM标签，可通过框架特性实现：Vue中使用<template>根容器或函数式组件，React中使用Fragment或直接返回子节点，最终只根据权限判断是否渲染组件内容，完全不出现组件自身标签。

Vue 3 实现示例 #

组件代码 #

<template>
  <template v-if="hasPermission">
    <slot />
  </template>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  requiredPermission: {
    type: String | Array,
    required: true
  }
})

// 模拟获取用户权限（实际项目可从状态管理/接口获取）
const getUserPermissions = () => ['edit', 'delete']

const hasPermission = computed(() => {
  const userPermissions = getUserPermissions()
  if (typeof props.requiredPermission === 'string') {
    return userPermissions.includes(props.requiredPermission)
  }
  if (Array.isArray(props.requiredPermission)) {
    return props.requiredPermission.some(perm => userPermissions.includes(perm))
  }
  return false
})
</script>

使用方式 #

<permission-wrapper required-permission="edit">
  <button>编辑内容</button>
</permission-wrapper>

<permission-wrapper :required-permission="['delete', 'admin']">
  <button>删除内容</button>
</permission-wrapper>

Vue 2 兼容方案（函数式组件） #

Vue.component('permission-wrapper', {
  functional: true,
  props: {
    requiredPermission: { type: [String, Array], required: true }
  },
  render(h, context) {
    const getUserPermissions = () => ['edit', 'delete']
    const userPermissions = getUserPermissions()
    let hasPermission = false
    
    if (typeof context.props.requiredPermission === 'string') {
      hasPermission = userPermissions.includes(context.props.requiredPermission)
    } else if (Array.isArray(context.props.requiredPermission)) {
      hasPermission = context.props.requiredPermission.some(p => userPermissions.includes(p))
    }
    
    return hasPermission ? context.children : null
  }
})

React 实现示例 #

import React from 'react'

const PermissionWrapper = ({ requiredPermission, children }) => {
  // 模拟获取用户权限
  const getUserPermissions = () => ['edit', 'delete']
  const userPermissions = getUserPermissions()

  let hasPermission = false
  if (typeof requiredPermission === 'string') {
    hasPermission = userPermissions.includes(requiredPermission)
  } else if (Array.isArray(requiredPermission)) {
    hasPermission = requiredPermission.some(p => userPermissions.includes(p))
  }

  return hasPermission ? <>{children}</> : null
}

export default PermissionWrapper

使用方式 #

<PermissionWrapper requiredPermission="edit">
  <button>编辑内容</button>
</PermissionWrapper>

内容的提问来源于stack exchange，提问作者Ankit Chodavadiya