59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
<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>
|
|
<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>
|