# feat:登录注册提供返回主页的入口;登录按钮跳转登录页面

src/layout/UserLayout.vue

@@ -17,7 +17,7 @@
             <el-icon><component :is="menu.meta?.icon"/></el-icon>
             <template #title>{{ menu.meta?.title }}</template>
           </el-menu-item>
-          <el-menu-item index="/admin">
+          <el-menu-item v-if="isAdmin" index="/admin">
             <el-icon><Tools/></el-icon>
             <template #title>后台管理</template>
           </el-menu-item>
@@ -25,11 +25,14 @@
         <div class="header-right">
           <template v-if="login">
             <el-dropdown placement="bottom">
-              <el-button> {{ loginUserStore.loginUser?.user?.name }} </el-button>
+              <el-button class="user-btn" text>
+                <el-icon class="user-avatar"><UserFilled /></el-icon>
+                <span class="username">{{ loginUserStore.loginUser?.user?.name }}</span>
+              </el-button>
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item>个人信息</el-dropdown-item>
-                  <el-dropdown-item @click="logoutHandler">退出</el-dropdown-item>
+                  <el-dropdown-item divided @click="logoutHandler">退出登录</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -55,18 +58,15 @@ import {computed, ref} from 'vue'
 import {useLoginUserStore, useMetaStore} from "../store";
 import router, {userRoutes} from "../router";
 import {
-  Tools
+  Tools,
+  UserFilled
 } from '@element-plus/icons-vue'
 const metaStore = useMetaStore()
 const loginUserStore = useLoginUserStore()
 const login = computed(() => loginUserStore.loginUser.isLogin)
-//todo:模拟登陆
+const isAdmin = computed(() => loginUserStore.loginUser.user?.role === 'admin')
 const loginHandler = () => {
-  loginUserStore.loginSuccess({
-    id:"",
-    name:"张三",
-    role:"user"
-  });
+  router.push('/login')
 }
 let activeIndex = ref('/')
 const menus = computed(()=>{
@@ -77,6 +77,7 @@ const handleSelect = () => {
 }
 const logoutHandler = () => {
   loginUserStore.logoutUser()
+  router.push('/')
 }
 </script>
 <style scoped>
@@ -122,4 +123,21 @@ el-main{
   font-size: 14px;
   color: #606266;
 }
+
+.user-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.user-btn:hover {
+  color: #db2777;
+}
+
+.user-avatar {
+  font-size: 20px;
+  color: #be185d;
+}
 </style>

src/store/user.ts

@@ -25,7 +25,13 @@ export const useLoginUserStore = defineStore('loginUser', ()=>{
         loginUser.isLogin = true;
     }
     function logoutUser():void {
-        loginUser.isLogin = false;
+        loginUser.isLogin = false
+        loginUser.user = {
+            id: '',
+            name: '未登录',
+            role: 'guest'
+        }
+        localStorage.removeItem('token')
     }
    return{
         //States

src/view/LoginView.vue

@@ -8,6 +8,11 @@
       </div>
 
       <el-card class="auth-card" shadow="never">
+        <el-button class="back-btn" text @click="router.push('/')">
+          <el-icon><ArrowLeft /></el-icon>
+          返回主页
+        </el-button>
+
         <div class="auth-header">
           <h1 class="auth-title">欢迎</h1>
           <p class="auth-subtitle">请登录或注册您的账号</p>
@@ -119,15 +124,16 @@
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { User, Lock } from '@element-plus/icons-vue'
+import { User, Lock, ArrowLeft } from '@element-plus/icons-vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import { getAuthController } from '../api/auth-controller'
 import type { LoginDto, RegisterDto } from '../api/models'
 import { useLoginUserStore } from '../store'
 import type { User as UserType } from '../type'
 
+const route = useRoute()
 const router = useRouter()
 const loginUserStore = useLoginUserStore()
 
@@ -206,7 +212,7 @@ const handleLogin = async () => {
         role: (tokenData.role as UserType['role']) || 'user'
       })
       ElMessage.success('登录成功')
-      router.push('/')
+      router.push((route.query.redirect as string) || '/')
     } else {
       ElMessage.error(res.message || '登录失败')
     }
@@ -330,6 +336,24 @@ const handleRegister = async () => {
   padding: 8px;
 }
 
+.back-btn {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  color: #be185d;
+  font-size: 14px;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.back-btn:hover {
+  color: #db2777;
+}
+
+.back-btn .el-icon {
+  margin-right: 4px;
+}
+
 .auth-header {
   text-align: center;
   padding: 24px 0 16px;