115 lines
4.2 KiB
Vue
115 lines
4.2 KiB
Vue
<template>
|
||
<div id="app-container">
|
||
<header class="app-header bg-dark text-white p-3 mb-4 shadow-sm">
|
||
<nav class="container d-flex justify-content-between align-items-center">
|
||
<router-link to="/" class="navbar-brand text-white fs-4">DatingApp</router-link>
|
||
<div>
|
||
<template v-if="authState">
|
||
<span class="me-3">Привет, {{ userData?.name || 'Пользователь' }}!</span>
|
||
<router-link to="/swipe" class="btn btn-outline-light me-2">Поиск</router-link>
|
||
<router-link to="/chats" class="btn btn-outline-light me-2">Чаты</router-link> <!-- НОВАЯ ССЫЛКА -->
|
||
<router-link to="/profile" class="btn btn-outline-light me-2">Профиль</router-link>
|
||
<button @click="handleLogout" class="btn btn-light">Выход</button>
|
||
</template>
|
||
<template v-else>
|
||
<router-link to="/login" class="btn btn-outline-light me-2">Войти</router-link>
|
||
<router-link to="/register" class="btn btn-light">Регистрация</router-link>
|
||
</template>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<main class="container">
|
||
<router-view /> <!-- Сюда Vue Router будет рендерить компонент текущего маршрута -->
|
||
</main>
|
||
|
||
<footer class="app-footer mt-auto py-3 bg-light text-center">
|
||
<div class="container">
|
||
<span class="text-muted">© {{ new Date().getFullYear() }} Dating App PWA</span>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useAuth } from '@/auth'; // Убедись, что путь '@/auth' правильный
|
||
import { ref, watch, onMounted } from 'vue';
|
||
|
||
const { user, isAuthenticated, logout, fetchUser } = useAuth();
|
||
|
||
// Используем локальные переменные для отслеживания состояния
|
||
const userData = ref(null);
|
||
const authState = ref(false);
|
||
|
||
// Обновляем локальные переменные при изменении состояния аутентификации
|
||
watch(() => isAuthenticated.value, (newVal) => {
|
||
console.log('isAuthenticated изменился:', newVal);
|
||
authState.value = newVal;
|
||
});
|
||
|
||
// Обновляем локальную копию данных пользователя
|
||
watch(() => user.value, (newVal) => {
|
||
console.log('Данные пользователя изменились:', newVal);
|
||
userData.value = newVal;
|
||
});
|
||
|
||
// При монтировании компонента синхронизируем состояние
|
||
onMounted(() => {
|
||
console.log('App.vue монтирован, проверка состояния аутентификации');
|
||
authState.value = isAuthenticated.value;
|
||
userData.value = user.value;
|
||
|
||
// Убедимся, что у нас есть актуальные данные пользователя
|
||
if (localStorage.getItem('userToken') && !isAuthenticated.value) {
|
||
fetchUser();
|
||
}
|
||
});
|
||
|
||
const handleLogout = async () => {
|
||
try {
|
||
await logout();
|
||
console.log('Пользователь успешно вышел из системы (из App.vue)');
|
||
authState.value = false;
|
||
userData.value = null;
|
||
} catch (error) {
|
||
console.error('Ошибка при выходе:', error);
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
/* Глобальные стили */
|
||
html, body {
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||
color: #212529;
|
||
background-color: #f8f9fa; /* Светлый фон для всего приложения */
|
||
}
|
||
|
||
#app-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.app-header .navbar-brand {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.app-header .btn {
|
||
min-width: 100px; /* Чтобы кнопки были примерно одинаковой ширины */
|
||
}
|
||
|
||
main.container {
|
||
flex-grow: 1;
|
||
padding-top: 1rem;
|
||
padding-bottom: 1rem;
|
||
}
|
||
|
||
/* Можно добавить стили для .app-footer, если нужно, чтобы он был прижат к низу */
|
||
/* Либо используй классы Bootstrap для flex-grow-1 на main и mt-auto на footer */
|
||
</style> |