Utilisez beforeEach de vue-route pour implémenter la fonction de garde de navigation (vérifier la connexion avant le saut de routage)

Une telle exigence est couramment rencontrée sur les sites Web. Certaines vérifications doivent être effectuées avant les sauts de routage, comme la vérification de la connexion (rendez-vous sur la page de connexion si vous n'êtes pas connecté). Ci-dessous, je vous présente la fonction de navigation guard (vérifier la connexion avant le saut d'itinéraire) en utilisant beforeEach de vue-route. Les amis intéressés devraient y jeter un œil

Faites quelques vérifications avant le saut d'itinéraire, comme l'authentification de connexion (allez sur le site). page de connexion sans vous connecter) est une exigence courante sur les sites Web. À cet égard, beforeRouteUpdate fourni par vue-route peut facilement implémenter des gardes de navigation (navigation-guards).

Le nom navigation-guards semble bizarre, mais puisque le document officiel le traduit ainsi, appelons-le ainsi.

Tout d'abord, extraitons l'utilisation de beforeRouteUpdate dans un document :

Vous pouvez utiliser router.beforeEach pour enregistrer un front guard global :

const router = new VueRouter({ ... }) 
router.beforeEach((to, from, next) => { 
 // ... 
})

Lorsqu'une navigation est déclenchée, la garde avant globale est appelée dans l'ordre de création. Les gardes sont analysées et exécutées de manière asynchrone. À ce stade, la navigation attend que toutes les gardes soient résolues.

Chaque méthode de garde reçoit trois paramètres :

vers : Route : l'objet route cible à saisir

depuis : Route : la navigation actuelle Le route qui est sur le point de partir

suivant : Fonction : Cette méthode doit être appelée pour résoudre ce hook. L'effet d'exécution dépend des paramètres d'appel de la méthode suivante.

next() : passez au hook suivant dans le pipeline. Si tous les hooks sont exécutés, l'état de navigation est confirmé.

next(false) : Interrompre la navigation en cours. Si l'URL du navigateur change (peut-être manuellement par l'utilisateur ou par le bouton Précédent du navigateur), l'adresse URL sera réinitialisée à l'adresse correspondant à l'itinéraire d'origine.

next('/') ou next({ path: '/' }) : accédez à une autre adresse. La navigation en cours est interrompue et une nouvelle navigation démarre.

next(error) : (2.4.0+) Si le paramètre passé à next est une instance d'Erreur, la navigation sera terminée et l'erreur sera transmise au rappel enregistré par router.onError().

Assurez-vous d'appeler la méthode suivante, sinon le hook ne sera pas résolu.

Écrivez un exemple ci-dessous. Dans le blog précédent, notre page de compte, y compris les cours et les commandes, doit déterminer si vous êtes connecté avant de sauter. Si vous êtes connecté, allez à la page de connexion ; . Accédez à la page d'accueil :

const vueRouter = new Router({ 
  routes: [ 
    //...... 
    { 
     path: '/account', 
     name: 'account', 
     component: Account, 
     children: [ 
      {name: 'course', path: 'course', component: CourseList}, 
      {name: 'order', path: 'order', component: OrderList} 
     ] 
    } 
  ] 
}); 
vueRouter.beforeEach(function (to, from, next) { 
  const nextRoute = [ 'account', 'order', 'course']; 
  const auth = store.state.auth; 
  //跳转至上述3个页面 
  if (nextRoute.indexOf(to.name) >= 0) { 
    //未登录 
    if (!store.state.auth.IsLogin) { 
      vueRouter.push({name: 'login'}) 
    } 
  } 
  //已登录的情况再去登录页，跳转至首页 
  if (to.name === 'login') { 
    if (auth.IsLogin) { 
      vueRouter.push({name: 'home'}); 
    } 
  } 
  next(); 
});

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Discussion des problèmes liés à readyState et au statut dans Ajax

Analyse complète de $.Ajax( ) Paramètres de la méthode (tutoriel graphique)

Téléchargement de fichiers avec barre de progression basée sur la technologie Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!