Explication détaillée de Vue Routing Guard et analyse de ses scénarios d'application

Avec le développement continu de la technologie front-end, Vue en tant que framework de développement devient de plus en plus populaire parmi les développeurs. Le mécanisme de routage de Vue fait également partie intégrante du framework Vue. Les systèmes de routage peuvent aider les développeurs à créer des applications complexes d'une seule page tout en offrant un moyen flexible de gérer l'état des pages et la navigation des utilisateurs. Dans ce cas, Vue Routing Guard devient un point de connaissance qu'il faut maîtriser.

Alors, que sont les gardes-route Vue ? Dans Vue.js, route guard est un mécanisme utilisé pour contrôler les sauts entre les pages. Il est principalement utilisé pour des opérations telles que la vérification des autorisations et la gestion des statuts lors de la navigation dans les pages. Les gardes de route Vue sont principalement divisés en trois types : les gardes de route globaux, les gardes de route exclusifs et les gardes au niveau des composants.

Global route guard :

Global route guard signifie un bloc de code qui doit être exécuté lorsque tous les itinéraires changent. Il existe trois principaux types de gardes de route globaux :

1. beforeEach(to, from, next)

est appelé avant l'entrée de la route. Vous pouvez effectuer une vérification des autorisations et d'autres opérations ici. Les paramètres vers et depuis représentent ceux qui. sont sur le point d'entrer et ceux qui sont sur le point de sortir respectivement.

L'exemple de code est le suivant :

router.beforeEach((to, from, next) => {
  // 进行权限验证等操作
  if (to.meta.requireAuth) {
    if (localStorage.getItem('token')) {
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  } else {
    next();
  }
})

2. afterEach(to, from)

est appelé après l'entrée de la route et est généralement utilisé pour des opérations telles que la journalisation.

L'exemple de code est le suivant :

router.afterEach((to, from) => {
  // 记录日志等操作
})

3. beforeResolve(to, from, next)

est appelé après l'analyse de la route et n'est utile que lors de l'utilisation du chargement différé de la route.

L'exemple de code est le suivant :

router.beforeResolve((to, from, next) => {
  // 进行路由解析后的处理
  next();
})

Garde exclusive d'itinéraire :

La garde exclusive d'itinéraire est une garde pour un certain itinéraire et n'est appelée que lorsque l'itinéraire actuel entre ou sort. L'utilisation est la suivante :

L'exemple de code est le suivant :

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 进行权限验证等操作
        if (localStorage.getItem('admin')) {
          next();
        } else {
          next({
            path: '/login',
            query: {redirect: to.fullPath}
          })
        }
      }
    }
  ]
})

Garde de niveau de composant :

La garde de niveau de composant fait référence à la garde de navigation à l'intérieur du composant et peut être utilisée pour gérer l'état interne du composant. Il existe quatre principaux types de gardes au niveau des composants :

1. beforeRouteEnter(to, from, next)

Appelée avant l'entrée de la route et utilisée lors de l'accès à l'état interne du composant.

L'exemple de code est le suivant :

export default {
  data() {
    return {
      user: null
    }
  },
  beforeRouteEnter(to, from, next) {
    const user = localStorage.getItem('user')
    if (user) {
      // 访问不到组件实例
      next(vm => {
        vm.user = user
      })
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  }
}

2. beforeRouteLeave(to, from, next)

Appelé avant le départ de l'itinéraire, il peut être utilisé pour confirmer s'il faut quitter l'itinéraire actuel ou enregistrer l'opération de modification.

L'exemple de code est le suivant :

export default {
  data() {
    return {
      text: ''
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.text !== '') {
      const confirmMsg = '您的修改还未保存，确定要离开吗？'
      if (confirm(confirmMsg)) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  }
}

3. beforeRouteUpdate(to, from, next)

est appelé lorsque l'itinéraire actuel est mis à jour pour mettre à jour l'état interne du composant.

L'exemple de code est le suivant :

export default {
  data() {
    return {
      user: null
    }
  },
  beforeRouteUpdate(to, from, next) {
    const user = localStorage.getItem('user')
    if (user) {
      this.user = user
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  }
}

4. beforeRouteLeave(to, from, next)

est appelé lors du rendu de l'itinéraire et peut être utilisé pour le rendu côté serveur et d'autres opérations.

L'exemple de code est le suivant :

export default {
  beforeRouteRender(to, from, next) {
    // 进行服务器端渲染等操作
    next();
  }
}

Grâce à l'introduction ci-dessus des gardes de routage, nous pouvons constater que les gardes de routage ont de nombreux scénarios d'application, tels que déterminer s'il faut se connecter, effectuer une vérification des autorisations, enregistrer les opérations de modification, etc. Différents scénarios nécessitent l'utilisation de différentes gardes de routage et vous devez choisir la garde appropriée pour le traitement pendant le développement.

En bref, Vue route guard est un élément très important s'il est utilisé correctement, il peut grandement améliorer la sécurité et la stabilité de l'application. Par conséquent, les développeurs doivent avoir une compréhension plus approfondie des scénarios d’utilisation et d’application des gardes-route.

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!