Comment utiliser le routage pour implémenter le contrôle des autorisations au niveau de la page dans un projet Vue ?

Comment utiliser le routage pour implémenter le contrôle des autorisations au niveau de la page dans un projet Vue ?

Dans les projets Vue, nous devons souvent contrôler l'accès aux pages en fonction des rôles ou des autorisations des utilisateurs. La fonction de routage de Vue peut nous aider à mettre en œuvre un contrôle des autorisations au niveau de la page, afin que les utilisateurs ayant des rôles différents ne puissent accéder qu'aux pages pour lesquelles ils disposent d'une autorisation. Dans cet article, nous présenterons comment utiliser le routage pour implémenter le contrôle des autorisations au niveau de la page dans les projets Vue.

1. Installer et configurer Vue Router
   Tout d'abord, nous devons installer et configurer Vue Router. Vous pouvez utiliser npm ou Yarn pour installer Vue Router :

   npm install vue-router

   Copier après la connexion

   Ensuite, introduisez et installez Vue Router dans le fichier d'entrée du projet (comme main.js) :

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   Vue.use(VueRouter)

   Copier après la connexion

2. Créez une table de routage
   Ensuite, nous avons besoin pour créer une table de routage qui définit toutes les pages du projet et leurs chemins correspondants. Dans la table de routage, nous pouvons également définir les pages qui nécessitent un contrôle d'autorisation et quels rôles sont requis pour accéder à ces pages. Voici un exemple simple de table de routage :

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   import HomePage from '../views/HomePage.vue'
   import AdminPage from '../views/AdminPage.vue'
   import UserPage from '../views/UserPage.vue'
   
   Vue.use(VueRouter)
   
   const routes = [
     { path: '/', component: HomePage },
     { 
    path: '/admin', 
    component: AdminPage, 
    meta: { 
      requiresAuth: true, // 需要登录后才能访问
      roles: ['admin'] // 只有admin角色的用户可以访问
    }
     },
     { 
    path: '/user', 
    component: UserPage, 
    meta: { 
      requiresAuth: true, // 需要登录后才能访问
      roles: ['user', 'admin'] // 只要是user或admin角色的用户可以访问
    }
     }
   ]
   
   const router = new VueRouter({
     routes
   })
   
   export default router

   Copier après la connexion

Dans le code ci-dessus, nous définissons les pages qui nécessitent un contrôle d'autorisation et leurs rôles correspondants en ajoutant les attributs requireAuth et rôles au champ méta.

3. Implémentation du contrôle des autorisations
   Ensuite, nous devons porter des jugements sur le contrôle des autorisations lors des sauts de routage. Les gardes de navigation globaux peuvent être utilisés dans Vue Router pour implémenter le contrôle des autorisations.

Ouvrez le fichier router/index.js et ajoutez une fonction de garde de navigation globale :

router.beforeEach((to, from, next) => {
  const requiresAuth = to.meta.requiresAuth // 是否需要登录才能访问
  const roles = to.meta.roles // 页面所需的角色

  // 判断是否需要登录和角色是否匹配
  if (requiresAuth && !isLoggedIn()) {
    next('/login') // 没有登录，跳转到登录页面
  } else if (roles && !hasRole(roles)) {
    next('/404') // 没有权限，跳转到404页面
  } else {
    next() // 继续下一步
  }
})

function isLoggedIn() {
  // 判断用户是否登录
  // 返回true或false
}

function hasRole(roles) {
  // 判断用户角色是否匹配
  // 返回true或false
}

Dans le code ci-dessus, nous utilisons la méthode beforeEach pour ajouter une fonction de garde de navigation globale. Dans cette fonction, nous déterminons d'abord si la page nécessite une connexion. Si une connexion est requise mais que l'utilisateur n'est pas connecté, nous passerons à la page de connexion. Ensuite, nous déterminons si le rôle de l'utilisateur correspond, et sinon, passons à la page 404. Enfin, si la connexion et le rôle répondent aux exigences, continuez à charger la page.

4. Utilisé dans les composants
   Dans les composants qui nécessitent un contrôle d'autorisation, nous pouvons obtenir les informations de rôle requises par la page via le champ méta de la route. Nous pouvons utiliser ces informations pour déterminer s'il convient d'afficher ou de faire fonctionner certains éléments. Voici un exemple simple :

<template>
  <div>
    <h1 v-if="hasAdminRole">只有admin用户能看到这个标题</h1>
    <button v-if="hasUserRole">只有admin和user用户才能看到这个按钮</button>
    <p>页面内容</p>
  </div>
</template>

<script>
export default {
  computed: {
    hasAdminRole() {
      return this.$route.meta.roles.includes('admin')
    },
    hasUserRole() {
      return this.$route.meta.roles.includes('user')
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons l'attribut calculé pour déterminer si le rôle d'utilisateur actuel est inclus dans les rôles en méta, et si c'est le cas, affichons l'élément correspondant.

Grâce aux étapes ci-dessus, nous pouvons utiliser le routage pour implémenter le contrôle des autorisations au niveau de la page dans le projet Vue. Les utilisateurs ayant des rôles différents ne pourront accéder qu'aux pages pour lesquelles ils disposent d'autorisations, obtenant ainsi un contrôle précis des autorisations. J'espère que cela aide!

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!