Cara menggunakan JavaScript untuk melaksanakan fungsi log masuk

Dalam projek dengan bahagian hadapan dan belakang yang berasingan, fungsi log masuk ialah fungsi penting. Bahagian hadapan perlu menulis beberapa kod JavaScript untuk melaksanakan fungsi log masuk Mari kita bincangkan tentang cara menggunakan JavaScript untuk melaksanakan fungsi log masuk.

Pertama sekali, kita perlu memahami kuki dan sesi dalam protokol HTTP, kedua-duanya adalah konsep penting untuk melaksanakan fungsi log masuk. Apabila pengguna menghantar permintaan log masuk, pelayan akan mengesahkan sama ada akaun dan kata laluan yang dihantar oleh pengguna adalah betul Jika betul, maklumat pengguna akan disimpan dalam sesi dan id sesi akan disimpan dalam kuki pelanggan dalam. pengepala respons supaya pelayan boleh memintanya pada masa akan datang. Maklumat pengguna boleh didapati melalui id sesi. Selepas log masuk berjaya, pelanggan boleh menentukan sama ada pengguna log masuk berdasarkan id sesi dalam kuki, dengan itu mengekalkan keadaan.

Dengan pengetahuan asas ini, kita boleh mula melaksanakan fungsi log masuk.

1. Buat borang log masuk

Pertama, kita perlu mencipta borang log masuk dalam HTML, yang mengandungi dua kotak input untuk nombor akaun dan kata laluan serta butang log masuk.

<form id="login-form">
  <label for="username">账号：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  <button type="submit">登录</button>
</form>

Dalam borang, kami memberikan id kepada setiap kotak input untuk memudahkan JavaScript mendapatkan nilai dalam kotak input.

2. Dengar acara penyerahan borang

Kita perlu mendengar acara penyerahan borang dan memproses logik log masuk dalam acara penyerahan.

const form = document.querySelector('#login-form');
form.addEventListener('submit', handleLogin);

function handleLogin(event) {
  event.preventDefault(); // 阻止表单默认提交事件
  const username = document.querySelector('#username').value;
  const password = document.querySelector('#password').value;
  // TODO: 验证账号密码是否正确
  // TODO: 发送登录请求
}

Pertama, gunakan kaedah document.querySelector untuk mendapatkan nilai kotak input akaun dan kata laluan dalam borang Kemudian anda boleh mengesahkan kata laluan akaun Anda boleh menulis logik pengesahan sendiri, atau anda boleh menggunakan perpustakaan pihak ketiga untuk pengesahan.

3. Hantar permintaan log masuk

Jika pengesahan kata laluan akaun diluluskan, anda boleh menghantar permintaan log masuk. Untuk menghantar permintaan, anda perlu menggunakan objek XMLHttpRequest dan API pengambilan akan digunakan dalam contoh berikut.

const form = document.querySelector('#login-form');
form.addEventListener('submit', handleLogin);

function handleLogin(event) {
  event.preventDefault(); // 阻止表单默认提交事件
  const username = document.querySelector('#username').value;
  const password = document.querySelector('#password').value;
  // TODO: 验证账号密码是否正确
  fetch('/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password })
  })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        alert('登录成功');
        // TODO: 保存用户信息到 session
        // TODO: 跳转到首页
      } else {
        alert('登录失败，账号或密码错误');
      }
    })
    .catch(error => {
      console.error(error);
      alert('登录失败，网络异常');
    });
}

Apabila menghantar permintaan, anda perlu merangkum kata laluan akaun ke dalam objek JSON sebagai badan permintaan, dan kemudian tentukan Content-Type sebagai aplikasi/json dalam pengepala permintaan. Data yang dikembalikan oleh pelayan ialah objek JSON, yang mengandungi medan kejayaan yang menunjukkan sama ada log masuk berjaya. Jika log masuk berjaya, maklumat pengguna boleh disimpan dalam sesi dan melompat ke halaman utama jika log masuk gagal, mesej ralat akan muncul.

4. Simpan maklumat pengguna ke sesi

Selepas log masuk berjaya, pelayan perlu menyimpan maklumat pengguna ke sesi. Anda boleh menggunakan API pengambilan untuk menghantar permintaan lain dan menetapkan kelayakan untuk disertakan dalam permintaan supaya kuki dibawa secara automatik semasa menghantar permintaan, supaya sesi yang sepadan boleh diakses di sisi pelayan melalui id sesi dalam kuki .

fetch('/api/user', {
  credentials: 'include'
})
  .then(response => response.json())
  .then(data => {
    // TODO: 将用户信息保存到 session
  })
  .catch(error => {
    console.error(error);
    alert('获取用户信息失败');
  });

Di bahagian pelayan, anda boleh menggunakan perisian tengah sesi ekspres untuk mengendalikan sesi. Selepas berjaya log masuk, simpan maklumat pengguna ke sesi:

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  // TODO: 验证账号密码是否正确
  // TODO: 将用户信息保存到 session
  req.session.user = { id: 1, username: 'admin' };
  res.json({ success: true });
});

Apabila mendapatkan maklumat pengguna, anda boleh mendapatkan maklumat pengguna log masuk melalui req.session.user:

app.get('/api/user', (req, res) => {
  res.json(req.session.user);
});

5. Lompat halaman

Selepas berjaya log masuk, anda perlu melompat ke halaman utama. Anda boleh menggunakan JavaScript untuk melompat ke halaman.

if (data.success) {
  alert('登录成功');
  // TODO: 保存用户信息到 session
  window.location.href = '/'; // 跳转到首页
} else {
  alert('登录失败，账号或密码错误');
}

Apabila melompat ke halaman, anda boleh menggunakan atribut window.location.href untuk menetapkan URL halaman untuk mencapai lompatan halaman.

Ringkasan:

Artikel ini memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi log masuk. Melaksanakan log masuk memerlukan pemprosesan banyak aspek, termasuk mengesahkan akaun dan kata laluan, menghantar permintaan, menyimpan maklumat pengguna ke sesi, lompatan halaman, dsb. Melalui pengenalan artikel ini, saya percaya pembaca dapat dengan cepat menguasai kaedah melaksanakan fungsi log masuk pada bahagian hadapan.

Atas ialah kandungan terperinci Cara menggunakan JavaScript untuk melaksanakan fungsi log masuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!