front/components.d.ts

@@ -8,10 +8,18 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AButton: typeof import('ant-design-vue/es')['Button']
+    ACol: typeof import('ant-design-vue/es')['Col']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
+    ALayout: typeof import('ant-design-vue/es')['Layout']
+    ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
+    ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
+    AMenu: typeof import('ant-design-vue/es')['Menu']
+    AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
+    ARow: typeof import('ant-design-vue/es')['Row']
+    ATypographyText: typeof import('ant-design-vue/es')['TypographyText']
     Header: typeof import('./src/components/main/Header.vue')['default']
     Home: typeof import('./src/components/pages/Home.vue')['default']
     Login: typeof import('./src/components/pages/Login.vue')['default']

front/src/App.vue

@@ -3,10 +3,12 @@ import Header from './components/main/Header.vue';
 </script>
 
 <template>
+    <a-layout class="layout">
         <Header />
-    <main>
+        <a-layout-content>
             <RouterView />
-    </main>
+        </a-layout-content>
+    </a-layout>
 </template>
 
 <style scoped>

front/src/components/main/Header.vue

@@ -1,10 +1,58 @@
 <script setup lang="ts">
+import { inject } from 'vue';
+import { useUserStore } from '../../store';
+import { AuthService } from '../../core/services/auth-service';
+import router from '../../router';
+
+const store = useUserStore();
+const authService = inject(typeof(AuthService)) as AuthService;
+
+function logout() {
+    authService.logout();
+    router.push({ name: 'login' });
+}
+
 </script>
 
 <template>
-    <div>Header</div>
+    <a-layout-header class="header">
+        <div class="base-nav">
+            <div>ДомБюдж</div>
+            <nav>
+                <RouterLink :to="{ name: 'home' }">Главная</RouterLink>
+            </nav>
+        </div>
+        <div v-if="!store.user.id">
+            <RouterLink :to="{ name: 'login' }">Войти</RouterLink>
+        </div>
+        <div v-else>
+            <label for="logout">Привет, {{ store.user.name }}!</label>
+            <a-button 
+                name="logout" 
+                @click="logout()" 
+                danger
+                style="margin-left: 10px"
+            >
+                Выйти
+            </a-button>
+        </div>
+    </a-layout-header>
 </template>
 
 <style scoped>
+.header {
+    background-color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.base-nav {
+    display: inline-flex;
+    justify-content: left;
+}
+.base-nav a {
+    margin-left: 10px;
+}
 
 </style>

front/src/components/pages/Login.vue

@@ -53,9 +53,9 @@ const formState = reactive<UserLoginDto>({
 const authService = inject(typeof(AuthService)) as AuthService;
 
 // Логика формы
-const onFinish = (values: any) => {
+const onFinish = async (values: any) => {
     console.log('Success:', values);
-    authService.login(formState);
+    await authService.login(formState);
     router.push({ name: 'home' });
 };
 const onFinishFailed = (errorInfo: any) => {

front/src/core/services/auth-service.ts

@@ -1,6 +1,6 @@
 import { useUserStore } from "../../store";
 import { Api } from "../api/Api";
-import { UserDto, UserLoginDto } from "../api/data-contracts";
+import { UserDto, UserLoginDto, UserViewModel } from "../api/data-contracts";
 
 export class AuthService {
     private readonly _api: Api;
@@ -16,6 +16,11 @@ export class AuthService {
         store.updateUser(result.data);
     }
 
+    logout() {
+        const store = useUserStore();
+        store.updateUser({} as UserViewModel);
+    }
+
     async register(data: UserDto) {
         let result = await this._api.authRegister(data);
         const store = useUserStore();