Session pour chaque user dans firebase

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 :

Untitled

INSCRIPTION :

Untitled2

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 /> &nbsp;
          <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 /> &nbsp;
          <q-btn color="green" outline rounded v-if="!access" @click="access = true">
            Vous avez deja un compte ?
          </q-btn>
          &nbsp;
          <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" /> &nbsp;
                <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 :slight_smile:

@zicklag

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);
        });
    });

Je n’ai jamais utiliser Firebase, mais vous pouvez essayer ceci:

      db
             .collection("apartments")
             .where("uid", "==", uid) // filtre les données ici
             .to obtain()
             .then(snapshot => {
               list constant = [];
               snapshot.docs.forEach(doc => {
                 list.push({ id: doc.id, ...doc.data() });
               });
               store.commit("global/setApart", list);
             });

Peux tu essayer de voir quelqu’un qui a deja travailler avec firebase ?

Merci

Désolé, je ne connais personne que a déjà utilisé Firebase. :man_shrugging:

Merci Beaucoup , c’est bon j’ai regler le probleme :slight_smile: