122 lines
3.6 KiB
Vue
122 lines
3.6 KiB
Vue
<template>
|
|
<v-card class="bg-gradient" style="height: 100%">
|
|
<v-card-text class="d-flex justify-center align-center">
|
|
<v-card class="align-center justify-center h-auto w-66 card-bg">
|
|
<v-card-title class="d-flex justify-space-between">
|
|
<div>
|
|
<span>Добро пожаловать в </span>
|
|
<span><router-link :to="isAuthenticated ? '/wishlist' : '/auth_options'" class="link-no-decor">Wishlist</router-link>, </span>
|
|
<span v-if="isAuthenticated">{{ this.user['name'] }}!</span>
|
|
<span v-else>Гость!</span>
|
|
</div>
|
|
<span v-if="isAuthenticated" class="link-no-decor align-end" @click="logout">Выйти</span>
|
|
</v-card-title>
|
|
<v-card-text class="d-flex justify-center align-center">
|
|
<router-view/>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
import {useUserStore} from "../store/user.js";
|
|
import {watch} from "vue";
|
|
export default {
|
|
name: "Welcome",
|
|
data: () => ({
|
|
cardTitle: 'Hello world!',
|
|
isAuthenticated: false,
|
|
username: ''
|
|
}),
|
|
computed: {
|
|
user() {
|
|
const authStore = useUserStore();
|
|
return authStore.user;
|
|
},
|
|
},
|
|
methods: {
|
|
async logout() {
|
|
try {
|
|
const authStore = useUserStore();
|
|
let token = authStore.token;
|
|
await axios.get('/api/auth/logout',
|
|
{
|
|
headers:
|
|
{
|
|
Authorization: `Bearer ${token}`,
|
|
token: token
|
|
}
|
|
}
|
|
);
|
|
authStore.setUser(null);
|
|
authStore.setToken(null);
|
|
this.$router.push('/auth_options');
|
|
} catch (error) {
|
|
alert('Ошибка выхода');
|
|
}
|
|
},
|
|
checkUser(){
|
|
const authStore = useUserStore();
|
|
let token = authStore.token;
|
|
if (token){
|
|
axios.get(
|
|
'/api/auth/user',
|
|
{
|
|
headers:
|
|
{
|
|
Authorization: `Bearer ${token}`,
|
|
token: token
|
|
}
|
|
}
|
|
).then((res) => {
|
|
authStore.setUser(res.data);
|
|
}).catch((error)=>{
|
|
authStore.setUser(null);
|
|
authStore.setToken(null);
|
|
})
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$router.push('/auth_options');
|
|
const authStore = useUserStore();
|
|
watch(authStore, (newStore, oldStore)=>{
|
|
this.isAuthenticated = newStore.user !== null && newStore.user !== undefined;
|
|
if (this.isAuthenticated) {
|
|
this.$router.push('/wishlist');
|
|
} else {
|
|
this.$router.push('/auth_options');
|
|
}
|
|
});
|
|
this.checkUser();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
|
.bg-gradient {
|
|
background: linear-gradient(-45deg, #000610, #000f25, #00152f);
|
|
background-size: 100% 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.card-bg {
|
|
background-color: #212022;
|
|
color: white;
|
|
}
|
|
|
|
.link-no-decor {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.link-no-decor:hover {
|
|
color: #093160;
|
|
}
|
|
|
|
</style>
|