菜单权限和路由权限

1.菜单权限

1.1定义全部菜单

//定义全部菜单
export const allMenus = [
    {
        id: "1",
        title: "aa首页",
        path: "/Admin/Home"
    },
    {
        id: "2",
        title: "bb管理",
        children: [
            {
                id: "2-1",
                title: "bb列表",
                path: "/Admin/Banners"
            }
        ]
    },
    {
        id: "3",
        title: "cc管理",
        children: [
            {
                id: "3-1",
                title: "cc列表",
                path: "/Admin/PersonList"
            }
        ]
    },
    {
        id: "4",
        title: "dd管理",
        children: [
            {
                id: "4-1",
                title: "dd1列表",
                path: "/Admin/GoodsList"
            },
            {
                id: "4-2",
                title: "dd2列表",
                path: "/Admin/SecondKill"
            },
            {
                id: "4-3",
                title: "dd3列表",
                path: "/Admin/RecommendList"
            },
            {
                id: "4-4",
                title: "dd4列表",
                path: "/Admin/FilterList"
            },
            {
                id: "4-5",
                title: "dd5详情",
                isShow:false,
                path: "/Admin/GoodsDetail"
            },
            {
                id: "4-6",
                title: "dd6列表",
                isShow:false,
                path: "/Admin/OrderList"
            }
        ]
    },
    {
        id: "5",
        title: "数据统计",
        children: [
            {
                id: "5-1",
                title: "ee1图",
                path: "/Admin/KLineChart"
            },
            {
                id: "5-2",
                title: "ee2图",
                path: "/Admin/BarChart"
            }
        ]
    },
    {
        id: "6",
        title: "ff列表",
        path: "/Admin/Citys"
        
    }
]

1.2根据当前用户的权限，得到对应的菜单

// 1、根据当前用户的权限，得到对应的菜单
import { allMenus } from "./data";

export function getCurrentMenus() {
    let checkedkeys: string[] = JSON.parse(sessionStorage.getItem("checkedkeys") as string);
    let adminname = sessionStorage.getItem("adminname");
    if (adminname === "admin") {
        return allMenus
    };
    let currMenus = [];
    // 1、循环外层
    allMenus.forEach(item => {
        if (checkedkeys?.includes(item.id)) {
            let objMenu = { ...item };
            if (item.children) {
                objMenu.children = [];
                // 2、循环第二层
                item.children.forEach(sonItem => {
                    if (checkedkeys.includes(sonItem.id)) {
                        objMenu.children.push({ ...sonItem });
                    }
                })
            }
            currMenus.push(objMenu);
        }
    })
    console.log("currMenus", currMenus);
    return currMenus;
}

1.3显示菜单

<template>
  <div>
    <el-menu active-text-color="#ffd04b" background-color="#545c64" :router="true" class="el-menu-vertical-demo" default-active="2"
      text-color="#fff" @open="handleOpen" @close="handleClose">
      <template v-for="item in currMenus" :key="item.id">
            <el-menu-item v-if="item.path" :index="item.path">
                <el-icon>
                    <FolderAdd />
                </el-icon>
                <span>{{ item.title }}</span>
            </el-menu-item>
            <el-sub-menu v-if="item.children" :index="item.id">
                <template #title>
                    <el-icon>
                        <FolderAdd />
                    </el-icon>
                    <span>{{ item.title }}</span>
                </template>
                <el-menu-item v-for="sonItem in item.children" :key="sonItem.id" :index="sonItem.path">
                    <el-icon>
                        <Document />
                    </el-icon>
                    <span>{{ sonItem.title }}</span>
                </el-menu-item>
            </el-sub-menu>
        </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import {
    Document,
   FolderAdd 
} from '@element-plus/icons-vue';

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

import {getCurrentMenus} from "@/grant/index.ts"
const currMenus = getCurrentMenus();

</script>

2.路由权限

2.1定义权限相关路由配置

//定义权限相关路由配置
export const allroutes = [
    {
        id: "1",
        name: "Home",
        path: "",
        redirect: "/Admin/Home"
    },
    {
        id: "1",
        name: "Home",
        path: "Home",
        component: () => import("../views/Admin/Home/index.vue")
    },
    {
        id: "2-1",
        name: "Banners",
        path: "Banners",
        component: () => import("../views/Admin/Banners/index.vue")
    },
    {
        id: "3-1",
        name: "PersonList",
        path: "PersonList",
        component: () => import("../views/Admin/Person/PersonList.vue")
    },
    {
        id: "4-1",
        name: "GoodsList",
        path: "GoodsList",
        component: () => import("../views/Admin/Goods/GoodsList.vue")
    },
    {
        id: "4-2",
        name: "SecondKill",
        path: "SecondKill",
        component: () => import("../views/Admin/Goods/SecondKill.vue")
    },
    {
        id: "4-3",
        name: "RecommendList",
        path: "RecommendList",
        component: () => import("../views/Admin/Goods/RecommendList.vue")
    },
    {
        id: "4-4",
        name: "FilterList",
        path: "FilterList",
        component: () => import("../views/Admin/Goods/FilterList.vue")
    },
    {
        id: "4-5",
        name: "GoodsDetail",
        path: "GoodsDetail",
        component: () => import("../views/Admin/Goods/GoodsDetail.vue")
    },
    
    {
        id: "4-6",
        name: "OrderList",
        path: "OrderList",
        component: () => import("../views/Admin/Goods/OrderList.vue")
    },
    {
        id: "5-1",
        name: "KLineChart",
        path: "KLineChart",
        component: () => import("../views/Admin/Total/KLineChart.vue")
    },
    {
        id: "5-2",
        name: "BarChart",
        path: "BarChart",
        component: () => import("../views/Admin/Total/BarChart.vue")
    },
    {
        id: "6",
        name: "Citys",
        path: "Citys",
        component: () => import("../views/Admin/Citys/index.vue")
    }
]

2.2获取路由

//获取路由配置
import { allMenus, allroutes } from "./data";

function getAllCheckedKeys() {
    let arr = [];
    allMenus.forEach(item => {
        arr.push(item.id);
        if (item.children && Array.isArray(item.children)) {
            item.children.forEach(sonItem => {
                arr.push(sonItem.id);
            })
        }
    })
    return arr;
}

export function getCurrentRoutes($router) {
    console.log("getCurrentRoutes()");
    let adminname = sessionStorage.getItem("adminname");
    let checkedkeys: string[] = JSON.parse(sessionStorage.getItem("checkedkeys") as string);
    if (!checkedkeys) {
        return;
    }
    if (checkedkeys.length == 0) {
        // checkedkeys = getAllCheckedKeys();
        checkedkeys = ["1", '2', "2-1", "3-1", "4-1", "4-2", "4-3", "4-4", "5-1", "5-2", "6"]
    }
    // 1、删除所有的路由（权限相关的路由）
    allroutes.forEach(item => {
        $router.removeRoute(item.name);
    })
    console.log("删除路由后：$router.getRoutes()", $router.getRoutes());

    // 2、添加有权限的路由
    allroutes.forEach(item => {
        if (checkedkeys?.includes(item.id)) {
            $router.addRoute("Admin", { ...item });
        }
    })
    console.log("$router.getRoutes()", $router.getRoutes());
}

2.3登陆后进入布局layout页面

<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <h1>后台管理系统
                    <router-link to="/Login">
                        <span class="login">
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                            退出登录
                        </span></router-link>
                    <span class="username">欢迎：{{ adminname }}</span>
                </h1>
            </el-header>
            <el-container class="container-main">
                <el-aside width="240px">
                    <Menu></Menu>
                </el-aside>
                <el-main>
                    <BreadCrumb></BreadCrumb>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script  setup lang="ts">
import Menu from "./Menu.vue"
import BreadCrumb from "./BreadCrumb.vue";
import { useRouter } from 'vue-router';
import { getCurrentRoutes } from "@/grant";
import { UserFilled} from '@element-plus/icons-vue';
const $router = useRouter();
getCurrentRoutes($router);
const adminname = sessionStorage.getItem("adminname")
</script>

3.解决刷新时路由丢失问题(main.js)

import { getCurrentRoutes } from './grant';

// 解决刷新时，路由配置丢失的问题；
// 当刷新（刷新时，sessionStorage中是有权限数据的）时，需要重新添加权限路由
if(sessionStorage.getItem("checkedkeys")){
    // 刷新时
    getCurrentRoutes(router);
}

4.角色label与value值转换

export const roles = [
    {
        label:"超级管理员",
        value:0
    },
    {
        label:"管理员",
        value:1
    },
    {
        label:"其他",
        value:2
    }
]

//roleId和value转换
 <el-table-column label="角色" width="180">
   <template #default="scope">
     <div style="display: flex; align-items: center">                
       <span style="margin-left: 10px">{{ roles.filter(item => item.value == scope.row.role)[0]?.label }}</span>
     </div>
   </template>
</el-table-column>

5.自定义hooks函数

export function usePersonList() {
    const person: IPerson[] = reactive([]);
    // 获取操作人员列表
    const getPersonList = () => {
        getPersonListApi()
            .then((res: any) => {
                if (res.data.code === "200") {
                    person.length = 0;
                    person.push(...res.data.data);    
                }
            })
    }
    getPersonList();
    return {person,getPersonList};
}

//引入外部自定义hooks函数并使用
import { usePersonList } from "./PersonList"
const { person, getPersonList } = usePersonList();