登录重定向

src/assets/base.css

@@ -51,7 +51,6 @@
 } */
 
 :root {
-  /* --el-color-primary: #3454cd; */
   --menu-width: 220px;
   --main-padding: 16px;
 }
@@ -71,7 +70,7 @@ body {
   background: var(--color-background);
   transition: color 0.5s, background-color 0.5s;
   line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+  font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
     Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   font-size: 15px;
   text-rendering: optimizeLegibility;

src/components/GlobalHeader.vue

@@ -2,6 +2,7 @@
 import { useMenuStore } from '@/stores/menu'
 import { useUserStore } from '@/stores/user'
 import config from '@/config/defaultSetting'
+import avatar from '@/assets/images/avatar.png'
 
 const iconSize = ref('22')
 
@@ -43,19 +44,21 @@ const visible = ref(false)
     <div class="flex flex-grow items-center justify-between px-4">
       <el-space :size="20">
         <el-button link @click="handleToggle">
-          <icon-menu-unfold-one :size="iconSize" :strokeWidth="2" v-if="!value" />
-          <icon-menu-fold-one :size="iconSize" :strokeWidth="2" v-else />
+          <icon-menu-unfold-one :size="iconSize" v-if="!value" />
+          <icon-menu-fold-one :size="iconSize" v-else />
         </el-button>
       </el-space>
       <div class="flex items-center">
-        <el-button link @click="toggleScreen" class="mr-2">
+        <el-button link @click="toggleScreen">
           <icon-off-screen :size="iconSize" v-if="isFullscreen" />
           <icon-full-screen :size="iconSize" v-else />
         </el-button>
         <el-button link class="mr-4" @click="visible = true">
           <icon-setting-two :size="iconSize" />
         </el-button>
-        <el-avatar class="mr-10px" :src="user.photo"></el-avatar>
+        <el-avatar class="mr-10px" :src="user.photo">
+          <img :src="avatar" alt="" />
+        </el-avatar>
         <el-dropdown>
           <span class="el-dropdown-link">
             {{ user.name }}

src/router/guard.ts

@@ -40,7 +40,7 @@ const createRouterGuard = (router: Router) => {
       if (whiteList.includes(to.path)) {
         return true
       } else {
-        return '/login'
+        return { path: '/login', query: { redirect: to.fullPath } }
       }
     }
   })

src/stores/user.ts

@@ -21,12 +21,12 @@ export const useUserStore = defineStore({
 
       await this.getUserInfo()
 
-      router.replace({ path: '/home' })
+      router.replace({ path: (router.currentRoute.value.query.redirect as string) || '/home' })
     },
     logout() {
       localStorage.removeItem('token')
       this.$reset()
-      router.push({ path: '/login' })
+      router.push({ path: '/login', query: { redirect: router.currentRoute.value.fullPath } })
     }
   }
 })

src/views/user/Login.vue

@@ -21,11 +21,18 @@ const formRules = {
   }
 }
 
+const loading = ref(false)
 const handleSubmit = () => {
-  formRef.value?.validate(valid => {
+  loading.value = true
+  formRef.value?.validate(async valid => {
     if (valid) {
-      userStore.login(formData)
+      try {
+        await userStore.login(formData)
+      } catch (error) {
+        loading.value = false
+      }
     }
+    loading.value = false
   })
 }
 </script>
@@ -871,7 +878,7 @@ const handleSubmit = () => {
           </el-input>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handleSubmit" class="w-full">登录</el-button>
+          <el-button type="primary" :loading="loading" @click="handleSubmit" class="w-full">登录</el-button>
         </el-form-item>
       </el-form>
     </div>