Description

J'essaye de diriger automatiquement l'utilisateur vers le composant "Games.vue" s'il est déjà connecté. Pour l'authentification, j'utilise Firebase et je vérifie s'ils sont connectés en utilisant:

var user = firebase.auth().currentUser;

if (user) {
  // User is signed in.
} else {
  // No user is signed in.
}

Ce que je souhaite, c'est que l'utilisateur ne voie pas la page de connexion s'il est déjà connecté. Il est donc directement redirigé vers la page des jeux. Je ne sais pas comment y parvenir en utilisant Vue. J'ai besoin de quelque chose à exécuter avant le composant de connexion qui redirige si vous êtes connecté.

Tentative de solution

La seule façon dont je sais comment résoudre ce problème est d'afficher la page de connexion, de vérifier si l'utilisateur Firebase est connecté, puis d'accéder à la page Jeux. Cela peut fonctionner, mais ce n'est pas le comportement que je recherche. J'utilise le routeur Vue. Merci de votre aide.

1
atk9022 15 mars 2021 à 14:06

1 réponse

Meilleure réponse

Je suggérerais d'utiliser une garde globale VueRouter comme ceci:

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  if (!user) {
    next('login');
  } else {
    next();
  }
})

Cela étant dit, vous avez alors besoin d'un moyen de spécifier quelle route nécessite une authentification. Je suggérerais d'utiliser des champs méta de route comme ceci:

routes = [
  {
    name: 'login',
    path: '/login',
    meta: {
      requiresAuth: false
    }
  },
  {
    name: 'games',
    path: '/games',
    meta: {
      requiresAuth: true
    }
  }
]

Maintenant, vos gardes deviennent:

if (!user && to.meta.requiresAuth) {
  next('login');
} else {
  next();
}

Le routeur Vue fournit un exemple pour ce cas d'utilisation, jetez un œil à la documentation.

CONSEIL: Assurez-vous de vous abonner aux modifications d'authentification à l'aide de la méthode Firebase onAuthStateChanged.

let user = firebase.auth().currentUser;
firebase.auth().onAuthStateChanged(function(user) {
  user = user;
});
1
Gaetan C. 15 mars 2021 à 11:24