Comment implémenter l'authentification et l'autorisation des utilisateurs dans le projet Vue

Comment implémenter l'authentification et l'autorisation des utilisateurs dans le projet Vue

Ces dernières années, le framework front-end Vue est progressivement devenu le choix grand public pour le développement Web. Lors du développement d'un projet Vue, l'authentification et l'autorisation des utilisateurs sont des fonctions indispensables. Cet article présentera en détail comment implémenter l'authentification et l'autorisation des utilisateurs dans le projet Vue du point de vue de la mise en œuvre technique, et fournira des exemples de code spécifiques.

1. Authentification de l'utilisateur

L'authentification de l'utilisateur fait référence au processus de vérification de l'identité de l'utilisateur pour garantir que l'utilisateur dispose de l'autorisation légale d'accéder au système. Les méthodes courantes d'authentification des utilisateurs incluent la vérification du nom d'utilisateur et du mot de passe, la connexion par un tiers, etc. Ce qui suit utilise la vérification du nom d'utilisateur et du mot de passe comme exemple pour présenter la mise en œuvre de l'authentification des utilisateurs dans le projet Vue.

1. Créer le composant de page de connexion

Dans le projet Vue, vous devez d'abord créer le composant de page de connexion. Ce composant contient des zones de saisie pour le nom d'utilisateur et le mot de passe ainsi qu'un bouton de connexion. Lorsque l'utilisateur clique sur le bouton de connexion, l'authentification est effectuée en appelant l'API backend.

L'exemple de code est le suivant :

<template>
  <div>
    <input v-model="username" placeholder="请输入用户名" />
    <input v-model="password" placeholder="请输入密码" type="password" />
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      // 调用登录API，验证用户名和密码
      // 如果验证成功，将用户信息存储到本地或会话存储中
    },
  },
};
</script>

2. Vérifiez le nom d'utilisateur et le mot de passe

Dans la méthode de connexion, appelez l'API backend pour vérifier l'exactitude du nom d'utilisateur et du mot de passe. Si la vérification réussit, les informations utilisateur peuvent être enregistrées dans le stockage local ou dans le stockage de session pour faciliter les accès ultérieurs et le contrôle des autorisations.

L'exemple de code est le suivant :

methods: {
  login() {
    // 调用登录API，验证用户名和密码的正确性
    api.login(this.username, this.password)
      .then(response => {
        const { token, userInfo } = response.data;
        // 将token和用户信息存储到本地存储或会话存储中
        localStorage.setItem('token', token);
        localStorage.setItem('userInfo', JSON.stringify(userInfo));
        // 跳转到主页或其他需要认证的页面
        this.$router.push('/home');
      })
      .catch(error => {
        console.error('登录失败', error);
      });
  },
},

3. Stratégie d'authentification

Après l'authentification de l'utilisateur, l'authentification est généralement requise dans chaque page nécessitant une autorisation. Vous pouvez déterminer si l'utilisateur est autorisé à accéder à la page en vérifiant les informations utilisateur dans le stockage local ou dans le stockage de session.

L'exemple de code est le suivant :

beforeRouteEnter(to, from, next) {
  // 检查本地存储或会话存储中是否存在用户信息
  const userInfo = localStorage.getItem('userInfo');
  if (userInfo) {
    next();
  } else {
    // 用户未登录，跳转到登录页面
    next('/login');
  }
},

2. Autorisation de l'utilisateur

L'autorisation de l'utilisateur fait référence à la détermination des droits d'accès de l'utilisateur aux ressources du système. Dans le projet Vue, la gestion des autorisations des utilisateurs peut être réalisée via le mécanisme de garde de routage. Ce qui suit utilise les gardes de routage comme exemple pour présenter l'implémentation de l'autorisation utilisateur dans le projet Vue.

1. Définissez la table de routage

Dans le projet Vue, définissez la table de routage, y compris les pages qui nécessitent un contrôle d'autorisation.

L'exemple de code est le suivant :

const routes = [
  {
    path: '/home',
    component: Home,
    // 需要进行权限控制的页面，在路由元信息中定义所需的角色
    meta: { requiresAuth: true, roles: ['admin', 'user'] },
  },
  // 其他路由...
];

2. Effectuer l'autorisation dans le garde de routage

Utilisez le garde de navigation de Vue avantEach pour faire un jugement d'autorisation avant le saut de routage. Déterminez si l'utilisateur a l'autorisation d'accéder à la page en fonction des informations de rôle définies dans les informations utilisateur et les méta-informations de routage.

L'exemple de code est le suivant :

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth) {
    // 检查本地存储或会话存储中是否存在用户信息
    const userInfo = localStorage.getItem('userInfo');
    if (userInfo) {
      const { roles } = JSON.parse(userInfo);
      const requiredRoles = to.meta.roles;
      if (roles.some(role => requiredRoles.includes(role))) {
        // 用户具有访问页面的权限
        next();
      } else {
        // 用户权限不足，跳转到无权限页面
        next('/denied');
      }
    } else {
      // 用户未登录，跳转到登录页面
      next('/login');
    }
  } else {
    // 公开页面，无需授权
    next();
  }
});

Grâce aux exemples de code ci-dessus, nous pouvons implémenter des fonctions d'authentification et d'autorisation des utilisateurs dans le projet Vue. L'authentification de l'utilisateur garantit l'identité juridique de l'utilisateur en vérifiant le nom d'utilisateur, le mot de passe et d'autres informations. L'autorisation de l'utilisateur utilise le mécanisme de garde d'itinéraire pour déterminer si l'utilisateur a le droit d'accéder à la page avant le saut d'itinéraire. La mise en œuvre de ces fonctions peut nous aider à construire des projets Vue sûrs et fiables.

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!