antd不同权限的角色同一页面中展示不同的内容

<template>
  <div>
    <a-row :gutter="24">
      <a-col :span="12">
        <a-card title="拥有 `admin` 权限用户可看">
          <authority authority="admin" :no-match="true">
            <span>admin</span>
          </authority>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="拥有 `admin`, `form` 权限的用户可看">
          <authority :authority="['admin', 'form']">
            <span>form | admin</span>
            <a-form>
              <a-form-item label="用户名">
                <a-input />
              </a-form-item>
            </a-form>
          </authority>
        </a-card>
      </a-col>
      <a-col :span="12"></a-col>
    </a-row>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({});
</script>

效果预览

修改权限时修改以下地方：

 此时是管理员角色，同时拥有admin和form权限，因此两种页面内容都能看到。