Menggunakan JSON Web Token (JWT) untuk pengesahan dalam aplikasi Vue

Dengan perkembangan pesat pembangunan bahagian hadapan, Vue telah menjadi rangka kerja bahagian hadapan JavaScript yang sangat popular. Pengesahan adalah bahagian yang sangat penting dalam aplikasi web moden. Token Web JSON (JWT) ialah cara selamat untuk menghantar maklumat tuntutan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan JWT untuk pengesahan dalam aplikasi Vue.

1. Mengapa anda perlu menggunakan JWT

Dalam aplikasi web, pengguna selalunya perlu membuat pengesahan untuk mengakses sumber yang dilindungi. Pengesahan berasaskan kuki tradisional mempunyai banyak batasan, seperti akses merentas domain atau penggunaan dalam aplikasi mudah alih. JWT menyediakan penyelesaian yang lebih fleksibel dan selamat. JWT ialah standard tanpa kewarganegaraan yang membolehkan kami menukar data dengan selamat antara pelanggan dan pelayan. Faedah menggunakan JWT termasuk:

• Sokongan merentas domain yang lebih baik (tidak memerlukan kuki untuk pengesahan
• Keselamatan aplikasi mudah alih yang dipertingkatkan (tidak memerlukan storan) Maklumat sensitif disimpan secara setempat; );
• Tidak perlu menyimpan token pada pelayan, menjadikan seni bina pelayan lebih mudah.

2. Cara menggunakan JWT untuk pengesahan

Dalam aplikasi Vue, kami boleh menggunakan perpustakaan seperti Axios atau Fetch untuk menghantar permintaan HTTP. Apabila menghantar permintaan, kami boleh menambah medan Kebenaran dalam pengepala permintaan, yang mengandungi Token JWT. Kami boleh mengembalikan Token JWT daripada pelayan kepada klien selepas pengguna berjaya log masuk. Pelanggan menyimpannya dalam localStorage dan menambahkannya pada pengepala permintaan apabila menghantar permintaan. Pelayan mengesahkan Token JWT dan, jika betul, mengembalikan sumber yang diminta. Berikut ialah proses pelaksanaan yang mudah:

• Dalam projek Vue, gunakan Axios atau perpustakaan kelas lain untuk menghantar permintaan log masuk ke pelayan
• Selepas pelayan berjaya mengesahkan nama pengguna dan kata laluan, ia menghasilkan Token JWT dan mengembalikannya kepada pelanggan
• Simpan Token ke localStorage
• Permintaan seterusnya akan menambah medan Kebenaran dalam pengepala permintaan untuk membawa Token; 🎜>
Pelayan akan mengesahkan token dan mengembalikan sumber jika ia sah.

Berikut ialah kod rujukan:

// 在登录成功后保存Token到localStorage中
localStorage.setItem('jwt', token);

// 在Axios请求头中添加Authorization字段
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('jwt');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 在服务器端进行Token验证
app.get('/protected', jwtMiddleware(), (req, res) => {
  res.send('You have accessed the protected route');
});

Keselamatan JWT

Walaupun JWT memberikan banyak kelebihan, semasa penggunaan, Kami juga memerlukan untuk memberi perhatian kepada isu keselamatan untuk memastikan maklumat pengguna tidak bocor. Berikut ialah beberapa perkara yang perlu diambil perhatian:

JWT tidak seharusnya mengandungi maklumat sensitif, seperti kata laluan.
• JWT harus dimuat semula secara berkala atau tamat tempoh apabila pengguna log keluar.
• JWT hendaklah ditandatangani secara digital untuk memastikan integriti data.

Kesimpulan

Menggunakan JWT untuk pengesahan dalam aplikasi Vue sangat berguna untuk meningkatkan keselamatan aplikasi dan menjadikan pembangunan bahagian pelayan lebih cekap untuk fleksibiliti dan kesederhanaan. Semasa proses pelaksanaan, anda perlu memberi perhatian kepada beberapa isu keselamatan untuk memastikan keberkesanan dan keselamatan JWT. Semasa proses pembangunan, anda boleh merujuk kepada contoh kod yang disediakan di atas atau menggunakan perpustakaan kelas yang berkaitan untuk pembangunan.

Atas ialah kandungan terperinci Menggunakan JSON Web Token (JWT) untuk pengesahan dalam aplikasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!