Vue-Router : Comment utiliser les gardes d'itinéraire pour protéger les itinéraires ?

Vue-Router : Comment utiliser les gardes d'itinéraire pour protéger les itinéraires ?

Dans le développement de Vue.js, Vue-Router est un outil important pour la gestion du routage front-end. En plus de nous permettre d'implémenter facilement des sauts de page et des effets de transition, Vue-Router fournit également un mécanisme de garde de route qui nous permet d'effectuer certaines opérations personnalisées avant et après les sauts de route, telles que l'authentification et l'attente de redirection.

Afin de mieux comprendre l'utilisation des gardes de route, nous les présenterons en trois parties : les gardes globales, les gardes exclusives à la route et les gardes intra-composantes.

1. Global guard

Global guard est une garde qui sera exécutée avant et après chaque saut d'itinéraire dans toute l'application. Nous pouvons l'enregistrer via la méthode fournie par Vue-Router. Il existe trois méthodes de garde globales, à savoir beforeEach, beforeResolve et afterEach. beforeEach、beforeResolve和afterEach。

在main.js文件中，我们可以通过如下代码进行注册：

import router from './router'

router.beforeEach((to, from, next) => {
  // 这里是你的自定义逻辑
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login') // 重定向到登录页
  } else {
    next()
  }
})

router.beforeResolve((to, from, next) => {
  // 这里是你的自定义逻辑
  next()
})

router.afterEach(() => {
  // 这里是你的自定义逻辑
})

在beforeEach方法中，我们可以根据实际情况进行鉴权判断，如果用户未登录且目标路由需要登录权限，我们可以通过next('/login')将用户重定向到登录页。

beforeResolve方法在路由解析完毕后被调用，可以在该方法中执行一些异步操作。

afterEach方法在路由跳转完成后被调用，可以用于执行一些全局的清理操作。

2. 路由独享守卫

路由独享守卫是针对某个具体路由进行的配置，只有在该路由中才会被起作用。我们可以在路由配置中使用beforeEnter属性来进行注册。

{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    // 这里是你的自定义逻辑
    if (!isAdmin()) {
      next('/access-denied') // 重定向到访问拒绝页
    } else {
      next()
    }
  }
}

在路由独享守卫中，我们可以根据实际需求进行逻辑判断，例如检查用户是否有管理员权限，如果没有，则重定向到访问拒绝页。

3. 组件内守卫

除了全局守卫和路由独享守卫外，Vue-Router还提供了组件内的守卫，用于在组件内部进行路由跳转的操作。组件内的守卫包括beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave

Dans le fichier main.js, nous pouvons nous inscrire via le code suivant :

export default {
  beforeRouteEnter (to, from, next) {
    // 这里是你的自定义逻辑
    if (!isAuthenticated()) {
      next('/login') // 重定向到登录页
    } else {
      next()
    }
  },
  beforeRouteUpdate (to, from, next) {
    // 这里是你的自定义逻辑
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 这里是你的自定义逻辑
    next()
  }
}

Dans la méthode beforeEach, nous pouvons porter des jugements d'authentification en fonction de la situation réelle si l'utilisateur n'est pas connecté. et la route cible nécessite Pour les autorisations de connexion, nous pouvons rediriger l'utilisateur vers la page de connexion via next('/login').

La méthode beforeResolve est appelée une fois la route résolue, et certaines opérations asynchrones peuvent être effectuées dans cette méthode.

La méthode afterEach est appelée une fois le saut de route terminé et peut être utilisée pour effectuer certaines opérations de nettoyage global. 🎜

🎜Garde exclusive d'itinéraire🎜🎜🎜La garde exclusive d'itinéraire est configurée pour un itinéraire spécifique et ne prendra effet que sur cet itinéraire. Nous pouvons utiliser l'attribut beforeEnter dans la configuration de routage pour nous inscrire. 🎜rrreee🎜Dans la garde exclusive de routage, nous pouvons porter des jugements logiques basés sur les besoins réels, comme vérifier si l'utilisateur dispose de droits d'administrateur et, dans le cas contraire, le rediriger vers la page de refus d'accès. 🎜
🎜Gardettes intra-composant🎜🎜🎜En plus des gardes globales et des gardes exclusives à l'itinéraire, Vue-Router fournit également des gardes intra-composant pour le routage des opérations de saut au sein du composant. Les gardes au sein du composant incluent beforeRouteEnter, beforeRouteUpdate et beforeRouteLeave. 🎜rrreee🎜Dans la garde à l'intérieur du composant, nous pouvons effectuer certaines opérations personnalisées en fonction des besoins réels, comme vérifier si l'utilisateur est connecté et, sinon, le rediriger vers la page de connexion. 🎜🎜Résumé : 🎜🎜Grâce aux trois méthodes ci-dessus, nous pouvons utiliser des gardes d'itinéraire pour protéger les itinéraires et mettre en œuvre certaines opérations personnalisées, telles que l'authentification, la redirection, etc. En fonction des besoins, nous pouvons choisir le type de garde approprié à configurer afin d'obtenir une gestion du routage plus flexible et plus maintenable. Dans le développement réel, nous pouvons utiliser ces protections de manière raisonnable en fonction de besoins spécifiques et de scénarios commerciaux pour améliorer la sécurité des applications et l'expérience utilisateur. 🎜

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!