Bonjour ,
j’ai une application web créer avec quasar (VUEJS3) dans la page d’acceuil j’ai un formulaire de connexion et de d’inscription
CONNEXION :
INSCRIPTION :
voici le code de la page login :
<template>
<div class="q-px-xl">
<br />
<div class="flex flex-center">
<q-img src="../assets/download.jpeg" />
</div>
<div class="text-h6">
<h5 class="flex flex-center"> {{ access? 'CONNEXION': 'INSCRIPTION' }} </h5>
</div>
<div class="text-subtitle2">
<q-form @submit.prevent="ProcessForm" class="flex flex-center ">
<div>
<q-input label="Email" type="email" autocomplete="username" v-model="email" placeholder="Email" name="email"
required rounded outlined />
<q-input label="Password" type="password" autocomplete="current-password" v-model="password"
placeholder="Password" name="password" required rounded outlined />
<br>
<q-btn color="primary" :label="access ? 'Se Connecter' : 'Inscrire'" type="submit" outline rounded />
<q-btn color="green" outline rounded v-if="!access" @click="access = true">
Vous avez deja un compte ?
</q-btn>
<q-btn color="negative" outline rounded v-else @click="access = false"> Vous n'êtes pas encore inscrit ?
</q-btn>
</div>
</q-form>
</div>
</div>
</template>
<script>
import { ref, defineComponent, onBeforeMount } from "vue";
import firebase from "firebase/app";
import { useRouter } from "vue-router";
import "firebase/auth";
import { useStore } from "vuex";
import Vuex from "vuex";
import { useQuasar, SessionStorage } from 'quasar';
export default defineComponent({
setup() {
const email = ref("");
const password = ref("");
const access = ref(true);
const router = useRouter();
const store = useStore();
const $q = useQuasar();
const ProcessForm = async () => {
if (!email.value.trim() || !password.value.trim()) {
return;
}
try {
if (!access.value) {
//Register
firebase
.auth()
.createUserWithEmailAndPassword(email.value, password.value)
.then(response => {
// Sign up
$q.notify({
message: "Vous êtes bien inscrit",
timeout: 2000,
color: "green",
});
console.log(response);
// ...
})
.catch(error => {
const errorCode = error.code;
const errorMessage = error.message;
});
} else {
//Login
firebase.auth().onAuthStateChanged((user) =>
{
if (user) {
// User logged in already or has just logged in.
SessionStorage.set("uid", user.uid)
} else {
// User not logged in or has just logged out.
}
});
firebase.auth().signInWithEmailAndPassword(email.value, password.value).then(response => {
$q.notify({
message: "Vous êtes Connecté avec succès",
timeout: 2000,
color: "green",
});
// Sign in
SessionStorage.set("user", email.value);
router.push("content");
})
//Sign in failed
.catch(error => {
const errorCode = error.code;
const errorMessage = error.message;
$q.notify({
message: "Email/Mot de passe sont Incorrecte",
timeout: 2000,
color: "blue",
});
});
}
} catch (error) {
console.log(error);
}
};
return {
email,
password,
ProcessForm,
access,
store,
};
},
});
</script>
<style lang="css">
.q-img {
height: 100px;
width: 250px;
align-content: center;
}
</style>
dans le route j’ai ca :
{
path: "content",
component: () => import("src/pages/DisplayByDate.vue"),
beforeEnter: (to, from, next) => {
const connected = SessionStorage.getItem("user");
const uid = SessionStorage.getItem("uid");
if (connected && uid) {
next();
} else {
next("/");
}
},
},
quand je me connecte sur l’application ca marche la connexion mais quand je crée un nouveau utilisateur les memes données reste afficher , moi je veux créer une session a part pour chaque utilisateur
liste des utilisateurs créer par le formulaire d’inscription :
l’affichage du contenu pour utilisateur 1 :
l’affichage du contenu pour utilisateur 2 :
code du tableau affiché
<table id="appartement">
<thead>
<tr>
<th scope="col">Numero d'Appartement</th>
<!-- <th scope="col">Nom d'immeuble</th> -->
<th scope="col">Nom du Proprietaire d'appartement</th>
<th scope="col">Nombres de pieces</th>
<th scope="col">Superficie</th>
<th scope="col">Numero d'etage</th>
<th scope="col">Date</th>
<th scope="col">Montant</th>
<!-- <th>Action</th> -->
</tr>
</thead>
<tr v-for="apart in store.getters['global/getApart']" :key="apart.id">
<td>{{ apart.num_apart }}</td>
<!-- <td>{{ apart.nom_immeuble }}</td> -->
<td>{{ apart.nom_proprietaire_apart }}</td>
<td>{{ apart.nbr_pieces }}</td>
<td>{{ apart.superficie }}</td>
<td>{{ apart.num_etage }}</td>
<td>{{ apart.date }}</td>
<td>{{ apart.montant }}</td>
<!-- <td>
<q-btn @click.stop.prevent="ShowUpdateForm(apart)" color="secondary" label="Modifier" />
<q-btn color="red" label="Supprimer" @click.prevent="deleteApart(apart.id)" />
</td> -->
</tr>
</table>
vous remarquez que tous les tulisateurs affiche les meme donées , je veux par exemple quand je fais l’inscription d’un nouveau utilisateur et quand je me connecte avec , il dois m’afficher tableau vide et je fais l’ajout des données corespond a cet utilisateur seulement
par exemple : quand je me connecte par user 1 :
il m’affiche les données corespond seulement pour user1 , etc …
meme choses pour chaque user enregistré
comment faire ca ?
SVP aidez moi 
NB: j’utilise la methode onMounted comme ceci dans MainLayout
onMounted(() => {
db
.collection("appartements")
.get()
.then(snapshot => {
const liste = [];
snapshot.docs.forEach(doc => {
liste.push({ id: doc.id, ...doc.data() });
});
store.commit("global/setApart", liste);
});
db.collection("habitants")
.get()
.then(snapshot => {
console.log(snapshot.docs);
const liste = [];
snapshot.docs.forEach(doc => {
liste.push({ id: doc.id, ...doc.data() });
});
store.commit("global/setHab", liste);
});
db.collection("interventions")
.get()
.then(snapshot => {
const liste = [];
snapshot.docs.forEach(doc => {
liste.push({ id: doc.id, ...doc.data() });
});
store.commit("global/setInterv", liste);
});
db.collection("cotisations")
.get()
.then(snapshot => {
const liste = [];
snapshot.docs.forEach(doc => {
liste.push({ id: doc.id, ...doc.data() });
});
store.commit("global/setCotis", liste);
});
db.collection("immeubles")
.get()
.then(snapshot => {
const liste = [];
snapshot.docs.forEach(doc => {
liste.push({ id: doc.id, ...doc.data() });
});
store.commit("global/setMob", liste);
});
});