Comment écrire l'authentification vue

Vue est un framework front-end populaire qui offre facilité d'utilisation et flexibilité. Lors du développement d'applications Vue, il est souvent nécessaire de mettre en œuvre des fonctions d'authentification et d'autorisation des utilisateurs pour garantir que seuls les utilisateurs authentifiés peuvent accéder aux ressources restreintes. Cet article expliquera comment implémenter l'authentification dans Vue.

1. Déterminez la méthode d'authentification

Avant de commencer à écrire la fonction d'authentification, vous devez déterminer la méthode d'authentification à utiliser. Les méthodes d'authentification courantes incluent le contrôle d'accès basé sur les rôles (RBAC) et le contrôle d'accès basé sur les autorisations (ABAC). RBAC est une stratégie d'autorisation d'accès qui contrôle l'accès aux ressources en attribuant des utilisateurs à des rôles et en accordant des autorisations spécifiques à chaque rôle. ABAC est une politique d'autorisation d'accès qui établit un ensemble de règles entre les utilisateurs et les ressources pour déterminer si un utilisateur spécifique dispose de droits d'accès.

Dans les applications Vue, les étapes spécifiques pour implémenter les méthodes d'authentification RBAC ou ABAC seront différentes, vous devez donc choisir la méthode appropriée en fonction des exigences de l'application.

2. Mise en œuvre de l'authentification de l'identité

Avant de mettre en œuvre l'authentification, l'authentification de l'identité de l'utilisateur doit être mise en œuvre. Cela se fait généralement en récupérant les informations d'identification de l'utilisateur dans un formulaire de connexion et en les envoyant au serveur pour vérification. Si l'authentification réussit, une réponse contenant des informations d'identité sur l'utilisateur et un jeton est générée et stockée dans le stockage local de l'application ou dans un cookie.

Voici un exemple de code dans lequel l'utilisateur saisit son nom d'utilisateur et son mot de passe et les envoie au serveur pour vérification :

methods: {
  login() {
    axios.post('/auth/login', {username: this.username, password: this.password})
      .then(response => {
        const {user, token} = response.data
        localStorage.setItem('user', JSON.stringify(user))
        localStorage.setItem('token', token)
      })
      .catch(error => {
        console.error(error)
      })
  }
}

3. Écriture de Vue Route Guards

Vue fournit une fonctionnalité appelée "Route Guards", elle permet aux développeurs de joindre fonctions d'intercepteur sur les routes et appelle ces intercepteurs au début de la navigation, pendant les gardes exclusives de route et pendant les gardes globales de route.

Dans Vue, le contrôle d'accès peut être mis en œuvre à l'aide de gardes d'itinéraire pour garantir que seuls les utilisateurs authentifiés peuvent accéder aux itinéraires restreints. Voici un exemple de code où un garde de route Vue intercepte les routes autorisées :

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      meta: { requiresAuth: true }
    }
  ]
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token') !== null
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next({ name: 'home' })
  } else {
    next()
  }
})

Dans le code ci-dessus, lorsque l'utilisateur tente d'accéder à une route marquée avec les métadonnées "requiresAuth", entre la garde exclusive de route et la garde globale sont appelées Routing hook fonction. Si l'utilisateur s'est authentifié, l'accès à la route est autorisé. Sinon, redirigez vers la page de connexion.

4. Mise en œuvre de l'authentification RBAC et ABAC

Les méthodes de mise en œuvre de l'authentification RBAC et ABAC sont différentes. En termes simples, RBAC divise les utilisateurs en rôles et autorisations et les attribue à des rôles déjà définis. ABAC établit des politiques de sécurité sous forme d'ensemble et applique ces politiques lors des demandes d'accès afin de déterminer quels utilisateurs ont accès aux ressources restreintes.

Lors de la mise en œuvre de l'authentification RBAC, il est nécessaire de créer un mappage entre les rôles et les autorisations des utilisateurs, et d'attribuer des rôles à chaque utilisateur. L'application peut alors décider si l'utilisateur est autorisé à accéder à une ressource spécifique en fonction du rôle de l'utilisateur. Voici un exemple de code :

const roles = {
  admin: {
    permissions: ['user:list', 'user:create', 'user:edit']
  },
  manager: {
    permissions: ['user:list', 'user:edit']
  },
  member: {
    permissions: []
  }
}

function checkPermission(permission) {
  const user = JSON.parse(localStorage.getItem('user'))
  const userRole = user.role
  if (roles[userRole]) {
    return roles[userRole].permissions.includes(permission)
  } else {
    return false
  }
}

const routes = [
  {
    path: '/dashboard',
    name: 'dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, permission: 'user:list' }
  }
]

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'login' })
  } else if (to.meta.permission && !checkPermission(to.meta.permission)) {
    next({ name: 'home' })
  } else {
    next()
  }
})

Dans le code ci-dessus, le mappage de rôle est stocké dans l'objet rôles. Les rôles des utilisateurs sont déterminés par les informations utilisateur stockées dans localStorage. La fonction réelle qui vérifie les autorisations, checkPermission(), vérifie si l'utilisateur dispose des autorisations spécifiées.

Lors de la mise en œuvre de l'autorisation ABAC, vous devez rédiger des politiques qui vérifient comment l'accès est utilisé pour effectuer des opérations de sécurité sur les ressources. Prenons l'exemple du contrôle d'accès basé sur les attributs (ABAC). ABAC définit un ensemble de règles qui vérifient si un utilisateur peut accéder aux ressources en fonction des attributs liés à l'utilisateur (tels que le rôle, l'emplacement ou l'appareil possédé).

Ce qui suit est un exemple de code dans lequel les gardes d'itinéraire Vue utilisent des attributs pour appliquer les politiques ABAC :

const permissions = {
  'user:list': {
    condition: 'user.role === "admin" || user.role === "manager"'
  },
  'user:create': {
    condition: 'user.role === "admin"'
  },
  'user:edit': {
    condition: 'user.role === "admin" || (user.role === "manager" && user.department === "it")'
  }
}

const checkPermission = (permission) => {
  const user = JSON.parse(localStorage.getItem('user'))
  const rule = permissions[permission]
  return rule && eval(rule.condition)
}

const routes = [
  {
    path: '/dashboard',
    name: 'dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, permission: 'user:list' }
  }
]

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'home' })
  } else if (to.meta.permission && !checkPermission(to.meta.permission)) {
    next({ name: 'home' })
  } else {
    next()
  }
})

Dans le code ci-dessus, chaque règle d'autorisation d'accès a un attribut de condition qui définit les attributs que l'utilisateur doit satisfaire pour accéder à une ressource spécifique. La fonction checkPermission() utilise la fonction eval() pour interpréter et exécuter l'attribut condition de la règle.

Résumé

Pour implémenter l'authentification dans une application Vue, vous devez déterminer la méthode d'authentification, implémenter la vérification d'identité, écrire des gardes de routage Vue et implémenter l'authentification RBAC ou ABAC. Quelle que soit la méthode d'authentification utilisée, Vue route guard est la technologie clé pour obtenir l'autorisation. En utilisant Vue route guards et en implémentant l'authentification RBAC ou ABAC, vous pouvez facilement autoriser l'accès et protéger les ressources restreintes de votre application.

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!