web-dev-qa-db-fra.com

Comment rediriger vers une autre URL à l'intérieur du crochet vue-router beforeRouteEnter?

Je crée une page d'administration avec Vue.js 2 et je souhaite empêcher les utilisateurs non authentifiés d'accéder à /admin acheminez-les et redirigez-les vers /login. Pour cela, j'ai utilisé le In-Component Guard beforeRouteEnter dans le composant Admin comme suit

...
beforeRouteEnter(to, from, next) {
  if(userNotLogedIn) {
    this.$router.Push('/login');
  }
}

Le problème ici est que this n'est pas défini dans le crochet beforeRouteEnter. Alors, quelle est la bonne façon d'accéder à $router et rediriger vers une autre URL dans ce cas?

javascriptvue.jsvuejs2vue-router
12
Abdelaziz Mokhnache

Le documentation indique que:

La garde beforeRouteEnter n'a PAS accès à this, car la garde est appelée avant la confirmation de la navigation, donc le nouveau composant entrant n'a même pas encore été créé.

Vous pouvez rediriger vers une autre page en appelant next comme ceci:

beforeRouteEnter(to, from, next) {
  if(userNotLogedIn) {
    next('/login');
  }
}

Voici une autre façon d'obtenir le même résultat: Ainsi, au lieu d'utiliser beforeRouteEnter sur chaque route protégée, vous pouvez définir des routes protégées dans la configuration de votre routeur à l'aide d'une propriété meta, puis utiliser beforeEach accrocher tous les itinéraires et vérifier les itinéraires protégés et rediriger vers la page de connexion si nécessaire:

let router = new Router({    
  mode: 'history',    
  routes: [    
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      meta: {
        auth: true // A protected route
      },
    },    
    {
      path: '/login',
      name: 'Login',
      component: Login, // Unprotected route
    },
  ]
})

/* Use this hook on all the routes that need to be protected 
instead of beforeRouteEnter on each one explicitly */

router.beforeEach((to, from, next) => {    
  if (to.meta.auth && userNotLoggedIn) {
    next('/login')
  }    
  else {
    next()
  }    
})

// Your Vue instance
new Vue({
  el: '#app',
  router,
  // ...
})
17
Ikbel