路由json
{
"code": "00000",
"data": [
{
"path": "/system",
"component": "Layout",
"redirect": "/system/user",
"name": "/system",
"meta": {
"title": "系统管理",
"icon": "system",
"hidden": false,
"roles": [
"ADMIN"
]
},
"children": [
{
"path": "user",
"component": "system/user/index",
"name": "User",
"meta": {
"title": "用户管理",
"icon": "user",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
}
},
{
"path": "role",
"component": "system/role/index",
"name": "Role",
"meta": {
"title": "角色管理",
"icon": "role",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
}
},
{
"path": "menu",
"component": "system/menu/index",
"name": "Menu",
"meta": {
"title": "菜单管理",
"icon": "menu",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
}
},
{
"path": "dept",
"component": "system/dept/index",
"name": "Dept",
"meta": {
"title": "部门管理",
"icon": "tree",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
}
},
{
"path": "dict",
"component": "system/dict/index",
"name": "Dict",
"meta": {
"title": "字典管理",
"icon": "dict",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
}
}
]
},
{
"path": "/api",
"component": "Layout",
"name": "/api",
"meta": {
"title": "接口文档",
"icon": "api",
"hidden": false,
"roles": [
"ADMIN"
],
"alwaysShow": true
},
"children": [
{
"path": "apifox",
"component": "demo/api/apifox",
"name": "Apifox",
"meta": {
"title": "Apifox",
"icon": "api",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
}
},
{
"path": "swagger",
"component": "demo/api/swagger",
"name": "Swagger",
"meta": {
"title": "Swagger",
"icon": "api",
"hidden": true,
"roles": [
"ADMIN"
],
"keepAlive": true
}
},
{
"path": "knife4j",
"component": "demo/api/knife4j",
"name": "Knife4j",
"meta": {
"title": "Knife4j",
"icon": "api",
"hidden": true,
"roles": [
"ADMIN"
],
"keepAlive": true
}
}
]
},
{
"path": "/doc",
"component": "Layout",
"name": "/doc",
"meta": {
"title": "平台文档",
"icon": "document",
"hidden": false,
"roles": [
"ADMIN"
]
},
"children": [
{
"path": "internal-doc",
"component": "demo/internal-doc",
"name": "InternalDoc",
"meta": {
"title": "平台文档(内嵌)",
"icon": "document",
"hidden": false,
"roles": [
"ADMIN"
]
}
},
{
"path": "https://juejin.cn/post/7228990409909108793",
"name": "Https://juejin.cn/post/7228990409909108793",
"meta": {
"title": "平台文档(外链)",
"icon": "link",
"hidden": false,
"roles": [
"ADMIN"
]
}
}
]
},
{
"path": "/multi-level",
"component": "Layout",
"redirect": "/multi-level/multi-level1",
"name": "/multiLevel",
"meta": {
"title": "多级菜单",
"icon": "cascader",
"hidden": false,
"roles": [
"ADMIN"
]
},
"children": [
{
"path": "multi-level1",
"component": "demo/multi-level/level1",
"redirect": "/multi-level/multi-level2",
"name": "MultiLevel1",
"meta": {
"title": "菜单一级",
"icon": "",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
},
"children": [
{
"path": "multi-level2",
"component": "demo/multi-level/children/level2",
"redirect": "/multi-level/multi-level2/multi-level3-1",
"name": "MultiLevel2",
"meta": {
"title": "菜单二级",
"icon": "",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
},
"children": [
{
"path": "multi-level3-1",
"component": "demo/multi-level/children/children/level3-1",
"name": "MultiLevel31",
"meta": {
"title": "菜单三级-1",
"icon": "",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
}
},
{
"path": "multi-level3-2",
"component": "demo/multi-level/children/children/level3-2",
"name": "MultiLevel32",
"meta": {
"title": "菜单三级-2",
"icon": "",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
}
}
]
}
]
}
]
},
{
"path": "/component",
"component": "Layout",
"name": "/component",
"meta": {
"title": "组件封装",
"icon": "menu",
"hidden": false,
"roles": [
"ADMIN"
]
},
"children": [
{
"path": "wang-editor",
"component": "demo/wang-editor",
"name": "WangEditor",
"meta": {
"title": "富文本编辑器",
"icon": "",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
}
},
{
"path": "upload",
"component": "demo/upload",
"name": "Upload",
"meta": {
"title": "图片上传",
"icon": "",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
}
},
{
"path": "icon-selector",
"component": "demo/icon-selector",
"name": "IconSelector",
"meta": {
"title": "图标选择器",
"icon": "",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
}
},
{
"path": "dict-demo",
"component": "demo/dict",
"name": "DictDemo",
"meta": {
"title": "字典组件",
"icon": "",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
}
},
{
"path": "signature",
"component": "demo/signature",
"name": "Signature",
"meta": {
"title": "签名",
"icon": "",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
}
},
{
"path": "table",
"component": "demo/table",
"name": "Table",
"meta": {
"title": "表格",
"icon": "",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
}
}
]
},
{
"path": "/function",
"component": "Layout",
"name": "/function",
"meta": {
"title": "功能演示",
"icon": "menu",
"hidden": false,
"roles": [
"ADMIN"
]
},
"children": [
{
"path": "icon-demo",
"component": "demo/icons",
"name": "IconDemo",
"meta": {
"title": "Icons",
"icon": "el-icon-edit",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
}
},
{
"path": "/function/websocket",
"component": "demo/websocket",
"name": "/function/websocket",
"meta": {
"title": "Websocket",
"icon": "",
"hidden": false,
"roles": [
"ADMIN"
],
"keepAlive": true
}
},
{
"path": "other",
"component": "demo/other",
"name": "Other",
"meta": {
"title": "敬请期待...",
"icon": "",
"hidden": false,
"roles": [
"ADMIN"
]
}
}
]
}
],
"msg": "一切ok"
}
store/permission.ts
import { RouteRecordRaw } from "vue-router";
import { defineStore } from "pinia";
import { constantRoutes } from "@/router";
import { store } from "@/store";
import { listRoutes } from "@/api/menu";
const modules = import.meta.glob("../../views/**/**.vue");
const Layout = () => import("@/layout/index.vue");
/**
* Use meta.role to determine if the current user has permission
*
* @param roles 用户角色集合
* @param route 路由
* @returns
*/
const hasPermission = (roles: string[], route: RouteRecordRaw) => {
if (route.meta && route.meta.roles) {
// 角色【超级管理员】拥有所有权限，忽略校验
if (roles.includes("ROOT")) {
return true;
}
return roles.some((role) => {
if (route.meta?.roles) {
return route.meta.roles.includes(role);
}
});
}
return false;
};
/**
* 递归过滤有权限的异步(动态)路由
*
* @param routes 接口返回的异步(动态)路由
* @param roles 用户角色集合
* @returns 返回用户有权限的异步(动态)路由
*/
const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
const asyncRoutes: RouteRecordRaw[] = [];
routes.forEach((route) => {
const tmpRoute = { ...route }; // ES6扩展运算符复制新对象
if (!route.name) {
tmpRoute.name = route.path;
}
// 判断用户(角色)是否有该路由的访问权限
if (hasPermission(roles, tmpRoute)) {
if (tmpRoute.component?.toString() == "Layout") {
tmpRoute.component = Layout;
} else {
const component = modules[`../../views/${tmpRoute.component}.vue`];
if (component) {
tmpRoute.component = component;
} else {
tmpRoute.component = modules[`../../views/error-page/404.vue`];
}
}
if (tmpRoute.children) {
tmpRoute.children = filterAsyncRoutes(tmpRoute.children, roles);
}
asyncRoutes.push(tmpRoute);
}
});
return asyncRoutes;
};
// setup
export const usePermissionStore = defineStore("permission", () => {
// state
const routes = ref<RouteRecordRaw[]>([]);
// actions
function setRoutes(newRoutes: RouteRecordRaw[]) {
routes.value = constantRoutes.concat(newRoutes);
}
/**
* 生成动态路由
*
* @param roles 用户角色集合
* @returns
*/
function generateRoutes(roles: string[]) {
return new Promise<RouteRecordRaw[]>((resolve, reject) => {
// 接口获取所有路由
listRoutes()
.then(({ data: asyncRoutes }) => {
// 根据角色获取有访问权限的路由
const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
setRoutes(accessedRoutes);
resolve(accessedRoutes);
})
.catch((error) => {
reject(error);
});
});
}
/**
* 混合模式左侧菜单
*/
const mixLeftMenu = ref<RouteRecordRaw[]>([]);
function getMixLeftMenu(activeTop: string) {
routes.value.forEach((item) => {
if (item.path === activeTop) {
mixLeftMenu.value = item.children || [];
}
});
}
return { routes, setRoutes, generateRoutes, getMixLeftMenu, mixLeftMenu };
});
// 非setup
export function usePermissionStoreHook() {
return usePermissionStore(store);
}
src/permission.ts
import router from "@/router";
import { useUserStoreHook } from "@/store/modules/user";
import { usePermissionStoreHook } from "@/store/modules/permission";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
NProgress.configure({ showSpinner: false }); // 进度条
const permissionStore = usePermissionStoreHook();
// 白名单路由
const whiteList = ["/login"];
router.beforeEach(async (to, from, next) => {
NProgress.start();
const hasToken = localStorage.getItem("accessToken");
if (hasToken) {
if (to.path === "/login") {
// 如果已登录，跳转首页
next({ path: "/" });
NProgress.done();
} else {
const userStore = useUserStoreHook();
const hasRoles = userStore.user.roles && userStore.user.roles.length > 0;
if (hasRoles) {
// 未匹配到任何路由，跳转404
if (to.matched.length === 0) {
from.name ? next({ name: from.name }) : next("/404");
} else {
next();
}
} else {
try {
const { roles } = await userStore.getUserInfo();
//接口取菜单页可以写死
const accessRoutes = await permissionStore.generateRoutes(roles);
accessRoutes.forEach((route) => {
router.addRoute(route);
});
next({ ...to, replace: true });
} catch (error) {
// 移除 token 并跳转登录页
await userStore.resetToken();
next(`/login?redirect=${to.path}`);
NProgress.done();
}
}
}
} else {
// 未登录可以访问白名单页面
if (whiteList.indexOf(to.path) !== -1) {
next();
} else {
next(`/login?redirect=${to.path}`);
NProgress.done();
}
}
});
router.afterEach(() => {
NProgress.done();
});
main.ts
import "@/permission";
src/layout/index.vue
<script setup lang="ts">
import Main from "./main.vue";
import { computed, watchEffect } from "vue";
import { useWindowSize } from "@vueuse/core";
import Sidebar from "./components/Sidebar/index.vue";
import LeftMenu from "./components/Sidebar/LeftMenu.vue";
import { useAppStore } from "@/store/modules/app";
import { useSettingsStore } from "@/store/modules/settings";
import { usePermissionStore } from "@/store/modules/permission";
const permissionStore = usePermissionStore();
const { width } = useWindowSize();
/**
* 响应式布局容器固定宽度
*
* 大屏（>=1200px）
* 中屏（>=992px）
* 小屏（>=768px）
*/
const WIDTH = 992;
const appStore = useAppStore();
const settingsStore = useSettingsStore();
const activeTopMenu = computed(() => {
return appStore.activeTopMenu;
});
// 混合模式左侧菜单
const mixLeftMenu = computed(() => {
return permissionStore.mixLeftMenu;
});
const layout = computed(() => settingsStore.layout);
const watermarkEnabled = computed(() => settingsStore.watermark.enabled);
watch(
() => activeTopMenu.value,
(newVal) => {
if (layout.value !== "mix") return;
permissionStore.getMixLeftMenu(newVal);
},
{
deep: true,
immediate: true,
}
);
const classObj = computed(() => ({
hideSidebar: !appStore.sidebar.opened,
openSidebar: appStore.sidebar.opened,
withoutAnimation: appStore.sidebar.withoutAnimation,
mobile: appStore.device === "mobile",
isTop: layout.value === "top",
isMix: layout.value === "mix",
}));
watchEffect(() => {
if (width.value < WIDTH) {
appStore.toggleDevice("mobile");
appStore.closeSideBar(true);
} else {
appStore.toggleDevice("desktop");
if (width.value >= 1200) {
//大屏
appStore.openSideBar(true);
} else {
appStore.closeSideBar(true);
}
}
});
function handleOutsideClick() {
appStore.closeSideBar(false);
}
function toggleSideBar() {
appStore.toggleSidebar();
}
</script>
<template>
<div :class="classObj" class="app-wrapper">
<!-- 手机设备侧边栏打开遮罩层 -->
<div
v-if="classObj.mobile && classObj.openSidebar"
class="drawer__background"
@click="handleOutsideClick"
></div>
<Sidebar class="sidebar-container" />
<div v-if="layout === 'mix'" class="mix-wrapper">
<div class="mix-wrapper__left">
<LeftMenu :menu-list="mixLeftMenu" :base-path="activeTopMenu" />
<!-- 展开/收缩侧边栏菜单 -->
<div class="toggle-sidebar">
<hamburger
:is-active="appStore.sidebar.opened"
@toggle-click="toggleSideBar"
/>
</div>
</div>
<Main />
</div>
<Main v-else />
</div>
</template>
<style lang="scss" scoped>
.app-wrapper {
&::after {
display: table;
clear: both;
content: "";
}
position: relative;
width: 100%;
height: 100%;
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
.drawer__background {
position: absolute;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
background: #000;
opacity: 0.3;
}
// 导航栏顶部显示
.isTop {
.sidebar-container {
z-index: 800;
display: flex;
width: 100% !important;
height: 50px;
:deep(.logo-wrap) {
width: $sideBarWidth;
}
:deep(.el-scrollbar) {
flex: 1;
min-width: 0;
height: 50px;
}
}
.main-container {
padding-top: 50px;
margin-left: 0;
overflow: hidden;
}
// 顶部模式全局变量修改
--el-menu-item-height: 50px;
}
.mobile.isTop {
:deep(.logo-wrap) {
width: 63px;
}
}
.isMix {
:deep(.main-container) {
display: inline-block;
width: calc(100% - #{$sideBarWidth});
margin-left: 0;
}
.mix-wrapper {
display: flex;
height: 100%;
padding-top: 50px;
.mix-wrapper__left {
position: relative;
height: 100%;
.el-menu {
height: 100%;
}
.toggle-sidebar {
position: absolute;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
line-height: 50px;
box-shadow: 0 0 6px -2px var(--el-color-primary);
div:hover {
background-color: var(--menuBg);
}
:deep(svg) {
color: #409eff !important;
}
}
}
.main-container {
flex: 1;
min-width: 0;
}
}
}
.openSidebar {
.mix-wrapper {
.mix-wrapper__left {
width: $sideBarWidth;
}
:deep(.svg-icon) {
margin-top: -1px;
margin-right: 5px;
}
.el-menu {
border: none;
}
}
}
</style>
siderBar.vue
<script setup lang="ts">
import TopMenu from "./TopMenu.vue";
import LeftMenu from "./LeftMenu.vue";
import Logo from "./Logo.vue";
import { useSettingsStore } from "@/store/modules/settings";
import { usePermissionStore } from "@/store/modules/permission";
import { useAppStore } from "@/store/modules/app";
import { storeToRefs } from "pinia";
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
const appStore = useAppStore();
const { sidebarLogo } = storeToRefs(settingsStore);
const layout = computed(() => settingsStore.layout);
const showContent = ref(true);
watch(
() => layout.value,
() => {
showContent.value = false;
nextTick(() => {
showContent.value = true;
});
}
);
</script>
<template>
<div
:class="{ 'has-logo': sidebarLogo }"
class="menu-wrap"
v-if="layout !== 'mix'"
>
<logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
<el-scrollbar v-if="showContent">
<LeftMenu :menu-list="permissionStore.routes" base-path="" />
</el-scrollbar>
<NavRight v-if="layout === 'top'" />
</div>
<template v-else>
<div :class="{ 'has-logo': sidebarLogo }" class="menu-wrap">
<div class="header">
<logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
<TopMenu />
<NavRight />
</div>
</div>
</template>
</template>
<style lang="scss" scoped>
:deep(.setting-container) {
.setting-item {
color: #fff;
.svg-icon {
margin-right: 0;
}
&:hover {
color: var(--el-color-primary);
}
}
}
.isMix {
.menu-wrap {
z-index: 99;
width: 100% !important;
height: 50px;
background-color: $menuBg;
:deep(.header) {
display: flex;
width: 100%;
// 顶部模式全局变量修改
--el-menu-item-height: 50px;
.logo-wrap {
width: $sideBarWidth;
}
.el-menu {
background-color: $menuBg;
.el-menu-item {
color: $menuText;
}
}
.el-scrollbar {
flex: 1;
min-width: 0;
height: 50px;
}
}
}
.left-menu {
display: inline-block;
width: $sideBarWidth;
background-color: $menuBg;
:deep(.el-menu) {
background-color: $menuBg;
.el-menu-item {
color: $menuText;
}
}
}
}
</style>
后台管理 动态获取菜单例子
于 2023-12-27 10:09:12 首次发布
900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
