Utilisez Vue Router pour implémenter un contrôle de redirection basé sur les rôles

Utilisez Vue Router pour implémenter un contrôle de redirection basé sur les rôles

Lors du développement d'applications Web, vous rencontrez souvent des situations dans lesquelles vous devez restreindre les autorisations d'accès en fonction des rôles des utilisateurs. Vue Router est une bibliothèque de gestion de routage très pratique qui peut nous aider à implémenter des fonctions de routage dans les applications Vue.js. Cet article explique comment utiliser Vue Router pour implémenter un contrôle de redirection basé sur les rôles et fournit des exemples de code spécifiques.

Tout d'abord, nous devons installer et configurer Vue Router. Vue Router peut être installé via npm ou Yarn :

npm install vue-router

Après l'installation, introduisez Vue Router dans l'instance principale de Vue.js :

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Ensuite, nous devons définir la configuration de routage de l'application. Dans la configuration du routage, nous pouvons spécifier le chemin, les composants et les rôles d'autorisation requis pour chaque route.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true, requiredRoles: ['admin', 'user'] }
  },
  {
    path: '/admin',
    name: 'Admin',
    component: Admin,
    meta: { requiresAuth: true, requiredRoles: ['admin'] }
  },
  {
    path: '/user',
    name: 'User',
    component: User,
    meta: { requiresAuth: true, requiredRoles: ['user'] }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

Dans le code ci-dessus, nous avons défini quatre routes, à savoir la page d'accueil (Home), la page administrateur (Admin), la page utilisateur (User) et la page de connexion (Login). Pour les routes qui nécessitent un contrôle d'autorisation, nous utilisons le champ méta pour spécifier les rôles d'autorisation requis. Dans cet exemple, le rôle « admin » peut accéder à la page administrateur, le rôle « utilisateur » peut accéder à la page utilisateur et la page d'accueil nécessite les autorisations des rôles « administrateur » et « utilisateur ».

Ensuite, nous devons configurer le routage dans l'instance de Vue Router :

const router = new VueRouter({
  routes
})

Ensuite, nous pouvons utiliser la protection frontale globale de Vue Router pour implémenter un contrôle de redirection basé sur les rôles. Avant chaque navigation sur un itinéraire, nous vérifions si le rôle de l'utilisateur correspond aux rôles requis pour accéder à l'itinéraire.

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const requiredRoles = to.meta.requiredRoles

  const currentUser = getUserFromLocalStorage()

  if (requiresAuth && !currentUser) {
    next({
      path: '/login',
      query: { redirect: to.fullPath }
    })
  } else if (requiresAuth && !requiredRoles.includes(currentUser.role)) {
    next({
      path: '/',
      query: { redirect: to.fullPath }
    })
  } else {
    next()
  }
})

function getUserFromLocalStorage() {
  // 从本地存储中获取当前用户的角色信息
  // 这里需要根据你的实际情况来实现
  // 例如从 cookie 或 sessionStorage 中获取
  return { role: 'admin' }
}

Dans le code ci-dessus, nous implémentons le contrôle des autorisations via la garde beforeEach. Tout d'abord, nous vérifions si l'utilisateur est connecté (requiresAuth) et redirigeons vers la page de connexion sinon, en passant le chemin de la page actuelle comme paramètre de redirection (query.redirect). Nous vérifions ensuite si le rôle de l'utilisateur répond aux rôles requis pour accéder à l'itinéraire, et si le rôle ne répond pas aux exigences, redirigeons vers la page d'accueil.

Enfin, nous devons monter l'instance de routage dans l'application Vue.js :

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

À ce stade, nous avons terminé le processus d'implémentation du contrôle de redirection basé sur les rôles à l'aide de Vue Router. Avec l'exemple de code ci-dessus, nous pouvons restreindre l'accès d'un utilisateur à différentes pages en fonction de son rôle. Cela permet un développement d’applications Web plus flexible et plus sécurisé.

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!