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

努力进阶的快快~

于 2023-07-06 09:24:49 发布

阅读量305

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3 antd 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_69439101/article/details/131568455

vue3 同时被 2 个专栏收录

20 篇文章

订阅专栏

antd

12 篇文章

订阅专栏

此段代码展示了如何在Vue应用中使用权限管理组件，限制只有具有特定权限（如admin或admin和form）的用户才能查看特定内容，如卡片信息和表单。当用户权限更改时，页面展示的内容会相应调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>

效果预览