前端权限控制菜单

结构部分

<template>
            <el-menu unique-opened router :default-active="route.path" :collapse="isCollapse" :collapse-transition='false'>
                <template v-for="(v) in MenuArr">
                    <el-menu-item v-if="!v.children" :index="v.path">
                        <el-icon>
                            <component :is="v.icon" />
                        </el-icon>
                        <template #title>{{ v.name }}</template>
                    </el-menu-item>
                    <el-sub-menu v-else :index="v.path">
                        <template #title>
                            <el-icon>
                                <component :is="v.icon" />
                            </el-icon>
                            <span>{{ v.name }}</span>
                        </template>
                        <el-menu-item-group v-for="(item, index) in v.children" :key="index">
                            <el-menu-item :index="item.path">{{ item.name }}</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                </template>
            </el-menu>
</template>

逻辑部分

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import type { Menu } from '@/interface/interface'
import { useRoute } from 'vue-router';

const isCollapse = ref(false)

const route = useRoute()

const MenuList = reactive<Array<Menu>>([
    { name: '后台首页', icon: 'HomeFilled', path: '/index/index', role: ["super", "normal"], },
    { name: '订单管理', icon: 'List', path: '/order/order', role: ["super", "normal"], },
    {
        name: '商品管理', icon: 'GoodsFilled', path: '/goods', role: ["super", "normal"], children: [
            { name: '商品列表', path: '/goods/list' },
            { name: '商品添加', path: '/goods/add' },
            { name: '商品分类', path: '/goods/category' },
        ]
    },
    { name: '店铺管理', icon: 'Shop', path: '/shop', role: ["super"], },
    {
        name: '账号管理', icon: 'UserFilled', path: '/user', role: ["super"], children: [
            { name: '账号列表', path: '/user/list' },
            { name: '账号添加', path: '/user/add' },
            { name: '修改密码', path: '/user/pass' },
        ]
    },
    {
        name: '销售统计', icon: 'PieChart', path: '/sale', role: ["super"], children: [
            // 商品统计
            { name: '商品统计', path: '/sale/goods' },
            // 订单统计
            { name: '订单统计', path: '/sale/order' },
        ]
    },
])
// 计算属性 计算用户角色与菜单相匹配的数组
let MenuArr = computed(() => {
    let arr = MenuList.filter(v => {
        return v.role.includes(localStorage.role)
    })
    return arr
})
</script>