xueyawen
/
vue3-element-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

去除系统首页菜单栏，系统首页页面需要auth

This commit is contained in:
xueyawen 2025-02-25 15:06:22 +08:00
parent 4963ddf511
commit 12df1dfa6d
4 changed files with 693 additions and 621 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components.d.ts vendored
View File

@ -13,7 +13,9 @@ declare module '@vue/runtime-core' {
ElCard: typeof import('element-plus/es')['ElCard'] ElCard: typeof import('element-plus/es')['ElCard']
ElCascader: typeof import('element-plus/es')['ElCascader'] ElCascader: typeof import('element-plus/es')['ElCascader']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
ElCol: typeof import('element-plus/es')['ElCol'] ElCol: typeof import('element-plus/es')['ElCol']
ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDescriptions: typeof import('element-plus/es')['ElDescriptions'] ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem'] ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
@ -33,9 +35,13 @@ declare module '@vue/runtime-core' {
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination'] ElPagination: typeof import('element-plus/es')['ElPagination']
ElProgress: typeof import('element-plus/es')['ElProgress'] ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRate: typeof import('element-plus/es')['ElRate']
ElRow: typeof import('element-plus/es')['ElRow'] ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect'] ElSelect: typeof import('element-plus/es')['ElSelect']
ElStatistic: typeof import('element-plus/es')['ElStatistic'] ElSlider: typeof import('element-plus/es')['ElSlider']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable'] ElTable: typeof import('element-plus/es')['ElTable']
@ -45,7 +51,9 @@ declare module '@vue/runtime-core' {
ElTag: typeof import('element-plus/es')['ElTag'] ElTag: typeof import('element-plus/es')['ElTag']
ElTimeline: typeof import('element-plus/es')['ElTimeline'] ElTimeline: typeof import('element-plus/es')['ElTimeline']
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem'] ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
ElTooltip: typeof import('element-plus/es')['ElTooltip'] ElTooltip: typeof import('element-plus/es')['ElTooltip']
ElTransfer: typeof import('element-plus/es')['ElTransfer']
ElUpload: typeof import('element-plus/es')['ElUpload'] ElUpload: typeof import('element-plus/es')['ElUpload']
Header: typeof import('./src/components/header.vue')['default'] Header: typeof import('./src/components/header.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']

288
src/components/header.vue
View File

@ -1,204 +1,216 @@
<template> <template>
<div class="header"> <div class="header">
<!-- 折叠按钮 --> <!-- 折叠按钮 -->
<div class="header-left"> <div class="header-left">
<img class="logo" src="../assets/img/logo.svg" alt="" /> <img class="logo" src="../assets/img/logo.svg" alt="" />
<div class="web-title">后台管理系统</div> <div class="web-title" @click="showDashboard">后台管理系统</div>
<div class="collapse-btn" @click="collapseChage"> <div class="collapse-btn" @click="collapseChage">
<el-icon v-if="sidebar.collapse"> <el-icon v-if="sidebar.collapse">
<Expand /> <Expand />
</el-icon> </el-icon>
<el-icon v-else> <el-icon v-else>
<Fold /> <Fold />
</el-icon> </el-icon>
</div> </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> </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> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue'; import { onMounted } from "vue";
import { useSidebarStore } from '../store/sidebar'; import { useSidebarStore } from "../store/sidebar";
import { useRouter } from 'vue-router'; import { useRouter } from "vue-router";
import imgurl from '../assets/img/img.jpg'; 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 message: number = 2;
const sidebar = useSidebarStore(); const sidebar = useSidebarStore();
// 侧边栏折叠 // 侧边栏折叠
const collapseChage = () => { const collapseChage = () => {
sidebar.handleCollapse(); sidebar.handleCollapse();
}; };
onMounted(() => { onMounted(() => {
if (document.body.clientWidth < 1500) { if (document.body.clientWidth < 1500) {
collapseChage(); collapseChage();
} }
}); });
// 用户名下拉菜单选择事件 // 用户名下拉菜单选择事件
const router = useRouter(); const router = useRouter();
const showDashboard = () => {
router.push("/");
};
const handleCommand = (command: string) => { const handleCommand = (command: string) => {
if (command == 'loginout') { if (command == "loginout") {
localStorage.removeItem('vuems_name'); localStorage.removeItem("vuems_name");
router.push('/login'); router.push("/login");
} else if (command == 'user') { } else if (command == "user") {
router.push('/ucenter'); router.push("/ucenter");
} }
}; };
const setFullScreen = () => { const setFullScreen = () => {
if (document.fullscreenElement) { if (document.fullscreenElement) {
document.exitFullscreen(); document.exitFullscreen();
} else { } else {
document.body.requestFullscreen.call(document.body); document.body.requestFullscreen.call(document.body);
} }
}; };
</script> </script>
<style scoped> <style scoped>
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 70px; height: 70px;
color: var(--header-text-color); color: var(--header-text-color);
background-color: var(--header-bg-color); background-color: var(--header-bg-color);
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.header-left { .header-left {
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 20px; padding-left: 20px;
height: 100%; height: 100%;
} }
.logo { .logo {
width: 35px; width: 35px;
} }
.web-title { .web-title {
margin: 0 40px 0 10px; margin: 0 40px 0 10px;
font-size: 22px; font-size: 22px;
cursor: pointer;
} }
.collapse-btn { .collapse-btn {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
padding: 0 10px; padding: 0 10px;
cursor: pointer; cursor: pointer;
opacity: 0.8; opacity: 0.8;
font-size: 22px; font-size: 22px;
} }
.collapse-btn:hover { .collapse-btn:hover {
opacity: 1; opacity: 1;
} }
.header-right { .header-right {
float: right; float: right;
padding-right: 50px; padding-right: 50px;
} }
.header-user-con { .header-user-con {
display: flex; display: flex;
height: 70px; height: 70px;
align-items: center; align-items: center;
} }
.btn-fullscreen { .btn-fullscreen {
transform: rotate(45deg); transform: rotate(45deg);
margin-right: 5px; margin-right: 5px;
font-size: 24px; font-size: 24px;
} }
.btn-icon { .btn-icon {
position: relative; position: relative;
width: 30px; width: 30px;
height: 30px; height: 30px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--header-text-color); color: var(--header-text-color);
margin: 0 5px; margin: 0 5px;
font-size: 20px; font-size: 20px;
} }
.btn-bell-badge { .btn-bell-badge {
position: absolute; position: absolute;
right: 4px; right: 4px;
top: 0px; top: 0px;
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 4px; border-radius: 4px;
background: #f56c6c; background: #f56c6c;
color: var(--header-text-color); color: var(--header-text-color);
} }
.user-avator { .user-avator {
margin: 0 10px 0 20px; margin: 0 10px 0 20px;
} }
.el-dropdown-link { .el-dropdown-link {
color: var(--header-text-color); color: var(--header-text-color);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.el-dropdown-menu__item { .el-dropdown-menu__item {
text-align: center; text-align: center;
} }
</style> </style>

426
src/components/menu.ts
View File

@ -1,221 +1,215 @@
import { Menus } from '@/types/menu'; import { Menus } from "@/types/menu";
export const menuData: Menus[] = [ export const menuData: Menus[] = [
{ {
id: '0', id: "1",
title: '系统首页', title: "系统管理",
index: '/dashboard', index: "1",
icon: 'Odometer', icon: "HomeFilled",
}, children: [
{ {
id: '1', id: "11",
title: '系统管理', pid: "1",
index: '1', index: "/system-user",
icon: 'HomeFilled', 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: [ children: [
{ {
id: '11', id: "291",
pid: '1', pid: "29",
index: '/system-user', index: "/editor",
title: '用户管理', title: "富文本编辑器",
}, },
{ {
id: '12', id: "292",
pid: '1', pid: "29",
index: '/system-role', index: "/markdown",
title: '角色管理', title: "markdown编辑器",
}, },
{
id: '13',
pid: '1',
index: '/system-menu',
title: '菜单管理',
},
], ],
}, },
{ ],
id: '2', },
title: '组件', {
index: '2-1', id: "3",
icon: 'Calendar', title: "表格",
children: [ index: "3",
{ icon: "Calendar",
id: '21', children: [
pid: '3', {
index: '/form', id: "31",
title: '表单', pid: "3",
}, index: "/table",
{ title: "基础表格",
id: '22', },
pid: '3', {
index: '/upload', id: "32",
title: '上传', pid: "3",
}, index: "/table-editor",
{ title: "可编辑表格",
id: '23', },
pid: '2', {
index: '/carousel', id: "33",
title: '走马灯', pid: "3",
}, index: "/import",
{ title: "导入Excel",
id: '24', },
pid: '2', {
index: '/calendar', id: "34",
title: '日历', pid: "3",
}, index: "/export",
{ title: "导出Excel",
id: '25', },
pid: '2', ],
index: '/watermark', },
title: '水印', {
}, id: "4",
{ icon: "PieChart",
id: '26', index: "4",
pid: '2', title: "图表",
index: '/tour', children: [
title: '分布引导', {
}, id: "41",
{ pid: "4",
id: '27', index: "/schart",
pid: '2', title: "schart图表",
index: '/steps', },
title: '步骤条', {
}, id: "42",
{ pid: "4",
id: '28', index: "/echarts",
pid: '2', title: "echarts图表",
index: '/statistic', },
title: '统计', ],
}, },
{ {
id: '29', id: "5",
pid: '3', icon: "Guide",
index: '29', index: "/icon",
title: '三级菜单', title: "图标",
children: [ permiss: "5",
{ },
id: '291', {
pid: '29', id: "7",
index: '/editor', icon: "Brush",
title: '富文本编辑器', index: "/theme",
}, title: "主题",
{ },
id: '292', {
pid: '29', id: "6",
index: '/markdown', icon: "DocumentAdd",
title: 'markdown编辑器', index: "6",
}, title: "附加页面",
], children: [
}, {
], id: "61",
}, pid: "6",
{ index: "/ucenter",
id: '3', title: "个人中心",
title: '表格', },
index: '3', {
icon: 'Calendar', id: "62",
children: [ pid: "6",
{ index: "/login",
id: '31', title: "登录",
pid: '3', },
index: '/table', {
title: '基础表格', id: "63",
}, pid: "6",
{ index: "/register",
id: '32', title: "注册",
pid: '3', },
index: '/table-editor', {
title: '可编辑表格', id: "64",
}, pid: "6",
{ index: "/reset-pwd",
id: '33', title: "重设密码",
pid: '3', },
index: '/import', {
title: '导入Excel', id: "65",
}, pid: "6",
{ index: "/403",
id: '34', title: "403",
pid: '3', },
index: '/export', {
title: '导出Excel', id: "66",
}, pid: "6",
], index: "/404",
}, title: "404",
{ },
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',
},
],
},
]; ];

590
src/router/index.ts
View File

@ -1,293 +1,351 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'; import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import { usePermissStore } from '../store/permiss'; import { usePermissStore } from "../store/permiss";
import Home from '../views/home.vue'; import Home from "../views/home.vue";
import NProgress from 'nprogress'; import NProgress from "nprogress";
import 'nprogress/nprogress.css'; import "nprogress/nprogress.css";
const routes: RouteRecordRaw[] = [ const routes: RouteRecordRaw[] = [
{ {
path: '/', path: "/",
redirect: '/dashboard', redirect: "/dashboard",
}, },
{ {
path: '/', path: "/",
name: 'Home', name: "Home",
component: Home, component: Home,
children: [ children: [
{ {
path: '/dashboard', path: "/dashboard",
name: 'dashboard', name: "dashboard",
meta: { meta: {
title: '系统首页', title: "系统首页",
noAuth: true, },
}, component: () =>
component: () => import(/* webpackChunkName: "dashboard" */ '../views/dashboard.vue'), import(/* webpackChunkName: "dashboard" */ "../views/dashboard.vue"),
}, },
{ {
path: '/system-user', path: "/system-user",
name: 'system-user', name: "system-user",
meta: { meta: {
title: '用户管理', title: "用户管理",
permiss: '11', permiss: "11",
}, },
component: () => import(/* webpackChunkName: "system-user" */ '../views/system/user.vue'), component: () =>
}, import(
{ /* webpackChunkName: "system-user" */ "../views/system/user.vue"
path: '/system-role', ),
name: 'system-role', },
meta: { {
title: '角色管理', path: "/system-role",
permiss: '12', name: "system-role",
}, meta: {
component: () => import(/* webpackChunkName: "system-role" */ '../views/system/role.vue'), title: "角色管理",
}, permiss: "12",
{ },
path: '/system-menu', component: () =>
name: 'system-menu', import(
meta: { /* webpackChunkName: "system-role" */ "../views/system/role.vue"
title: '菜单管理', ),
permiss: '13', },
}, {
component: () => import(/* webpackChunkName: "system-menu" */ '../views/system/menu.vue'), path: "/system-menu",
}, name: "system-menu",
{ meta: {
path: '/table', title: "菜单管理",
name: 'basetable', permiss: "13",
meta: { },
title: '基础表格', component: () =>
permiss: '31', import(
}, /* webpackChunkName: "system-menu" */ "../views/system/menu.vue"
component: () => import(/* webpackChunkName: "table" */ '../views/table/basetable.vue'), ),
}, },
{ {
path: '/table-editor', path: "/table",
name: 'table-editor', name: "basetable",
meta: { meta: {
title: '可编辑表格', title: "基础表格",
permiss: '32', permiss: "31",
}, },
component: () => import(/* webpackChunkName: "table-editor" */ '../views/table/table-editor.vue'), component: () =>
}, import(
{ /* webpackChunkName: "table" */ "../views/table/basetable.vue"
path: '/schart', ),
name: 'schart', },
meta: { {
title: 'schart图表', path: "/table-editor",
permiss: '41', name: "table-editor",
}, meta: {
component: () => import(/* webpackChunkName: "schart" */ '../views/chart/schart.vue'), title: "可编辑表格",
}, permiss: "32",
{ },
path: '/echarts', component: () =>
name: 'echarts', import(
meta: { /* webpackChunkName: "table-editor" */ "../views/table/table-editor.vue"
title: 'echarts图表', ),
permiss: '42', },
}, {
component: () => import(/* webpackChunkName: "echarts" */ '../views/chart/echarts.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', path: "/icon",
name: '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',
meta: { meta: {
title: '登录', title: "图标",
noAuth: true, permiss: "5",
}, },
component: () => import(/* webpackChunkName: "login" */ '../views/pages/login.vue'), component: () =>
}, import(/* webpackChunkName: "icon" */ "../views/pages/icon.vue"),
{ },
path: '/register', {
path: "/ucenter",
name: "ucenter",
meta: { meta: {
title: '注册', title: "个人中心",
noAuth: true,
}, },
component: () => import(/* webpackChunkName: "register" */ '../views/pages/register.vue'), component: () =>
}, import(
{ /* webpackChunkName: "ucenter" */ "../views/pages/ucenter.vue"
path: '/reset-pwd', ),
},
{
path: "/editor",
name: "editor",
meta: { meta: {
title: '重置密码', title: "富文本编辑器",
noAuth: true, permiss: "291",
}, },
component: () => import(/* webpackChunkName: "reset-pwd" */ '../views/pages/reset-pwd.vue'), component: () =>
}, import(/* webpackChunkName: "editor" */ "../views/pages/editor.vue"),
{ },
path: '/403', {
path: "/markdown",
name: "markdown",
meta: { meta: {
title: '没有权限', title: "markdown编辑器",
noAuth: true, permiss: "292",
}, },
component: () => import(/* webpackChunkName: "403" */ '../views/pages/403.vue'), component: () =>
}, import(
{ /* webpackChunkName: "markdown" */ "../views/pages/markdown.vue"
path: '/404', ),
},
{
path: "/export",
name: "export",
meta: { meta: {
title: '找不到页面', title: "导出Excel",
noAuth: true, 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({ const router = createRouter({
history: createWebHashHistory(), history: createWebHashHistory(),
routes, routes,
}); });
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
NProgress.start(); NProgress.start();
const role = localStorage.getItem('vuems_name'); const role = localStorage.getItem("vuems_name");
const permiss = usePermissStore(); const permiss = usePermissStore();
if (!role && to.meta.noAuth !== true) { if (!role && to.meta.noAuth !== true) {
next('/login'); next("/login");
} else if (typeof to.meta.permiss == 'string' && !permiss.key.includes(to.meta.permiss)) { } else if (
// 如果没有权限，则进入403 typeof to.meta.permiss == "string" &&
next('/403'); !permiss.key.includes(to.meta.permiss)
} else { ) {
next(); // 如果没有权限，则进入403
} next("/403");
} else {
next();
}
}); });
router.afterEach(() => { router.afterEach(() => {
NProgress.done(); NProgress.done();
}); });
export default router; export default router;