Panduan lengkap untuk melaksanakan pemisahan bahagian hadapan dan belakang dalam Vue (axios, jwt)

Panduan lengkap untuk melaksanakan pemisahan bahagian hadapan dan belakang dalam Vue (axios, jwt)

Dengan perkembangan berterusan teknologi bahagian hadapan, pemisahan bahagian hadapan dan belakang telah menjadi satu trend dalam pembangunan web. Sebagai rangka kerja bahagian hadapan yang popular, Vue sepadan dengan sempurna dengan kaedah pembangunan pemisahan bahagian belakang. Artikel ini akan memperkenalkan cara menggunakan Vue dengan axios dan jwt untuk mencapai pembangunan bahagian hadapan dan belakang yang berasingan, serta menyediakan contoh kod dan langkah berjaga-jaga.

1. Apakah axios?

axios ialah klien HTTP berasaskan Promise untuk penyemak imbas dan node.js Ia menikmati kelebihan berikut:

1. Menyokong API Promise
2. Klien dan Pelayan boleh. gunakan
3. untuk menyokong pemintasan permintaan dan respons
4. untuk menyokong pembatalan permintaan

2. Apakah itu jwt?

jwt (JSON Web Token) ialah piawaian pengesahan dan kebenaran yang ringan. Ia membenarkan cara selamat untuk mengesahkan maklumat antara aplikasi yang berbeza. JWT terdiri daripada tiga bahagian: pengepala, muatan dan tandatangan. Pengepala mengandungi maklumat seperti jenis token dan algoritma penyulitan;

3. Bagaimana untuk menggunakan axios dalam Vue?

Gunakan axios dalam komponen Vue untuk meminta data adalah seperti berikut:

1. Pasang axios: Anda boleh menggunakan npm untuk memasangnya:

npm pasang axios --save

2. Import axios: Dalam komponen yang perlu menggunakan axios, anda perlu mengimport axios terlebih dahulu Kod sampel adalah seperti berikut:

import axios daripada 'axios'

3. Hantar permintaan: Cara menghantar permintaan HTTP menggunakan axios adalah seperti berikut:

axios.get ('url')
.then(respons => {
console.log(response.data)
})
.catch(error => {
console.log( ralat)
})

Di mana, url mewakili permintaan Alamat URL kaedah then() mewakili fungsi panggil balik selepas permintaan berjaya, dan respons parameter yang diluluskan ialah data yang dikembalikan oleh pelayan; ; kaedah catch() mewakili fungsi panggil balik selepas permintaan gagal, dan ralat parameter yang diluluskan ialah mesej ralat.

4. Bagaimana cara menggunakan jwt untuk pengesahan?

Apabila menggunakan jwt untuk pengesahan, anda perlu menjana dan mengesahkan jwt pada bahagian pelayan terlebih dahulu.

1. Jana jwt

Di bahagian pelayan, anda boleh menggunakan perpustakaan jsonwebtoken untuk menjana jwt Kod sampel adalah seperti berikut:

const jwt = require('jsonwebtoken')
const token = jwt.sign({ user: 'username' }, 'secretkey', { expiresIn: '1j' })

Antaranya, medan pengguna boleh menyimpan maklumat pengguna; kunci rahsia ialah kunci, Digunakan untuk menyulitkan token; medan expiresIn menunjukkan masa tamat tempoh token dan boleh dilaraskan mengikut keperluan.

2. Sahkan jwt

Di sisi pelanggan, anda perlu mendapatkan jwt daripada pelayan dan kemudian mengesahkannya. Gunakan perpustakaan jsonwebtoken untuk mengesahkan jwt Kod sampel adalah seperti berikut:

const jwt = require('jsonwebtoken')
const token = 'xxxxx' // Token yang diperoleh daripada pelayan
cuba {
const decoded = jwt.verify(token, 'secretkey');
console.log(decoded) // { user: 'username', iat: 1622668826, exp: 1622672426 }
} catch (err ) {
console.log(err)
}

Antaranya, token ialah token yang dihasilkan oleh pelayan kaedah verify() digunakan untuk mengesahkan kesahihan token, dan objek dinyahkod yang dikembalikan mengandungi Maklumat pengguna, masa pengeluaran (iat) dan masa tamat tempoh (exp).

5. Bagaimana cara menggunakan jwt untuk pengesahan dalam Vue?

Gunakan jwt untuk pengesahan dalam Vue Langkah-langkahnya adalah seperti berikut:

1. Dapatkan token

Selepas log masuk berjaya, pelayan perlu memindahkan jwt. token Dihantar kepada pelanggan, pelanggan boleh menyimpannya dalam localStorage atau kuki, kod sampel adalah seperti berikut:

axios.post('url', { user: 'username', password: 'password' } )
.then(response => {
// Berjaya log masuk, simpan token ke localStorage
localStorage.setItem('token', response.data.token)
})
. catch(error => {
console.log(error)
})

2. Hantar permintaan dan bawa token

Pengesahan diperlukan apabila meminta Apabila menggunakan antara muka, pelanggan perlu membawa token dalam pengepala permintaan Kod sampel adalah seperti berikut:

axios.get('url', {
pengepala: { 'Kebenaran': 'Bearer ' + localStorage.getItem ('token') }
})
.then(response => {
console.log(response.data)
})
.catch (error => {
console.log(error)
})

Antaranya, medan Kebenaran ialah kata kunci dalam pengepala permintaan, Pembawa mewakili nama dasar, iaitu singkatan daripada Skim Pengesahan Pembawa, dan rentetan berikut disimpan dalam token jwt dalam localStorage.

Nota:

1. Apabila menggunakan jwt untuk pengesahan, anda perlu memberi perhatian kepada kerahsiaan kunci, jika tidak, token jwt mungkin diusik atau dipalsukan oleh penyerang.
2. Apabila menggunakan axios dalam Vue, anda perlu memberi perhatian kepada isu merentas domain dan menetapkan pengepala respons Access-Control-Allow-Origin pada bahagian pelayan atau gunakan proksi untuk menyelesaikannya.
3. Dalam persekitaran pembangunan, anda boleh menggunakan webpack-dev-server untuk menyelesaikan masalah merentas domain Kod sampel adalah seperti berikut:

devServer: {
proksi: {

'/api': {
  target: 'http://localhost:3000',
  pathRewrite: { '^/api': '' }
}

}
}

Antaranya, sasaran mewakili alamat URL sasaran dan pathRewrite mewakili peraturan penulisan semula laluan.

Artikel ini menyediakan langkah dan langkah berjaga-jaga yang terperinci untuk menggunakan Vue dengan axios dan jwt untuk mencapai pembangunan pemisahan bahagian hadapan dan belakang saya harap ia akan membantu pembangun web.

Atas ialah kandungan terperinci Panduan lengkap untuk melaksanakan pemisahan bahagian hadapan dan belakang dalam Vue (axios, jwt). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!