VUE3后台管理系统【路由鉴权】

🌏前言：

在“VUE3后台管理系统【模板构建】”文章中，详细的介绍了我使用vue3.0和vite2.0构建的后台管理系统，虽然只是简单的一个后台管理系统，其中涉及的技术基本都覆盖了，基于vue3的vue-router和vuex，以及借助第三方开源插件来实现vuex数据持久化。前边只是介绍了vue后台管理系统的页面布局，以及一些常用的插件的使用，如：富文本编辑器、视频播放器、页面滚动条美化(前边忘记介绍了，此次文章中将会进行添加和补充)。
本次文章主要介绍的是vue-router的动态匹配和动态校验，来实现不同账号不同权限，通过前端来对用户权限进行相应的限制；在一些没有访问权限的路径下访问时给予相应的提示以及后续相应的跳转复原等逻辑操作。用户鉴权，前端可以进行限制，也可以通过后台接口数据进行限制，之前开发过程中遇到过通过后台接口来动态渲染路由的，接下来介绍的是纯前端来做路由访问的限制。

🏀路由配置：

import Layout from "../layout/Index.vue";
import RouteView from "../components/RouteView.vue";

const layoutMap = [
    {
        path: "/",
        name: "Index",
        meta: { title: "控制台", icon: "home" },
        component: () => import("../views/Index.vue")
    },
    {
        path: "/data",
        meta: { title: "数据管理", icon: "database" },
        component: RouteView,
        children: [
            {
                path: "/data/list",
                name: "DataList",
                meta: { title: "数据列表", roles: ["admin"] },
                component: () => import("../views/data/List.vue")
            },
            {
                path: "/data/table",
                name: "DataTable",
                meta: { title: "数据表格" },
                component: () => import("../views/data/Table.vue")
            }
        ]
    },
    {
        path: "/admin",
        meta: { title: "用户管理", icon: "user" },
        component: RouteView,
        children: [
            {
                path: "/admin/user",
                name: "AdminAuth",
                meta: { title: "用户列表", roles: ["admin"] },
                component: () => import("../views/admin/AuthList.vue")
            },
            {
                path: "/admin/role",
                name: "AdminRole",
                meta: { title: "角色列表" },
                component: () => import("../views/admin/RoleList.vue")
            }
        ]
    },
    {
        path: "user",
        name: "User",
        hidden: true /* 不在侧边导航展示 */,
        meta: { title: "个人中心" },
        component: () => import("../views/admin/User.vue")
    },
    {
        path: "/error",
        name: "NotFound",
        hidden: true,
        meta: { title: "Not Found" },
        component: () => import("../components/NotFound.vue")
    }
];

const routes = [
    {
        path: "/login",
        name: "Login",
        meta: { title: "用户登录" },
        component: () => import("../views/Login.vue")
    },
    {
        path: "/",
        component: Layout,
        children: [...layoutMap]
    },
    { path: "/*", redirect: { name: "NotFound" } }
];

export { routes, layoutMap };

注：

• 此次路由列表分为两部分，其中一部分是默认路由，即无需权限校验的路由路径(如：Login登录页)