Vue项目权限控制

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"

// 静态路由
const routes: RouteRecordRaw[] = [
    {
        name: "home",
        path: "/",
        meta: { label: "首页" },
        component: () => import("../pages/home.vue"),
    },
    {
        name: "login",
        path: "/login",
        meta: { label: "登录" },
        component: () => import("../pages/login.vue"),
    },

    {
        name: "disboard",
        path: "/disboard",
        meta: { label: "工作台" },
        component: () => import("../pages/disboard.vue"),
    },
]

// 动态路由
const dynamicRoutes: RouteRecordRaw[] = [
    {
        name: "list",
        path: "/list",
        meta: { label: "列表", roles: ["admin", "user"] },
        component: () => import("../pages/list.vue"),
    },
    {
        name: "about",
        path: "/about",
        meta: { label: "关于", roles: ["admin", "user"] },
        component: () => import("../pages/about.vue"),
    },
    {
        name: "user",
        path: "/user",
        meta: { label: "用户", roles: ["admin", "user"] },
        component: () => import("../pages/user.vue"),
        children: [
            {
                name: "user-info",
                path: "/user/info",
                meta: { label: "用户info", roles: ["admin", "user"] },
                component: () => import("../pages/user-info.vue"),
                children: [
                    {
                        name: "user-info.a",
                        path: "/user/info/a",
                        meta: { label: "用户info.a", roles: ["admin", "user"] },
                        component: () => import("../pages/user-info-a.vue"),
                    },
                    {
                        name: "user-info.b",
                        path: "/user/info/b",
                        meta: { label: "用户info.b", roles: ["admin", "user"] },
                        component: () => import("../pages/user-info-b.vue"),
                    },
                ],
            },
            {
                name: "user-orders",
                path: "/user/orders",
                meta: { label: "用户orders", roles: ["user"] },
                component: () => import("../pages/user-orders.vue"),
            },
        ],
    },
]

// routes 扁平化处理
function loopRoutes(routes: RouteRecordRaw[], role: string = "") {
    const result: RouteRecordRaw[] = []
    const loopChildren = (children: RouteRecordRaw[] = [], parent: string = "") => {
        children.forEach((item) => {
            if (item.children) {
                const { children, ...rest } = item
                if (!rest.meta?.roles || (rest.meta?.roles as string[]).includes(role)) {
                    result.push(rest)
                    if (!router.hasRoute(item.name!)) {
                        if (parent) {
                            router.addRoute(parent, rest)
                        }
                        else {
                            router.addRoute(rest)
                        }
                    }
                }
                loopChildren(children, rest.name as string)
            }
            else {
                // meta信息中没有roles或者meta信息中roles包含当前登录用户的role
                if (!item.meta?.roles || (item.meta?.roles as string[]).includes(role)) {
                    result.push(item)
                    if (!router.hasRoute(item.name!)) {
                        if (parent) {
                            // 有父级
                            router.addRoute(parent, item)
                        }
                        else {
                            router.addRoute(item)
                        }
                    }
                }
            }
        })
    }
    loopChildren(dynamicRoutes)
    console.log(result)
    return [...routes, ...result].filter(item => item.name !== "login")
}

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router

export { loopRoutes, routes }