添加后台管理框架雏形
This commit is contained in:
		
							
								
								
									
										218
									
								
								frontend/src/router/index.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										218
									
								
								frontend/src/router/index.ts
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,218 @@
 | 
			
		||||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 | 
			
		||||
import { usePermissStore } from '../store/permiss';
 | 
			
		||||
import Home from '../views/home.vue';
 | 
			
		||||
import settings from '../utils/settings'
 | 
			
		||||
 | 
			
		||||
const routes: RouteRecordRaw[] = [
 | 
			
		||||
    {
 | 
			
		||||
        path: '/',
 | 
			
		||||
        redirect: '/dashboard',
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
        path: '/',
 | 
			
		||||
        name: 'Home',
 | 
			
		||||
        component: Home,
 | 
			
		||||
        children: [
 | 
			
		||||
            {
 | 
			
		||||
                path: '/dashboard',
 | 
			
		||||
                name: 'dashboard',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: '系统首页',
 | 
			
		||||
                    permiss: 'dashboard',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/dashboard.vue'),
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
                path: '/monitor-data-view',
 | 
			
		||||
                name: 'monitor-data-view',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: '查看数据',
 | 
			
		||||
                    permiss: 'monitor-data-view',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/monitor-data-view.vue'),
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
                path: '/warning-view',
 | 
			
		||||
                name: 'warning-view',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: '总览',
 | 
			
		||||
                    permiss: 'warning-view',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/warning-view.vue'),
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
                path: '/warning-setting',
 | 
			
		||||
                name: 'warning-setting',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: '预警设置',
 | 
			
		||||
                    permiss: 'warning-setting',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/warning-setting.vue'),
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
                path: '/equipment-setting',
 | 
			
		||||
                name: 'equipment-setting',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: '设备管理',
 | 
			
		||||
                    permiss: 'equipment-setting',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/equipment-setting.vue'),
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
                path: '/privilege-user-setting',
 | 
			
		||||
                name: 'privilege-user-setting',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: '用户管理',
 | 
			
		||||
                    permiss: 'privilege-user-setting',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/privilege-user-setting.vue'),
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
                path: '/privilege-role-setting',
 | 
			
		||||
                name: 'privilege-role-setting',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: '角色权限',
 | 
			
		||||
                    permiss: 'privilege-role-setting',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/privilege-role-setting.vue'),
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
                path: '/user',
 | 
			
		||||
                name: 'user',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: '个人中心',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/user.vue'),
 | 
			
		||||
            },
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
            {
 | 
			
		||||
                path: '/table',
 | 
			
		||||
                name: 'basetable',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: '表格',
 | 
			
		||||
                    permiss: 'default',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/demo/table.vue'),
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
                path: '/charts',
 | 
			
		||||
                name: 'basecharts',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: '图表',
 | 
			
		||||
                    permiss: 'default',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/demo/charts.vue'),
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
                path: '/form',
 | 
			
		||||
                name: 'baseform',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: '表单',
 | 
			
		||||
                    permiss: 'default',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/demo/form.vue'),
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
                path: '/tabs',
 | 
			
		||||
                name: 'tabs',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: 'tab标签',
 | 
			
		||||
                    permiss: 'default',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/demo/tabs.vue'),
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
                path: '/icon',
 | 
			
		||||
                name: 'icon',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: '自定义图标',
 | 
			
		||||
                    permiss: 'default',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/demo/icon.vue'),
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
                path: '/editor',
 | 
			
		||||
                name: 'editor',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: '富文本编辑器',
 | 
			
		||||
                    permiss: 'default',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/demo/editor.vue'),
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
                path: '/markdown',
 | 
			
		||||
                name: 'markdown',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: 'markdown编辑器',
 | 
			
		||||
                    permiss: 'default',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/demo/markdown.vue'),
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
                path: '/export',
 | 
			
		||||
                name: 'export',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: '导出Excel',
 | 
			
		||||
                    permiss: 'default',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/demo/export.vue'),
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
                path: '/import',
 | 
			
		||||
                name: 'import',
 | 
			
		||||
                meta: {
 | 
			
		||||
                    title: '导入Excel',
 | 
			
		||||
                    permiss: 'default',
 | 
			
		||||
                },
 | 
			
		||||
                component: () => import('../views/demo/import.vue'),
 | 
			
		||||
            },
 | 
			
		||||
        ],
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
        path: '/login',
 | 
			
		||||
        name: 'Login',
 | 
			
		||||
        meta: {
 | 
			
		||||
            title: '登录',
 | 
			
		||||
        },
 | 
			
		||||
        component: () => import('../views/login.vue'),
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
        path: '/403',
 | 
			
		||||
        name: '403',
 | 
			
		||||
        meta: {
 | 
			
		||||
            title: '没有权限',
 | 
			
		||||
        },
 | 
			
		||||
        component: () => import('../views/error-page/403.vue'),
 | 
			
		||||
    },
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
const router = createRouter({
 | 
			
		||||
    history: createWebHashHistory(),
 | 
			
		||||
    routes,
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
router.beforeEach((to, from, next) => {
 | 
			
		||||
    document.title = `${to.meta.title} | ${settings.siteTitle}`;
 | 
			
		||||
    const role = localStorage.getItem('ms_username');
 | 
			
		||||
    const permiss = usePermissStore();
 | 
			
		||||
    if (!role && to.path !== '/login') {
 | 
			
		||||
        next({
 | 
			
		||||
            path: '/login',
 | 
			
		||||
            query: {
 | 
			
		||||
                redirectTo: router.currentRoute.value.path // window.location.href
 | 
			
		||||
            },
 | 
			
		||||
        });
 | 
			
		||||
    } else if (to.meta.permiss && !permiss.key.includes(to.meta.permiss)) {
 | 
			
		||||
        // 如果没有权限,则进入403
 | 
			
		||||
        next('/403');
 | 
			
		||||
    } else {
 | 
			
		||||
        next();
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
export default router;
 | 
			
		||||
		Reference in New Issue
	
	Block a user