Discuter des méthodes d'autorisation pour les applications Vue d'une seule page

Vue est un framework frontal pour le développement d'applications monopage (SPA), qui peut aider les développeurs à créer des expériences utilisateur efficaces, fluides et interactives. Cependant, l'autorisation est également un problème important lors du développement d'applications Vue monopage, puisque seuls les utilisateurs autorisés peuvent accéder à des parties spécifiques de la page. Dans cet article, nous discuterons des méthodes d'autorisation d'application Vue sur une seule page.

1. Autorisation basée sur le routage

La fonction de routage de Vue peut autoriser des pages en fonction des rôles et des autorisations des utilisateurs à chaque chargement de la page. Tout d'abord, vous devez configurer le routage dans votre application Vue. Une route est un objet JavaScript qui contient l'URL et les composants qui définissent et correspondent à la route. Vous pouvez utiliser le garde de navigation du routeur pour mettre en œuvre l'autorisation.

Les protections de navigation sont un ensemble de fonctions de crochet permettant de gérer le routage. La fonction de hook beforeEach vous aide à autoriser l'utilisateur avant de naviguer vers un nouvel itinéraire.

Supposons que votre application Vue ait deux rôles d'utilisateur : utilisateur normal et administrateur. Seuls les administrateurs peuvent accéder à la page d'administration. Vous devez ajouter un attribut isAdmin à votre configuration de routage.

const routes = [
  {
    path: '/user',
    component: UserComponent
  },
  {
    path: '/admin',
    component: AdminComponent,
    meta: { requiresAuth: true, isAdmin: true }
  },
  {
    path: '/login',
    component: LoginComponent
  }
];

Dans le code ci-dessus, nous définissons les propriétés meta.requiresAuth et meta.isAdmin. requireAuth signifie qu'une authentification est requise pour accéder, et isAdmin signifie que seuls les administrateurs peuvent accéder à la page.

Maintenant, ajoutez la fonction de hook beforeEach dans le routeur Vue pour vérifier si l'utilisateur dispose des rôles et des autorisations requis.

router.beforeEach((to, from, next) => {
  const currentUser = auth.currentUser
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const isAdmin = to.matched.some(record => record.meta.isAdmin)
  
  if(requiresAuth && !currentUser) next('/login')
  else if(isAdmin && currentUser.role !== 'admin') next('/user')
  else next()
})

2. Autorisation basée sur les composants

Si vous souhaitez autoriser dans un composant Vue, vous pouvez utiliser les fonctions de hook de cycle de vie de Vue telles que créées et montées.

La fonction hook créée du composant peut vous aider à vérifier les rôles et les autorisations des utilisateurs lors de la création du composant.

created() {
  const currentUser = auth.currentUser
  const isAdmin = this.$route.meta.isAdmin
  
  if(isAdmin && currentUser.role !== 'admin') this.$router.push('/user')
}

Dans le code ci-dessus, nous avons vérifié l'attribut isAdmin et le rôle de l'utilisateur actuel lors de la création du composant. Si l'utilisateur n'est pas un administrateur, il sera automatiquement redirigé vers la page utilisateur.

Et la fonction montée peut vous aider à vérifier les rôles et les autorisations une fois le rendu de la page terminé.

mounted() {
  const currentUser = auth.currentUser
  const isAdmin = this.$route.meta.isAdmin
  
  if(isAdmin && currentUser.role !== 'admin') this.showAdminPanel = false
  else this.showAdminPanel = true
}

Dans le code ci-dessus, nous avons vérifié l'attribut isAdmin et le rôle de l'utilisateur actuel après le rendu de la page. Si l'utilisateur n'est pas un administrateur, le panneau d'administrateur sera masqué.

Résumé

La mise en œuvre de l'autorisation dans une application Vue monopage nécessite l'utilisation de fonctions de routage et de gardes de navigation. L'autorisation basée sur l'itinéraire vous permet d'autoriser une page à chaque fois qu'elle se charge, tandis que l'autorisation basée sur les composants vous permet d'autoriser les utilisateurs une fois le rendu de la page terminé. Quelle que soit la méthode d'autorisation que vous choisissez, vous devez la mettre en œuvre en tenant compte en détail des besoins et des caractéristiques de votre application Vue actuelle.

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!