删除系统首页菜单栏，首页显示需要auth
This commit is contained in:
parent
bc705207dc
commit
5c33734de2
|
|
@ -42,6 +42,7 @@ declare module '@vue/runtime-core' {
|
|||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElSlider: typeof import('element-plus/es')['ElSlider']
|
||||
ElStatistic: typeof import('element-plus/es')['ElStatistic']
|
||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
|
|
|
|||
|
|
@ -1,204 +1,216 @@
|
|||
<template>
|
||||
<div class="header">
|
||||
<!-- 折叠按钮 -->
|
||||
<div class="header-left">
|
||||
<img class="logo" src="../assets/img/logo.svg" alt="" />
|
||||
<div class="web-title">后台管理系统</div>
|
||||
<div class="collapse-btn" @click="collapseChage">
|
||||
<el-icon v-if="sidebar.collapse">
|
||||
<Expand />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<Fold />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="header-user-con">
|
||||
<div class="btn-icon" @click="router.push('/theme')">
|
||||
<el-tooltip effect="dark" content="设置主题" placement="bottom">
|
||||
<i class="el-icon-lx-skin"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="btn-icon" @click="router.push('/ucenter')">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="message ? `有${message}条未读消息` : `消息中心`"
|
||||
placement="bottom"
|
||||
>
|
||||
<i class="el-icon-lx-notice"></i>
|
||||
</el-tooltip>
|
||||
<span class="btn-bell-badge" v-if="message"></span>
|
||||
</div>
|
||||
<div class="btn-icon" @click="setFullScreen">
|
||||
<el-tooltip effect="dark" content="全屏" placement="bottom">
|
||||
<i class="el-icon-lx-full"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<!-- 用户头像 -->
|
||||
<el-avatar class="user-avator" :size="30" :src="imgurl" />
|
||||
<!-- 用户名下拉菜单 -->
|
||||
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
{{ username }}
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
|
||||
<el-dropdown-item>项目仓库</el-dropdown-item>
|
||||
</a>
|
||||
<a href="https://lin-xin.gitee.io/example/vuems-doc/" target="_blank">
|
||||
<el-dropdown-item>官方文档</el-dropdown-item>
|
||||
</a>
|
||||
<el-dropdown-item command="user">个人中心</el-dropdown-item>
|
||||
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<!-- 折叠按钮 -->
|
||||
<div class="header-left">
|
||||
<img class="logo" src="../assets/img/logo.svg" alt="" />
|
||||
<div class="web-title" @click="showDashboard">后台管理系统</div>
|
||||
<div class="collapse-btn" @click="collapseChage">
|
||||
<el-icon v-if="sidebar.collapse">
|
||||
<Expand />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<Fold />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="header-user-con">
|
||||
<div class="btn-icon" @click="router.push('/theme')">
|
||||
<el-tooltip effect="dark" content="设置主题" placement="bottom">
|
||||
<i class="el-icon-lx-skin"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="btn-icon" @click="router.push('/ucenter')">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="message ? `有${message}条未读消息` : `消息中心`"
|
||||
placement="bottom"
|
||||
>
|
||||
<i class="el-icon-lx-notice"></i>
|
||||
</el-tooltip>
|
||||
<span class="btn-bell-badge" v-if="message"></span>
|
||||
</div>
|
||||
<div class="btn-icon" @click="setFullScreen">
|
||||
<el-tooltip effect="dark" content="全屏" placement="bottom">
|
||||
<i class="el-icon-lx-full"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<!-- 用户头像 -->
|
||||
<el-avatar class="user-avator" :size="30" :src="imgurl" />
|
||||
<!-- 用户名下拉菜单 -->
|
||||
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
{{ username }}
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<a
|
||||
href="https://github.com/lin-xin/vue-manage-system"
|
||||
target="_blank"
|
||||
>
|
||||
<el-dropdown-item>项目仓库</el-dropdown-item>
|
||||
</a>
|
||||
<a
|
||||
href="https://lin-xin.gitee.io/example/vuems-doc/"
|
||||
target="_blank"
|
||||
>
|
||||
<el-dropdown-item>官方文档</el-dropdown-item>
|
||||
</a>
|
||||
<el-dropdown-item command="user">个人中心</el-dropdown-item>
|
||||
<el-dropdown-item divided command="loginout"
|
||||
>退出登录</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue';
|
||||
import { useSidebarStore } from '../store/sidebar';
|
||||
import { useRouter } from 'vue-router';
|
||||
import imgurl from '../assets/img/img.jpg';
|
||||
import { onMounted } from "vue";
|
||||
import { useSidebarStore } from "../store/sidebar";
|
||||
import { useRouter } from "vue-router";
|
||||
import imgurl from "../assets/img/img.jpg";
|
||||
|
||||
const username: string | null = localStorage.getItem('vuems_name');
|
||||
const username: string | null = localStorage.getItem("vuems_name");
|
||||
const message: number = 2;
|
||||
|
||||
const sidebar = useSidebarStore();
|
||||
// 侧边栏折叠
|
||||
const collapseChage = () => {
|
||||
sidebar.handleCollapse();
|
||||
sidebar.handleCollapse();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (document.body.clientWidth < 1500) {
|
||||
collapseChage();
|
||||
}
|
||||
if (document.body.clientWidth < 1500) {
|
||||
collapseChage();
|
||||
}
|
||||
});
|
||||
|
||||
// 用户名下拉菜单选择事件
|
||||
const router = useRouter();
|
||||
const showDashboard = () => {
|
||||
router.push("/");
|
||||
};
|
||||
const handleCommand = (command: string) => {
|
||||
if (command == 'loginout') {
|
||||
localStorage.removeItem('vuems_name');
|
||||
router.push('/login');
|
||||
} else if (command == 'user') {
|
||||
router.push('/ucenter');
|
||||
}
|
||||
if (command == "loginout") {
|
||||
localStorage.removeItem("vuems_name");
|
||||
router.push("/login");
|
||||
} else if (command == "user") {
|
||||
router.push("/ucenter");
|
||||
}
|
||||
};
|
||||
|
||||
const setFullScreen = () => {
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen();
|
||||
} else {
|
||||
document.body.requestFullscreen.call(document.body);
|
||||
}
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen();
|
||||
} else {
|
||||
document.body.requestFullscreen.call(document.body);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
color: var(--header-text-color);
|
||||
background-color: var(--header-bg-color);
|
||||
border-bottom: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
color: var(--header-text-color);
|
||||
background-color: var(--header-bg-color);
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 35px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.web-title {
|
||||
margin: 0 40px 0 10px;
|
||||
font-size: 22px;
|
||||
margin: 0 40px 0 10px;
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
font-size: 22px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.collapse-btn:hover {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
float: right;
|
||||
padding-right: 50px;
|
||||
float: right;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.header-user-con {
|
||||
display: flex;
|
||||
height: 70px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 70px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-fullscreen {
|
||||
transform: rotate(45deg);
|
||||
margin-right: 5px;
|
||||
font-size: 24px;
|
||||
transform: rotate(45deg);
|
||||
margin-right: 5px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--header-text-color);
|
||||
margin: 0 5px;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--header-text-color);
|
||||
margin: 0 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.btn-bell-badge {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 0px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: #f56c6c;
|
||||
color: var(--header-text-color);
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 0px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: #f56c6c;
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
.user-avator {
|
||||
margin: 0 10px 0 20px;
|
||||
margin: 0 10px 0 20px;
|
||||
}
|
||||
|
||||
.el-dropdown-link {
|
||||
color: var(--header-text-color);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--header-text-color);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,221 +1,221 @@
|
|||
import { Menus } from '@/types/menu';
|
||||
import { Menus } from "@/types/menu";
|
||||
|
||||
export const menuData: Menus[] = [
|
||||
{
|
||||
id: '0',
|
||||
title: '系统首页',
|
||||
index: '/dashboard',
|
||||
icon: 'Odometer',
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
title: '系统管理',
|
||||
index: '1',
|
||||
icon: 'HomeFilled',
|
||||
// {
|
||||
// id: '0',
|
||||
// title: '系统首页',
|
||||
// index: '/dashboard',
|
||||
// icon: 'Odometer',
|
||||
// },
|
||||
{
|
||||
id: "1",
|
||||
title: "系统管理",
|
||||
index: "1",
|
||||
icon: "HomeFilled",
|
||||
children: [
|
||||
{
|
||||
id: "11",
|
||||
pid: "1",
|
||||
index: "/system-user",
|
||||
title: "用户管理",
|
||||
},
|
||||
{
|
||||
id: "12",
|
||||
pid: "1",
|
||||
index: "/system-role",
|
||||
title: "角色管理",
|
||||
},
|
||||
{
|
||||
id: "13",
|
||||
pid: "1",
|
||||
index: "/system-menu",
|
||||
title: "菜单管理",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "组件",
|
||||
index: "2-1",
|
||||
icon: "Calendar",
|
||||
children: [
|
||||
{
|
||||
id: "21",
|
||||
pid: "3",
|
||||
index: "/form",
|
||||
title: "表单",
|
||||
},
|
||||
{
|
||||
id: "22",
|
||||
pid: "3",
|
||||
index: "/upload",
|
||||
title: "上传",
|
||||
},
|
||||
{
|
||||
id: "23",
|
||||
pid: "2",
|
||||
index: "/carousel",
|
||||
title: "走马灯",
|
||||
},
|
||||
{
|
||||
id: "24",
|
||||
pid: "2",
|
||||
index: "/calendar",
|
||||
title: "日历",
|
||||
},
|
||||
{
|
||||
id: "25",
|
||||
pid: "2",
|
||||
index: "/watermark",
|
||||
title: "水印",
|
||||
},
|
||||
{
|
||||
id: "26",
|
||||
pid: "2",
|
||||
index: "/tour",
|
||||
title: "分布引导",
|
||||
},
|
||||
{
|
||||
id: "27",
|
||||
pid: "2",
|
||||
index: "/steps",
|
||||
title: "步骤条",
|
||||
},
|
||||
{
|
||||
id: "28",
|
||||
pid: "2",
|
||||
index: "/statistic",
|
||||
title: "统计",
|
||||
},
|
||||
{
|
||||
id: "29",
|
||||
pid: "3",
|
||||
index: "29",
|
||||
title: "三级菜单",
|
||||
children: [
|
||||
{
|
||||
id: '11',
|
||||
pid: '1',
|
||||
index: '/system-user',
|
||||
title: '用户管理',
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
pid: '1',
|
||||
index: '/system-role',
|
||||
title: '角色管理',
|
||||
},
|
||||
{
|
||||
id: '13',
|
||||
pid: '1',
|
||||
index: '/system-menu',
|
||||
title: '菜单管理',
|
||||
},
|
||||
{
|
||||
id: "291",
|
||||
pid: "29",
|
||||
index: "/editor",
|
||||
title: "富文本编辑器",
|
||||
},
|
||||
{
|
||||
id: "292",
|
||||
pid: "29",
|
||||
index: "/markdown",
|
||||
title: "markdown编辑器",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '组件',
|
||||
index: '2-1',
|
||||
icon: 'Calendar',
|
||||
children: [
|
||||
{
|
||||
id: '21',
|
||||
pid: '3',
|
||||
index: '/form',
|
||||
title: '表单',
|
||||
},
|
||||
{
|
||||
id: '22',
|
||||
pid: '3',
|
||||
index: '/upload',
|
||||
title: '上传',
|
||||
},
|
||||
{
|
||||
id: '23',
|
||||
pid: '2',
|
||||
index: '/carousel',
|
||||
title: '走马灯',
|
||||
},
|
||||
{
|
||||
id: '24',
|
||||
pid: '2',
|
||||
index: '/calendar',
|
||||
title: '日历',
|
||||
},
|
||||
{
|
||||
id: '25',
|
||||
pid: '2',
|
||||
index: '/watermark',
|
||||
title: '水印',
|
||||
},
|
||||
{
|
||||
id: '26',
|
||||
pid: '2',
|
||||
index: '/tour',
|
||||
title: '分布引导',
|
||||
},
|
||||
{
|
||||
id: '27',
|
||||
pid: '2',
|
||||
index: '/steps',
|
||||
title: '步骤条',
|
||||
},
|
||||
{
|
||||
id: '28',
|
||||
pid: '2',
|
||||
index: '/statistic',
|
||||
title: '统计',
|
||||
},
|
||||
{
|
||||
id: '29',
|
||||
pid: '3',
|
||||
index: '29',
|
||||
title: '三级菜单',
|
||||
children: [
|
||||
{
|
||||
id: '291',
|
||||
pid: '29',
|
||||
index: '/editor',
|
||||
title: '富文本编辑器',
|
||||
},
|
||||
{
|
||||
id: '292',
|
||||
pid: '29',
|
||||
index: '/markdown',
|
||||
title: 'markdown编辑器',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '表格',
|
||||
index: '3',
|
||||
icon: 'Calendar',
|
||||
children: [
|
||||
{
|
||||
id: '31',
|
||||
pid: '3',
|
||||
index: '/table',
|
||||
title: '基础表格',
|
||||
},
|
||||
{
|
||||
id: '32',
|
||||
pid: '3',
|
||||
index: '/table-editor',
|
||||
title: '可编辑表格',
|
||||
},
|
||||
{
|
||||
id: '33',
|
||||
pid: '3',
|
||||
index: '/import',
|
||||
title: '导入Excel',
|
||||
},
|
||||
{
|
||||
id: '34',
|
||||
pid: '3',
|
||||
index: '/export',
|
||||
title: '导出Excel',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
icon: 'PieChart',
|
||||
index: '4',
|
||||
title: '图表',
|
||||
children: [
|
||||
{
|
||||
id: '41',
|
||||
pid: '4',
|
||||
index: '/schart',
|
||||
title: 'schart图表',
|
||||
},
|
||||
{
|
||||
id: '42',
|
||||
pid: '4',
|
||||
index: '/echarts',
|
||||
title: 'echarts图表',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
icon: 'Guide',
|
||||
index: '/icon',
|
||||
title: '图标',
|
||||
permiss: '5',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
icon: 'Brush',
|
||||
index: '/theme',
|
||||
title: '主题',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
icon: 'DocumentAdd',
|
||||
index: '6',
|
||||
title: '附加页面',
|
||||
children: [
|
||||
{
|
||||
id: '61',
|
||||
pid: '6',
|
||||
index: '/ucenter',
|
||||
title: '个人中心',
|
||||
},
|
||||
{
|
||||
id: '62',
|
||||
pid: '6',
|
||||
index: '/login',
|
||||
title: '登录',
|
||||
},
|
||||
{
|
||||
id: '63',
|
||||
pid: '6',
|
||||
index: '/register',
|
||||
title: '注册',
|
||||
},
|
||||
{
|
||||
id: '64',
|
||||
pid: '6',
|
||||
index: '/reset-pwd',
|
||||
title: '重设密码',
|
||||
},
|
||||
{
|
||||
id: '65',
|
||||
pid: '6',
|
||||
index: '/403',
|
||||
title: '403',
|
||||
},
|
||||
{
|
||||
id: '66',
|
||||
pid: '6',
|
||||
index: '/404',
|
||||
title: '404',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "表格",
|
||||
index: "3",
|
||||
icon: "Calendar",
|
||||
children: [
|
||||
{
|
||||
id: "31",
|
||||
pid: "3",
|
||||
index: "/table",
|
||||
title: "基础表格",
|
||||
},
|
||||
{
|
||||
id: "32",
|
||||
pid: "3",
|
||||
index: "/table-editor",
|
||||
title: "可编辑表格",
|
||||
},
|
||||
{
|
||||
id: "33",
|
||||
pid: "3",
|
||||
index: "/import",
|
||||
title: "导入Excel",
|
||||
},
|
||||
{
|
||||
id: "34",
|
||||
pid: "3",
|
||||
index: "/export",
|
||||
title: "导出Excel",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
icon: "PieChart",
|
||||
index: "4",
|
||||
title: "图表",
|
||||
children: [
|
||||
{
|
||||
id: "41",
|
||||
pid: "4",
|
||||
index: "/schart",
|
||||
title: "schart图表",
|
||||
},
|
||||
{
|
||||
id: "42",
|
||||
pid: "4",
|
||||
index: "/echarts",
|
||||
title: "echarts图表",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
icon: "Guide",
|
||||
index: "/icon",
|
||||
title: "图标",
|
||||
permiss: "5",
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
icon: "Brush",
|
||||
index: "/theme",
|
||||
title: "主题",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
icon: "DocumentAdd",
|
||||
index: "6",
|
||||
title: "附加页面",
|
||||
children: [
|
||||
{
|
||||
id: "61",
|
||||
pid: "6",
|
||||
index: "/ucenter",
|
||||
title: "个人中心",
|
||||
},
|
||||
{
|
||||
id: "62",
|
||||
pid: "6",
|
||||
index: "/login",
|
||||
title: "登录",
|
||||
},
|
||||
{
|
||||
id: "63",
|
||||
pid: "6",
|
||||
index: "/register",
|
||||
title: "注册",
|
||||
},
|
||||
{
|
||||
id: "64",
|
||||
pid: "6",
|
||||
index: "/reset-pwd",
|
||||
title: "重设密码",
|
||||
},
|
||||
{
|
||||
id: "65",
|
||||
pid: "6",
|
||||
index: "/403",
|
||||
title: "403",
|
||||
},
|
||||
{
|
||||
id: "66",
|
||||
pid: "6",
|
||||
index: "/404",
|
||||
title: "404",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,293 +1,351 @@
|
|||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
|
||||
import { usePermissStore } from '../store/permiss';
|
||||
import Home from '../views/home.vue';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
|
||||
import { usePermissStore } from "../store/permiss";
|
||||
import Home from "../views/home.vue";
|
||||
import NProgress from "nprogress";
|
||||
import "nprogress/nprogress.css";
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/dashboard',
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home,
|
||||
children: [
|
||||
{
|
||||
path: '/dashboard',
|
||||
name: 'dashboard',
|
||||
meta: {
|
||||
title: '系统首页',
|
||||
noAuth: true,
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "dashboard" */ '../views/dashboard.vue'),
|
||||
},
|
||||
{
|
||||
path: '/system-user',
|
||||
name: 'system-user',
|
||||
meta: {
|
||||
title: '用户管理',
|
||||
permiss: '11',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "system-user" */ '../views/system/user.vue'),
|
||||
},
|
||||
{
|
||||
path: '/system-role',
|
||||
name: 'system-role',
|
||||
meta: {
|
||||
title: '角色管理',
|
||||
permiss: '12',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "system-role" */ '../views/system/role.vue'),
|
||||
},
|
||||
{
|
||||
path: '/system-menu',
|
||||
name: 'system-menu',
|
||||
meta: {
|
||||
title: '菜单管理',
|
||||
permiss: '13',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "system-menu" */ '../views/system/menu.vue'),
|
||||
},
|
||||
{
|
||||
path: '/table',
|
||||
name: 'basetable',
|
||||
meta: {
|
||||
title: '基础表格',
|
||||
permiss: '31',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "table" */ '../views/table/basetable.vue'),
|
||||
},
|
||||
{
|
||||
path: '/table-editor',
|
||||
name: 'table-editor',
|
||||
meta: {
|
||||
title: '可编辑表格',
|
||||
permiss: '32',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "table-editor" */ '../views/table/table-editor.vue'),
|
||||
},
|
||||
{
|
||||
path: '/schart',
|
||||
name: 'schart',
|
||||
meta: {
|
||||
title: 'schart图表',
|
||||
permiss: '41',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "schart" */ '../views/chart/schart.vue'),
|
||||
},
|
||||
{
|
||||
path: '/echarts',
|
||||
name: 'echarts',
|
||||
meta: {
|
||||
title: 'echarts图表',
|
||||
permiss: '42',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "echarts" */ '../views/chart/echarts.vue'),
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
redirect: "/dashboard",
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
name: "Home",
|
||||
component: Home,
|
||||
children: [
|
||||
{
|
||||
path: "/dashboard",
|
||||
name: "dashboard",
|
||||
meta: {
|
||||
title: "系统首页",
|
||||
},
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "dashboard" */ "../views/dashboard.vue"),
|
||||
},
|
||||
{
|
||||
path: "/system-user",
|
||||
name: "system-user",
|
||||
meta: {
|
||||
title: "用户管理",
|
||||
permiss: "11",
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "system-user" */ "../views/system/user.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/system-role",
|
||||
name: "system-role",
|
||||
meta: {
|
||||
title: "角色管理",
|
||||
permiss: "12",
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "system-role" */ "../views/system/role.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/system-menu",
|
||||
name: "system-menu",
|
||||
meta: {
|
||||
title: "菜单管理",
|
||||
permiss: "13",
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "system-menu" */ "../views/system/menu.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/table",
|
||||
name: "basetable",
|
||||
meta: {
|
||||
title: "基础表格",
|
||||
permiss: "31",
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "table" */ "../views/table/basetable.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/table-editor",
|
||||
name: "table-editor",
|
||||
meta: {
|
||||
title: "可编辑表格",
|
||||
permiss: "32",
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "table-editor" */ "../views/table/table-editor.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/schart",
|
||||
name: "schart",
|
||||
meta: {
|
||||
title: "schart图表",
|
||||
permiss: "41",
|
||||
},
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "schart" */ "../views/chart/schart.vue"),
|
||||
},
|
||||
{
|
||||
path: "/echarts",
|
||||
name: "echarts",
|
||||
meta: {
|
||||
title: "echarts图表",
|
||||
permiss: "42",
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "echarts" */ "../views/chart/echarts.vue"
|
||||
),
|
||||
},
|
||||
|
||||
{
|
||||
path: '/icon',
|
||||
name: 'icon',
|
||||
meta: {
|
||||
title: '图标',
|
||||
permiss: '5',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "icon" */ '../views/pages/icon.vue'),
|
||||
},
|
||||
{
|
||||
path: '/ucenter',
|
||||
name: 'ucenter',
|
||||
meta: {
|
||||
title: '个人中心',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "ucenter" */ '../views/pages/ucenter.vue'),
|
||||
},
|
||||
{
|
||||
path: '/editor',
|
||||
name: 'editor',
|
||||
meta: {
|
||||
title: '富文本编辑器',
|
||||
permiss: '291',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "editor" */ '../views/pages/editor.vue'),
|
||||
},
|
||||
{
|
||||
path: '/markdown',
|
||||
name: 'markdown',
|
||||
meta: {
|
||||
title: 'markdown编辑器',
|
||||
permiss: '292',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "markdown" */ '../views/pages/markdown.vue'),
|
||||
},
|
||||
{
|
||||
path: '/export',
|
||||
name: 'export',
|
||||
meta: {
|
||||
title: '导出Excel',
|
||||
permiss: '34',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "export" */ '../views/table/export.vue'),
|
||||
},
|
||||
{
|
||||
path: '/import',
|
||||
name: 'import',
|
||||
meta: {
|
||||
title: '导入Excel',
|
||||
permiss: '33',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "import" */ '../views/table/import.vue'),
|
||||
},
|
||||
{
|
||||
path: '/theme',
|
||||
name: 'theme',
|
||||
meta: {
|
||||
title: '主题设置',
|
||||
permiss: '7',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "theme" */ '../views/pages/theme.vue'),
|
||||
},
|
||||
{
|
||||
path: '/calendar',
|
||||
name: 'calendar',
|
||||
meta: {
|
||||
title: '日历',
|
||||
permiss: '24',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "calendar" */ '../views/element/calendar.vue'),
|
||||
},
|
||||
{
|
||||
path: '/watermark',
|
||||
name: 'watermark',
|
||||
meta: {
|
||||
title: '水印',
|
||||
permiss: '25',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "watermark" */ '../views/element/watermark.vue'),
|
||||
},
|
||||
{
|
||||
path: '/carousel',
|
||||
name: 'carousel',
|
||||
meta: {
|
||||
title: '走马灯',
|
||||
permiss: '23',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "carousel" */ '../views/element/carousel.vue'),
|
||||
},
|
||||
{
|
||||
path: '/tour',
|
||||
name: 'tour',
|
||||
meta: {
|
||||
title: '分步引导',
|
||||
permiss: '26',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "tour" */ '../views/element/tour.vue'),
|
||||
},
|
||||
{
|
||||
path: '/steps',
|
||||
name: 'steps',
|
||||
meta: {
|
||||
title: '步骤条',
|
||||
permiss: '27',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "steps" */ '../views/element/steps.vue'),
|
||||
},
|
||||
{
|
||||
path: '/form',
|
||||
name: 'forms',
|
||||
meta: {
|
||||
title: '表单',
|
||||
permiss: '21',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "form" */ '../views/element/form.vue'),
|
||||
},
|
||||
{
|
||||
path: '/upload',
|
||||
name: 'upload',
|
||||
meta: {
|
||||
title: '上传',
|
||||
permiss: '22',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "upload" */ '../views/element/upload.vue'),
|
||||
},
|
||||
{
|
||||
path: '/statistic',
|
||||
name: 'statistic',
|
||||
meta: {
|
||||
title: '统计',
|
||||
permiss: '28',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "statistic" */ '../views/element/statistic.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
{
|
||||
path: "/icon",
|
||||
name: "icon",
|
||||
meta: {
|
||||
title: '登录',
|
||||
noAuth: true,
|
||||
title: "图标",
|
||||
permiss: "5",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "login" */ '../views/pages/login.vue'),
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "icon" */ "../views/pages/icon.vue"),
|
||||
},
|
||||
{
|
||||
path: "/ucenter",
|
||||
name: "ucenter",
|
||||
meta: {
|
||||
title: '注册',
|
||||
noAuth: true,
|
||||
title: "个人中心",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "register" */ '../views/pages/register.vue'),
|
||||
},
|
||||
{
|
||||
path: '/reset-pwd',
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "ucenter" */ "../views/pages/ucenter.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/editor",
|
||||
name: "editor",
|
||||
meta: {
|
||||
title: '重置密码',
|
||||
noAuth: true,
|
||||
title: "富文本编辑器",
|
||||
permiss: "291",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "reset-pwd" */ '../views/pages/reset-pwd.vue'),
|
||||
},
|
||||
{
|
||||
path: '/403',
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "editor" */ "../views/pages/editor.vue"),
|
||||
},
|
||||
{
|
||||
path: "/markdown",
|
||||
name: "markdown",
|
||||
meta: {
|
||||
title: '没有权限',
|
||||
noAuth: true,
|
||||
title: "markdown编辑器",
|
||||
permiss: "292",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "403" */ '../views/pages/403.vue'),
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "markdown" */ "../views/pages/markdown.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/export",
|
||||
name: "export",
|
||||
meta: {
|
||||
title: '找不到页面',
|
||||
noAuth: true,
|
||||
title: "导出Excel",
|
||||
permiss: "34",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "404" */ '../views/pages/404.vue'),
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "export" */ "../views/table/export.vue"),
|
||||
},
|
||||
{
|
||||
path: "/import",
|
||||
name: "import",
|
||||
meta: {
|
||||
title: "导入Excel",
|
||||
permiss: "33",
|
||||
},
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "import" */ "../views/table/import.vue"),
|
||||
},
|
||||
{
|
||||
path: "/theme",
|
||||
name: "theme",
|
||||
meta: {
|
||||
title: "主题设置",
|
||||
permiss: "7",
|
||||
},
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "theme" */ "../views/pages/theme.vue"),
|
||||
},
|
||||
{
|
||||
path: "/calendar",
|
||||
name: "calendar",
|
||||
meta: {
|
||||
title: "日历",
|
||||
permiss: "24",
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "calendar" */ "../views/element/calendar.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/watermark",
|
||||
name: "watermark",
|
||||
meta: {
|
||||
title: "水印",
|
||||
permiss: "25",
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "watermark" */ "../views/element/watermark.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/carousel",
|
||||
name: "carousel",
|
||||
meta: {
|
||||
title: "走马灯",
|
||||
permiss: "23",
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "carousel" */ "../views/element/carousel.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/tour",
|
||||
name: "tour",
|
||||
meta: {
|
||||
title: "分步引导",
|
||||
permiss: "26",
|
||||
},
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "tour" */ "../views/element/tour.vue"),
|
||||
},
|
||||
{
|
||||
path: "/steps",
|
||||
name: "steps",
|
||||
meta: {
|
||||
title: "步骤条",
|
||||
permiss: "27",
|
||||
},
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "steps" */ "../views/element/steps.vue"),
|
||||
},
|
||||
{
|
||||
path: "/form",
|
||||
name: "forms",
|
||||
meta: {
|
||||
title: "表单",
|
||||
permiss: "21",
|
||||
},
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "form" */ "../views/element/form.vue"),
|
||||
},
|
||||
{
|
||||
path: "/upload",
|
||||
name: "upload",
|
||||
meta: {
|
||||
title: "上传",
|
||||
permiss: "22",
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "upload" */ "../views/element/upload.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/statistic",
|
||||
name: "statistic",
|
||||
meta: {
|
||||
title: "统计",
|
||||
permiss: "28",
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "statistic" */ "../views/element/statistic.vue"
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
meta: {
|
||||
title: "登录",
|
||||
noAuth: true,
|
||||
},
|
||||
{ path: '/:path(.*)', redirect: '/404' },
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "login" */ "../views/pages/login.vue"),
|
||||
},
|
||||
{
|
||||
path: "/register",
|
||||
meta: {
|
||||
title: "注册",
|
||||
noAuth: true,
|
||||
},
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "register" */ "../views/pages/register.vue"),
|
||||
},
|
||||
{
|
||||
path: "/reset-pwd",
|
||||
meta: {
|
||||
title: "重置密码",
|
||||
noAuth: true,
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "reset-pwd" */ "../views/pages/reset-pwd.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/403",
|
||||
meta: {
|
||||
title: "没有权限",
|
||||
noAuth: true,
|
||||
},
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "403" */ "../views/pages/403.vue"),
|
||||
},
|
||||
{
|
||||
path: "/404",
|
||||
meta: {
|
||||
title: "找不到页面",
|
||||
noAuth: true,
|
||||
},
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "404" */ "../views/pages/404.vue"),
|
||||
},
|
||||
{ path: "/:path(.*)", redirect: "/404" },
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
NProgress.start();
|
||||
const role = localStorage.getItem('vuems_name');
|
||||
const permiss = usePermissStore();
|
||||
NProgress.start();
|
||||
const role = localStorage.getItem("vuems_name");
|
||||
const permiss = usePermissStore();
|
||||
|
||||
if (!role && to.meta.noAuth !== true) {
|
||||
next('/login');
|
||||
} else if (typeof to.meta.permiss == 'string' && !permiss.key.includes(to.meta.permiss)) {
|
||||
// 如果没有权限，则进入403
|
||||
next('/403');
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
if (!role && to.meta.noAuth !== true) {
|
||||
next("/login");
|
||||
} else if (
|
||||
typeof to.meta.permiss == "string" &&
|
||||
!permiss.key.includes(to.meta.permiss)
|
||||
) {
|
||||
// 如果没有权限，则进入403
|
||||
next("/403");
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
});
|
||||
|
||||
router.afterEach(() => {
|
||||
NProgress.done();
|
||||
NProgress.done();
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
|
|||
Loading…
Reference in New Issue