Tetapkan cache tempatan token dalam vue

Dalam pembangunan bahagian hadapan, pengesahan identiti pengguna selalunya diperlukan untuk memastikan kesahihan dan keselamatan pengguna. Pengesahan token telah menjadi kaedah yang semakin biasa Ia membenarkan pengguna untuk log masuk dan tidak perlu memasukkan semula akaun dan kata laluan mereka untuk pengesahan dalam lawatan berikutnya. Selalunya terdapat keperluan sedemikian dalam aplikasi Vue Contohnya, Token diperlukan untuk mengakses sumber yang dilindungi apabila menghantar permintaan, atau pengesahan Token diperlukan apabila pengawal penghalaan dilakukan pada beberapa halaman yang memerlukan log masuk untuk masuk. Jadi bagaimana untuk menyediakan cache tempatan Token dalam Vue?

Artikel ini akan memperkenalkan cara menggunakan localStorage dalam Vue untuk cache Token secara setempat supaya Token boleh kekal sah untuk tempoh masa tertentu selepas pengguna memuat semula halaman atau menutup penyemak imbas.

Apakah localStorage?

localStorage ialah ciri yang baru ditambah dalam HTML5 Ia boleh menyimpan data secara setempat pada klien dan mempunyai kelebihan berikut:

1. Berbanding dengan Cookie, localStorage menyimpan volum data lebih besar dan. boleh menyimpan kira-kira 5MB data;
2. Data yang disimpan dalam localStorage tidak akan dihantar ke pelayan dengan permintaan, yang membantu menjimatkan lebar jalur permintaan dan meningkatkan prestasi aplikasi
3. Anda boleh menggunakan localStorage untuk melaksanakan; operasi penambahan, pemadaman, pengubahsuaian dan pertanyaan ringkas pada data secara tempatan pada klien.

Gunakan localStorage dalam Vue untuk caching Token setempat

Dalam aplikasi Vue, kami biasanya perlu menyimpan nilai Token pengguna secara setempat pada klien selepas log masuk, supaya apabila pengguna membuka Anda masih boleh kekal log masuk apabila anda membuat halaman baharu atau memuat semula halaman tanpa perlu mengesahkan lagi.

Berikut ialah contoh kod untuk menggunakan localStorage untuk cache Token dalam Vue:

// 存储 Token
localStorage.setItem('token', 'xxxxxxxxxx');

// 获取 Token
let token = localStorage.getItem('token');

// 删除 Token
localStorage.removeItem('token');

Antaranya, kaedah setItem localStorage boleh digunakan untuk menyimpan nilai Token secara setempat pada klien, dan kaedah getItem boleh digunakan untuk mendapatkan nilai Token, kaedah removeItem boleh memadamkan nilai Token yang disimpan secara setempat.

Oleh itu, dalam aplikasi Vue, kami biasanya perlu menyimpan nilai Token yang dikembalikan oleh pelayan ke dalam localStorage selepas pengguna log masuk. Dalam permintaan seterusnya, selagi Token dibaca dari localStorage, anda boleh meneruskan. Gunakan maklumat pengesahan identiti sebelumnya untuk berjaya lulus pengesahan identiti.

Berikut ialah contoh kod yang menggunakan pemintas axios + localStorage untuk pengesahan Token:

// 实例化 axios 对象
const axiosInstance = axios.create({
    baseURL: 'https://api.example.com'
});

// 添加 request 拦截器
axiosInstance.interceptors.request.use((config) => {
    // 从 localStorage 中获取 Token
    let token = localStorage.getItem('token');

    // 配置请求头包含 Token
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }

    return config;
}, (error) => {
    return Promise.reject(error);
});

// 添加 response 拦截器
axiosInstance.interceptors.response.use((response) => {
    if (response.data.code === '401') {
        // 如果返回的状态码为 401（未授权），则从 localStorage 中删除 Token，并跳转到登录页面重新认证
        localStorage.removeItem('token');
        router.push({name: 'login'});
    }

    return response;
}, (error) => {
    return Promise.reject(error);
});

export default axiosInstance;

Dalam kod sampel ini, tambahkan pemintas permintaan melalui axios.interceptors.request, dan hantar permintaan Sebelum ini , nilai Token telah dibaca daripada localStorage dan Token telah ditambahkan pada pengepala permintaan, supaya pengguna yang sedang meminta akses boleh dikenal pasti semasa pengesahan identiti di latar belakang. Dalam pemintas respons, jika kod status yang dikembalikan tidak dibenarkan, nilai Token dipadamkan daripada localStorage dan melompat ke halaman log masuk untuk pengesahan semula.

Ringkasan

Menggunakan pengesahan Token telah menjadi kaedah biasa dalam pembangunan bahagian hadapan, dan menggunakan localStorage untuk caching Token juga sering digunakan. Dalam Vue, kami boleh menggunakan localStorage dengan mudah untuk menyimpan, mendapatkan dan memadam Token. Perlu diingat bahawa apabila menggunakan localStorage untuk caching tempatan, anda perlu mengikut prinsip keselamatan pelanggan untuk mengelakkan kebocoran data sensitif, seperti menyulitkan Token dan hanya menghantar data yang disulitkan, dsb.

Atas ialah kandungan terperinci Tetapkan cache tempatan token dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!