学习权限按钮

在请求的用户菜单信息中，同时会有按钮的控制权限。

const userMenus = [
    //...
    {
        "id": 1,
        "name": "系统管理",
        "type": 1,
        "url": "/main/system",
        "icon": "el-icon-setting",
        "sort": 2,
        "children": [
            {
                "id": 3,
                "url": "/main/system/department",
                "name": "部门管理",
                "sort": 101,
                "type": 2,
                "children": [
                    {
                        "id": 17,
                        "url": null,
                        "name": "创建部门",
                        "sort": null,
                        "type": 3,
                        "parentId": 3,
                        "permission": "system:department:create"
                    },
                    {
                        "id": 18,
                        "url": null,
                        "name": "删除部门",
                        "sort": null,
                        "type": 3,
                        "parentId": 3,
                        "permission": "system:department:delete"
                    },
                    {
                        "id": 19,
                        "url": null,
                        "name": "修改部门",
                        "sort": null,
                        "type": 3,
                        "parentId": 3,
                        "permission": "system:department:update"
                    },
                    {
                        "id": 20,
                        "url": null,
                        "name": "查询部门",
                        "sort": null,
                        "type": 3,
                        "parentId": 3,
                        "permission": "system:department:query"
                    }
                ],
                "parentId": 1
            },
        ],
        //......
    }
]

function mapMenusToPernission(menus: any[]) {
  const permissions: string[] = []
  function recurseGetPermission(menu:any[]) {
    for (const item of menu) {
      if (item.type === 3) {
        permissions.push(item.permission)
      } else {
        recurseGetPermission(item.children ?? [])
      }
    }
  }
  recurseGetPermission(menus)
  return permissions
}

//获取登录用户的所有按钮权限
const permission = mapMenusToPernission(this.userMenus)

<template>
  <div class="content">
    <el-button v-if="isCreate">新建部门</el-button>
    <el-button v-if="isUpdate">编辑</el-button>
    <el-button v-if="isDelete">删除</el-button>
  </div>
</template>

<script setup lang="ts">
import useLoginStore from '@/stores/login';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';

const loginStore = useLoginStore()
const {permissions} = storeToRefs(loginStore)

//一进入页面就判断是否有对应的增删改查权限

const isCreate = permissions.value.find((item) => item.includes('department:create'))
const isDelete = permissions.value.find((item) => item.includes('department:delete'))
const isUpdate = permissions.value.find((item) => item.includes('department:update'))
const isQuery = permissions.value.find((item) => item.includes('department:query'))

</script>