Rumah > Artikel > hujung hadapan web > 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.
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:
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:
// 在登录成功后保存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'); });
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!