Comment implémenter le contrôle des autorisations et les gardes de routage dans Vue ?

Comment implémenter le contrôle des autorisations et les gardes de routage dans Vue ?

En tant qu'excellent framework front-end, Vue fournit de nombreuses fonctions pratiques pour nous aider à créer des applications. Parmi eux, le routage et le contrôle des autorisations sont un élément indispensable. En développement, nous devons souvent restreindre les pages pour permettre uniquement à des utilisateurs ou à des autorisations spécifiques d'être visibles. À l'heure actuelle, les fonctions de garde de routage et de contrôle des autorisations de Vue sont utiles.

1. Contrôle des autorisations

Vue implémente le contrôle des autorisations via l'attribut méta de la configuration du routage. Vous pouvez faire ceci :

1. Ajouter un attribut méta d'itinéraire

Vous pouvez ajouter un contrôle d'autorisation à l'attribut méta de l'itinéraire pour déterminer si vous avez l'autorisation d'accéder à la page.

{
  path: '/dashboard',
  name: 'Dashboard',
  component: Dashboard,
  meta: {
    requiresAuth: true
  }
}

2. Write Routing Guards

Vue utilise des gardes de routage pour protéger les pages contre les accès illégaux. Vous pouvez ajouter la fonction hook beforeEnter dans l'itinéraire pour déterminer si vous disposez d'une autorisation d'accès avant d'accéder à la page.

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true
      },
      beforeEnter: (to, from, next) => {
        if (!store.getters.isLoggedIn) {
          next('/login');
        } else {
          next();
        }
      }
    }
  ]
})

Notez que store.getters.isLoggedIn est une fonction getter définie dans Vuex, qui est chargée de déterminer si l'utilisateur s'est connecté.

2. Route guard

Grâce au route guard de Vue, il peut intercepter les utilisateurs lorsque l'itinéraire saute et traiter l'accès de l'utilisateur.

1. Global route guard

Global route guard sera déclenché lorsqu'un itinéraire saute et peut être utilisé pour traiter des données globales telles que l'état de connexion et les informations utilisateur.

router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isLoggedIn) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

2. Garde exclusive d'itinéraire

La garde exclusive d'itinéraire est définie dans la configuration de routage actuelle et peut intercepter certains itinéraires individuellement.

{
  path: '/dashboard',
  name: 'Dashboard',
  component: Dashboard,
  beforeEnter: (to, from, next) => {
    // 判断用户权限
    if (store.getters.getPermission === ‘admin’) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  }
}

Dans la fonction de hook beforeEnter, déterminez si les autorisations de l'utilisateur sont suffisantes. Sinon, accédez à la page de connexion.

Résumé

La mise en œuvre du contrôle des autorisations et des gardes de routage dans Vue est un processus très pratique. En définissant le méta-attribut de la route et en utilisant des gardes de route, nous pouvons contrôler l'accès aux pages en fonction du statut de connexion et des autorisations de l'utilisateur. Cela garantit non seulement la sécurité de l'application, mais améliore également 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!