Apakah yang perlu saya lakukan jika "Ralat: Token tidak sah" berlaku apabila menggunakan sumber vue dalam aplikasi Vue?

Apakah yang perlu saya lakukan jika "Ralat: Token tidak sah" berlaku apabila menggunakan sumber vue dalam aplikasi Vue?

Vue.js ialah rangka kerja bahagian hadapan yang sangat popular pada masa ini. Terasnya ialah sistem pengikatan data dan komponen yang ringan. Ia digunakan secara meluas dalam pembangunan dan pembinaan aplikasi web. vue-resource ialah pemalam yang disediakan oleh rangka kerja Vue.js untuk memproses permintaan dan respons http. Vue-resource boleh membantu kami melengkapkan permintaan dan respons http dari hujung hadapan ke hujung belakang, dengan itu merealisasikan model pembangunan di mana bahagian depan dan belakang dipisahkan. Tetapi dalam proses menggunakan vue-resource, kami mungkin menghadapi beberapa ralat. Salah satu ralat biasa ialah "Ralat: Token tidak sah". Artikel ini akan memperincikan punca dan penyelesaian kepada ralat ini.

1. Punca ralat

Jika anda mendapat mesej ralat "Ralat: Token tidak sah" apabila menggunakan vue-resource, kemungkinan besar ini disebabkan oleh aksara yang tidak sah dalam pengepala permintaan. Protokol HTTP menetapkan bahawa pengepala permintaan tidak boleh mengandungi beberapa aksara khas, seperti kunci tab, pemulangan pengangkutan, suapan baris, ruang, dsb. Jika pengepala permintaan mengandungi aksara haram ini, ia akan menyebabkan ralat "Ralat: Token tidak sah".

2. Penyelesaian

Kami boleh menyelesaikan masalah "Ralat: Token tidak sah" dengan cara berikut.

Kaedah 1: Gunakan fungsi encodeURIComponent()

Apabila pengepala permintaan mengandungi aksara yang tidak sah, kita boleh menggunakan fungsi encodeURIComponent() untuk mengekod parameter pengepala permintaan. Contohnya:

var headers = {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
};

var data = {
    'username': 'admin',
    'password': '123456'
};

this.$http.post('/login', data, {headers: headers}).then(function(response){
    console.log(response.body);
}, function(response){
    console.log(response);
});

Dalam kod di atas, kami menetapkan "Content-Type: application/x-www-form-urlencoded;charset=UTF-8" dalam pengepala permintaan dan menggunakan fungsi encodeURIComponent() untuk mengekod permintaan parameter. Pengekodan untuk memastikan bahawa pengepala permintaan tidak mengandungi sebarang aksara yang menyalahi undang-undang.

Kaedah 2: Gunakan pemintas $http.interceptors

Pemintas $http.interceptors boleh campur tangan antara permintaan dan respons, dan boleh digunakan untuk menambah, mengalih keluar dan mengubah suai pengepala permintaan secara dinamik. Apabila menggunakan $http.interceptors interceptor, kita perlu menambah kod berikut dalam Vue:

Vue.http.interceptors.push(function(request, next){
    request.headers.set('Authorization', 'Bearer ' + localStorage.getItem('token'));
    next(function (response) {
        if(response.status === 401){
            localStorage.removeItem('token');
            this.$router.push('/login');
        }
    });
});

Dalam kod di atas, kami akan membawa medan Kebenaran dalam pengepala permintaan dalam setiap permintaan, yang nilainya adalah yang digunakan dalam projek kami nilai token. Jika status respons yang dikembalikan daripada pelayan ialah 401, menunjukkan tidak dibenarkan, kami akan memadamkan nilai token yang disimpan secara tempatan dan mengubah hala ke halaman log masuk.

Kaedah 3: Perhatikan format pengepala permintaan

Format pengepala permintaan adalah sangat penting. Biasanya, kita harus cuba untuk tidak mengandungi aksara haram dalam parameter pengepala permintaan. Anda boleh menggunakan petikan berganda untuk membalut kandungan parameter dalam bahagian parameter pengepala permintaan untuk memastikan bahawa format pengepala permintaan adalah betul.

var headers = {
    "Content-Type": 'application/json;charset=UTF-8',
    "Authorization": 'Bearer ' + localStorage.getItem('token')
};

Nota: Jika ralat "Ralat: Token tidak sah" berlaku apabila menggunakan sumber Vue dalam projek Vue, anda boleh memberi keutamaan untuk menyelesaikan tiga kaedah di atas. Jika tiada kaedah di atas menyelesaikan masalah, anda mungkin perlu menjalankan analisis yang lebih mendalam tentang punca ralat tertentu.

Kesimpulan

Apabila menggunakan Vue-resource dalam projek Vue, adalah perkara biasa untuk menghadapi ralat "Ralat: Token tidak sah". Kita boleh menyelesaikan masalah ini dengan menggunakan fungsi encodeURIComponent(), pemintas $http.interceptors dan memberi perhatian kepada format pengepala permintaan. Mengelakkan penggunaan aksara yang menyalahi undang-undang dan memastikan bahawa format pengepala permintaan adalah betul adalah kunci untuk mengelakkan masalah tersebut. Dalam pembangunan projek sebenar, kita perlu mempelajari kaedah penyahpepijatan yang teliti, menyelesaikan pelbagai masalah dan meningkatkan kemahiran pembangunan kita.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika "Ralat: Token tidak sah" berlaku apabila menggunakan sumber vue dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!