usePermission

usePermission 权限控制

所有权限：[ "Add", "Edit", "Delete" ]

拥有权限：[ "Add", "Edit" ]

Add

Edit

实现代码

<template>
  <div>
    <div>所有权限：{{ allCodeList }}</div>
    <div>拥有权限：{{ codeList }}</div>
    <br />
    <div v-for="(code, index) in allCodeList" :key="index">
      <br />
      <Tag color="blue" v-if="hasPermission(code, codeList)">{{ code }}</Tag>
      <Button type="primary" size="small" @click="changePermission(code, index)"
        >{{ !hasPermission(code, codeList) ? '显示' : '隐藏' }}（{{
          code
        }}）权限</Button
      >
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Tag, Button } from '@aplus-frontend/antdv';
import { usePermission } from './index';
const { hasPermission } = usePermission();
const allCodeList = ref(['Add', 'Edit', 'Delete']);
const codeList = ref(['Add', 'Edit']);
const changePermission = (code: string) => {
  if (codeList.value.includes(code)) {
    let index = codeList.value.findIndex((codeItem) => codeItem === code);
    codeList.value.splice(index, 1);
  } else {
    codeList.value.push(code);
  }
};
</script>

import { Tag } from '@aplus-frontend/antdv';
import { usePermission } from './index';
const { hasPermission } = usePermission();

Type Declarations

type permissionCode = string;
type permissionCodeList = Array<permissionCode>;
function getPermission(aplusPermissionCode: permissionCode): permissionCodeList
function hasPermission(value: permissionCode | permissionCodeList, codeAllList?: permissionCodeList): boolean
function usePermission(): {
    getPermission: (aplusPermissionCode: permissionCode) => permissionCodeList;
    hasPermission: (value: permissionCode | permissionCodeList, codeAllList?: permissionCodeList) => boolean;
}