Newer
Older
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import { ref, onMounted } from 'vue';
let isConnected = ref(false);
let firstname = ref('');
function checkConnection() {
const req = fetch('http://localhost:3000/user', { credentials: 'include' }).then(response => {
if (response.ok) {
isConnected.value = true;
return response.json();
} else {
isConnected.value = false;
return null;
}
}).then(data => {
if (data) {
firstname.value = data.firstname;
}
}).catch(erreur => {
console.error('Erreur lors de l\'appel API :', erreur);
isConnected.value = false;
});
}
function logout() {
const req = fetch('http://localhost:3000/user/logout', { credentials: 'include' }).then(response => {
if (response.ok) {
isConnected.value = false;
}
}).catch(erreur => {
console.error('Erreur lors de l\'appel API :', erreur);
});
}
onMounted(() => {
checkConnection();
});
<ul>
<li class = "gauche"> <router-link to="/">
Projet S5
</router-link></li>
<li class = "droite"><router-link v-if="!isConnected" to="/inscription">Inscription</router-link></li>
<li class = "droite"><router-link v-if="!isConnected" to="/connexion">Connexion</router-link></li>
<li class = "droite"><router-link v-if="isConnected" to="/account">Mon compte : {{ firstname }} </router-link></li>
<li class = "droite"><a v-if="isConnected" @click="logout">Déconnexion</a></li>
</ul>
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<style scoped>
header {
padding: 0;
margin: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li.gauche {
float: left;
}
li.droite {
float: right;
}
li.gauche a {
font-weight: bold;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
button {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
</style>