更改路由守卫

src/assets/base.css

@@ -50,6 +50,10 @@
   }
 } */
 
+:root {
+  --el-color-primary: #3454cd;
+}
+
 *,
 *::before,
 *::after {

src/components.d.ts

@@ -16,8 +16,11 @@ declare module '@vue/runtime-core' {
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElFooter: typeof import('element-plus/es')['ElFooter']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
@@ -37,8 +40,10 @@ declare module '@vue/runtime-core' {
     IEpArrowDown: typeof import('~icons/ep/arrow-down')['default']
     IEpDocument: typeof import('~icons/ep/document')['default']
     IEpLocation: typeof import('~icons/ep/location')['default']
+    IEpLock: typeof import('~icons/ep/lock')['default']
     IEpMenu: typeof import('~icons/ep/menu')['default']
     IEpSetting: typeof import('~icons/ep/setting')['default']
+    IEpUser: typeof import('~icons/ep/user')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TheWelcome: typeof import('./components/TheWelcome.vue')['default']

src/router/asyncRouter.ts

@@ -20,34 +20,19 @@ const asyncRouter:RouteRecordRaw[] = [
     }
   },
   {
-    path: '/exception',
-    name: 'exception',
+    path: 'system',
+    name: 'system',
+    component: () => import('@/views/exception/403.vue'),
     meta: {
-      title: '异常页'
+      title: '系统管理'
     },
     children: [
       {
-        path: '403',
-        name: '403',
+        path: 'user',
+        name: 'systemUser',
         component: () => import('@/views/exception/403.vue'),
         meta: {
-          title: '403'
-        }
-      },
-      {
-        path: '404',
-        name: '404',
-        component: () => import('@/views/exception/404.vue'),
-        meta: {
-          title: '404'
-        }
-      },
-      {
-        path: '500',
-        name: '500',
-        component: () => import('@/views/exception/404.vue'),
-        meta: {
-          title: '500'
+          title: '用户管理'
         }
       },
     ]

src/router/constantRouter.ts

@@ -14,37 +14,45 @@ const constantRouter:RouteRecordRaw[] = [
     name: 'login',
     component: () => import('@/views/user/Login.vue'),
   },
-  // {
-  //   path: '/exception',
-  //   name: 'exception',
-  //   component: BasicLayout,
-  //   meta: {
-  //     title: '异常页'
-  //   },
-  //   children: [
-  //     {
-  //       path: '403',
-  //       name: '403',
-  //       component: () => import('@/views/exception/403.vue'),
-  //       meta: {
-  //         title: '403'
-  //       }
-  //     },
-  //     {
-  //       path: '404',
-  //       name: '404',
-  //       component: () => import('@/views/exception/404.vue'),
-  //       meta: {
-  //         title: '404'
-  //       }
-  //     },
-  //     {
-  //       path: '500',
-  //       name: '500',
-  //       component: () => import('@/views/exception/404.vue'),
-  //     },
-  //   ]
-  // },
+  {
+    path: '/:pathMatch(.*)*',
+    name: '404',
+    component: () => import('@/views/exception/404.vue'),
+    meta: {
+      title: '404'
+    }
+  },
+  {
+    path: '/exception',
+    name: 'exception',
+    component: BasicLayout,
+    meta: {
+      title: '异常页'
+    },
+    children: [
+      {
+        path: '403',
+        name: '403',
+        component: () => import('@/views/exception/403.vue'),
+        meta: {
+          title: '403'
+        }
+      },
+      {
+        path: '404',
+        name: '404',
+        component: () => import('@/views/exception/404.vue'),
+        meta: {
+          title: '404'
+        }
+      },
+      {
+        path: '500',
+        name: '500',
+        component: () => import('@/views/exception/404.vue'),
+      },
+    ]
+  },
 ]
 
 export default constantRouter

src/router/guard.ts

@@ -5,27 +5,26 @@ import { useUserStore } from '@/stores/user'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 
+const whiteList = ['/login']
 const title = useTitle()
 
 
 const createRouterGuard = (router:Router) => {
-  
-
   router.beforeEach(async (to, from) => {
+    const userStore = useUserStore()
+
     NProgress.start()
     if (to?.meta?.title) {
       title.value = to?.meta?.title
     }
-
-    const token = 'test'
+    const token = userStore.token
 
     if (token) {
       if (to.path === '/login') {
         return '/'
       } else {
-        const userStore = useUserStore()
+        
         const routerStore = useRouterStore()
-
         if (!userStore.flag) {
           userStore.getUserInfo()
           
@@ -33,12 +32,17 @@ const createRouterGuard = (router:Router) => {
           accessedRouters.forEach(route => {
             router.addRoute('layout',route)
           })
-          console.log(router.getRoutes());
+
+          return { ...to, replace: true }
         }
         return true
       }
     } else {
-      
+      if (whiteList.includes(to.path)) {
+        return true
+      } else {
+        return '/login'
+      }
     }
   })
 

src/stores/user.ts

@@ -3,7 +3,8 @@ export const useUserStore = defineStore({
   id: 'user',
   state: () => ({
     user: {},
-    flag: false
+    flag: false,
+    token: 'test'
   }),
   actions: {
     getUserInfo() {

src/views/user/Login.vue

@@ -1 +1,33 @@
-<template>login</template>
+<script setup lang="ts">
+const username = ref('')
+const password = ref('')
+const handleSubmit = () => {}
+</script>
+
+<template>
+  <div class="flex items-center justify-center h-screen w-screen bg-#3454cd">
+    <div class="w-1000px h-568px bg-white flex">
+      <div class="w-50% h-full"></div>
+      <div class="w-50% h-full flex justify-center items-center">
+        <el-form class="w-60%">
+          <div class="text-24px mb-4">登录</div>
+          <el-form-item>
+            <el-input v-model="username" size="large" placeholder="请输入用户名">
+              <template #prefix>
+                <i-ep-user />
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-input v-model="password" size="large" placeholder="请输入密码">
+              <template #prefix>
+                <i-ep-lock />
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-button type="primary" size="large" @click="handleSubmit" class="w-full">登录</el-button>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>