Bagaimana untuk menambah token dalam vue

Dengan perkembangan pesat teknologi bahagian hadapan dan pengembangan senario aplikasi, rangka kerja Vue telah menjadi salah satu alat penting untuk pembangunan aplikasi web. Semasa proses permohonan, kami selalunya perlu menggunakan token untuk pengesahan dan pengurusan keselamatan. Jadi, bagaimanakah Vue menambah token? Artikel ini akan memperkenalkan cara menambah token dalam Vue dari aspek berikut.

1. Apakah itu token?
Token, juga dipanggil token, ialah token akses yang digunakan untuk memastikan keselamatan pengguna semasa beroperasi antara pelanggan dan pelayan. Dalam Vue, token boleh digunakan untuk mengesahkan identiti pengguna dan mengenal pasti sama ada pengguna mempunyai hak akses.

2. Gunakan VueAxios untuk menambah token
VueAxios ialah pemalam untuk Vue.js, digunakan untuk berkomunikasi dengan API bahagian belakang. Kami boleh menggunakan VueAxios untuk menambah token dalam aplikasi Vue. Berikut ialah contoh kod untuk menambah token:

import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);

// 设置token
const token = 'your_token_here';
Vue.axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

Dalam contoh di atas, kami mula-mula memperkenalkan axios dan VueAxios, dan kemudian menggunakan kaedah Vue.use() untuk mendaftarkannya ke dalam contoh Vue. Seterusnya kami menetapkan token dan menggunakan Vue.axios.defaults.headers.common['Authorization'] = Bearer ${token} untuk menetapkan pengepala permintaan ialah kaedah kebenaran dalam protokol OAuth2.0, yang digunakan untuk mendapatkan kebenaran. Akses sumber yang dilindungi.

3. Gunakan pemalam Vue-Auth untuk menambah token
Vue-Auth ialah pemalam Vue.js yang menyediakan beberapa kaedah yang membolehkan anda menambah fungsi pengesahan dan kebenaran dengan mudah. Pemalam ini menyokong berbilang mod pengesahan, termasuk JWT, OAuth2.0, dsb. Berikut ialah contoh kod untuk menambah token menggunakan pemalam Vue-Auth:

import Vue from 'vue';
import VueAuth from '@websanova/vue-auth';
import axios from 'axios';

Vue.use(VueAuth, {
    auth: {
        request: function (req, token) {
            if(token){
                this.options.http._setHeaders.call(this, req, {Authorization: 'Bearer ' + token})
            }
        },
        response: function (res) {
            var token = res.data.token;
            if(token){
                return token;
            }
        }
    }
});

// 设置token
const token = 'your_token_here';
Vue.auth.token.set(token);

Dalam contoh di atas, kami mula-mula memperkenalkan VueAuth dan axios. Seterusnya, gunakan kaedah Vue.use() untuk mendaftarkan VueAuth ke dalam contoh Vue dan konfigurasikan pilihan pengesahan. Pilihan permintaan digunakan untuk menetapkan pengepala permintaan, dan pilihan respons digunakan untuk menetapkan respons pelayan Apabila token berjaya diperoleh, ia disimpan.

Akhir sekali, kami menggunakan kaedah Vue.auth.token.set(token) untuk menyimpan token ke contoh Vue untuk kegunaan global.

4. Gunakan Kuki untuk menyimpan token
Selain menggunakan pemalam VueAxios dan Vue-Auth, kami juga boleh menggunakan Kuki untuk menyimpan token. Dalam Vue, kami boleh menggunakan pemalam vue-cookies untuk mengendalikan Cookies. Berikut ialah contoh kod menggunakan Kuki untuk menyimpan token dalam Vue:

import Vue from 'vue';
import VueCookies from 'vue-cookies';

Vue.use(VueCookies);

// 设置token
const token = 'your_token_here';
Vue.$cookies.set('token', token);

Dalam contoh di atas, kami mula-mula memperkenalkan pemalam VueCookies. Kemudian daftarkannya menggunakan kaedah Vue.use(). Akhir sekali, gunakan kaedah Vue.$cookies.set() untuk menyimpan token ke Cookies. Pada ketika ini, kita boleh mendapatkan token yang disimpan dalam Cookies dengan mengakses $cookies secara global.

Ringkasan:
Rangka kerja Vue menyediakan pelbagai cara untuk menambah token dan pembangun boleh memilih mengikut keperluan sebenar. Sama ada menggunakan VueAxios, pemalam Vue-Auth atau menggunakan Kuki, kami perlu memastikan keselamatan token dan mengemas kini serta mengesahkannya dengan kerap. Pada masa yang sama, cara menambah token pada aplikasi Vue juga merupakan salah satu kemahiran asas yang perlu dikuasai oleh jurutera pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Bagaimana untuk menambah token dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!