Comment réinitialiser le mot de passe sur la page de connexion vue

En tant que framework front-end couramment utilisé, Vue.js est généralement utilisé pour créer des applications monopage (SPA) dans le développement Web. Dans le développement réel, nous rencontrons généralement des scénarios qui nécessitent une connexion utilisateur. Dans certains cas, les utilisateurs peuvent oublier leurs mots de passe, ce qui nous oblige à fournir une fonction de réinitialisation du mot de passe. Cet article expliquera comment implémenter la fonction de réinitialisation du mot de passe utilisateur dans Vue.js.

1. Concevoir une page de réinitialisation de mot de passe

Tout d'abord, nous devons concevoir une page permettant aux utilisateurs de réinitialiser leur mot de passe. Cette page doit contenir les éléments suivants :

• Un formulaire avec des champs permettant de saisir un nouveau mot de passe et de le confirmer.
• Un bouton de soumission pour soumettre une demande de réinitialisation de votre mot de passe.

Comme le montre la figure ci-dessous :

2. Création de routes

Dans Vue.js, nous devons utiliser des plug-ins de routage pour implémenter la gestion du routage des applications monopage. Par conséquent, avant d’implémenter la fonction de réinitialisation du mot de passe, nous devons d’abord créer une route. Si vous n'avez pas encore utilisé le plugin de routage Vue.js, veuillez consulter le chapitre « Routage » dans la documentation officielle de Vue.js. Ici, je suppose que vous avez appris à créer des routes dans Vue.js.

Nous pouvons définir un nouvel itinéraire dans les paramètres de routage pour afficher la page de réinitialisation du mot de passe. Comme indiqué ci-dessous :

{
  path: '/reset-password/:token',
  name: 'reset-password',
  component: ResetPassword
},

Ici, nous avons utilisé le routage dynamique pour transmettre le jeton de réinitialisation du mot de passe. Ce jeton peut être inclus dans les demandes de réinitialisation du mot de passe pour authentifier l'utilisateur.

3. Mise en œuvre de la fonction de réinitialisation du mot de passe

Une fois que nous avons configuré le routage, nous pouvons commencer à mettre en œuvre la fonction de réinitialisation du mot de passe. Tout d'abord, nous devons obtenir le jeton de réinitialisation du mot de passe de l'itinéraire lorsque la page s'affiche, comme indiqué ci-dessous :

mounted() {
  this.token = this.$route.params.token;
}

Ensuite, nous devons lier un événement de clic au bouton de soumission pour soumettre le nouveau mot de passe de l'utilisateur. Dans ce cas, nous enverrons une requête POST pour réinitialiser le mot de passe, comme indiqué ci-dessous :

methods: {
  onSubmit() {
    if (this.password !== this.confirmPassword) {
      alert('两次密码输入不一致');
      return;
    }

    fetch('http://localhost:8080/api/reset-password', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        password: this.password,
        confirmPassword: this.confirmPassword,
        token: this.token
      })
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        alert('重置密码成功');
        this.$router.push('/login');
      } else {
        alert(data.message);
      }
    });
  }
}

Dans le code ci-dessus, nous enverrons une requête POST pour réinitialiser le mot de passe au backend via la fonction fetch(). Nous incluons les données soumises dans le corps de la demande et définissons le Content-Type sur application/json dans les en-têtes. Enfin, nous déterminons si la requête a abouti en traitant les données de réponse du serveur. En cas de succès, nous pouvons accéder à la page de connexion (ou à une autre page).

4. Implémentation backend

Enfin, nous devons implémenter l'interface de réinitialisation du mot de passe côté serveur. Pour simplifier le problème, on suppose ici que nous utilisons Node.js + Express pour construire le serveur.

Tout d’abord, nous devons définir un itinéraire qui gère spécifiquement les demandes de réinitialisation de mot de passe. Cette route doit contenir une requête POST pour recevoir les demandes de données du frontend.

const express = require('express');
const router = express.Router();

router.post('/reset-password', (req, res) => {
  const { password, confirmPassword, token } = req.body;

  // ...
});

Ensuite, nous devons écrire une logique métier dans le routage pour vérifier l'identité de l'utilisateur et changer le mot de passe.

const express = require('express');
const router = express.Router();

router.post('/reset-password', (req, res) => {
  const { password, confirmPassword, token } = req.body;

  // 验证密码
  if (password !== confirmPassword) {
    return res.status(400).json({ success: false, message: '两次密码输入不一致' });
  }

  // 验证 token
  if (token !== '123456') {
    return res.status(400).json({ success: false, message: '验证失败' });
  }

  // 修改密码
  // TODO: 在这里实现修改密码的业务逻辑

  res.json({ success: true });
});

Dans l'itinéraire ci-dessus, nous obtenons les données soumises depuis le front-end via req.body. Ensuite, nous avons effectué deux vérifications : vérifier le mot de passe et vérifier le jeton. Si la validation échoue, nous renverrons une réponse d'erreur. Sinon, nous pouvons implémenter l'opération de modification du mot de passe dans la logique métier.

Dans le développement réel, la logique métier de modification des mots de passe peut nécessiter une connexion à la base de données pour enregistrer les données. Ici, nous montrons simplement comment recevoir des données du front-end et mettre en œuvre une logique métier basée sur les données reçues.

Résumé

À ce stade, nous avons présenté comment implémenter la fonction de modification des mots de passe dans Vue.js. Afin d'implémenter cette fonction, nous devons définir un itinéraire pour afficher la page, lier l'événement de clic du bouton de soumission et implémenter la logique métier correspondante côté serveur. Bien que cet article ne soit qu’un exemple d’extrait de code, vous pouvez l’étendre comme aperçu d’un projet.

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!