Bagaimana untuk menetapkan semula kata laluan pada halaman log masuk vue

Sebagai rangka kerja bahagian hadapan yang biasa digunakan, Vue.js biasanya digunakan untuk membina aplikasi satu halaman (SPA) dalam pembangunan web. Dalam pembangunan sebenar, kami biasanya menghadapi senario yang memerlukan log masuk pengguna. Dalam sesetengah kes, pengguna mungkin terlupa kata laluan mereka, yang memerlukan kami menyediakan fungsi tetapan semula kata laluan. Artikel ini akan memperkenalkan cara melaksanakan fungsi tetapan semula kata laluan pengguna dalam Vue.js.

1. Reka bentuk halaman tetapan semula kata laluan

Pertama, kita perlu mereka bentuk halaman untuk pengguna menetapkan semula kata laluan mereka. Halaman ini harus mengandungi elemen berikut:

• Borang dengan medan untuk memasukkan kata laluan baharu dan mengesahkannya.
• Butang hantar digunakan untuk menyerahkan permintaan untuk menetapkan semula kata laluan anda.

Seperti yang ditunjukkan di bawah:

2. Buat laluan

Dalam Vue.js, kita A routing pemalam diperlukan untuk melaksanakan pengurusan penghalaan untuk aplikasi satu halaman. Oleh itu, sebelum melaksanakan fungsi set semula kata laluan, kita perlu membuat laluan terlebih dahulu. Jika anda belum menggunakan pemalam penghalaan Vue.js lagi, sila lihat bab "Penghalaan" dalam dokumentasi rasmi Vue.js. Di sini, saya menganggap anda telah mempelajari cara membuat laluan dalam Vue.js.

Kami boleh menentukan laluan baharu dalam tetapan penghalaan untuk memaparkan halaman tetapan semula kata laluan. Seperti yang ditunjukkan di bawah:

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

Di sini kami menggunakan penghalaan dinamik untuk menghantar token tetapan semula kata laluan. Token ini boleh disertakan dalam permintaan tetapan semula kata laluan untuk mengesahkan pengguna.

3. Melaksanakan fungsi tetapan semula kata laluan

Setelah kami menyediakan penghalaan, kami boleh mula melaksanakan fungsi tetapan semula kata laluan. Mula-mula, kita perlu mendapatkan token tetapan semula kata laluan daripada laluan apabila halaman dipaparkan, seperti yang ditunjukkan di bawah:

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

Seterusnya, kita perlu mengikat acara klik pada butang hantar untuk menyerahkan kata laluan baharu pengguna . Dalam acara ini, kami akan menghantar permintaan POST untuk menetapkan semula kata laluan, seperti yang ditunjukkan di bawah:

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);
      }
    });
  }
}

Dalam kod di atas, kami menghantar tetapan semula ke bahagian belakang melalui fungsi fetch() POST permintaan untuk kata laluan . Kami memasukkan data yang diserahkan dalam kandungan permintaan dan menetapkan Jenis Kandungan kepada aplikasi/json dalam pengepala. Akhir sekali, kami menentukan sama ada permintaan itu berjaya dengan memproses data respons pelayan. Jika berjaya, kita boleh melompat ke halaman log masuk (atau halaman lain).

4. Pelaksanaan Backd

Akhir sekali, kami perlu melaksanakan antara muka tetapan semula kata laluan pada bahagian pelayan. Untuk memudahkan masalah, diandaikan di sini bahawa kami menggunakan Node.js + Express untuk membina pelayan.

Pertama, kita perlu menentukan laluan khusus untuk mengendalikan permintaan kata laluan tetapan semula. Laluan ini harus mengandungi permintaan POST untuk menerima permintaan data daripada bahagian hadapan.

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

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

  // ...
});

Seterusnya, kita perlu menulis logik perniagaan dalam penghalaan untuk mengesahkan identiti pengguna dan menukar kata laluan.

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 });
});

Dalam laluan di atas, kami mendapat data yang diserahkan dari bahagian hadapan melalui req.body. Seterusnya, kami melakukan dua pengesahan: mengesahkan kata laluan dan mengesahkan token. Jika pengesahan gagal, kami akan mengembalikan respons ralat. Jika tidak, kami boleh melaksanakan operasi pengubahsuaian kata laluan dalam logik perniagaan.

Dalam pembangunan sebenar, logik perniagaan menukar kata laluan mungkin memerlukan penyambungan ke pangkalan data untuk menyimpan data. Di sini kami hanya menunjukkan cara menerima data dari bahagian hadapan dan melaksanakan logik perniagaan berdasarkan data yang diterima.

Ringkasan

Pada ketika ini, kami telah memperkenalkan cara melaksanakan fungsi menukar kata laluan dalam Vue.js. Untuk melaksanakan fungsi ini, kita perlu menentukan laluan untuk memaparkan halaman, mengikat acara klik butang serah dan melaksanakan logik perniagaan yang sepadan pada bahagian pelayan. Walaupun artikel ini hanyalah coretan kod sampel, anda boleh melanjutkannya sebagai garis besar untuk projek.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan semula kata laluan pada halaman log masuk vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!