在vue中怎么设置token本地缓存

发布时间：2023-10-20 11:15:07 所属栏目：教程来源：未知

导读： 　　这篇文章主要讲解了“vue中怎么设置token本地缓存”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue中怎么设置t

　　这篇文章主要讲解了“vue中怎么设置token本地缓存”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue中怎么设置token本地缓存”吧！

　　什么是 localStorage？

　　localStorage 是 HTML5 中新加入的一个特性，它可以将数据存储在客户端本地，具有以下几个优点：

　　与 Cookie 比较而言，localStorage 存储的数据量更大，可以存储 5MB 左右的数据；

　　存储在 localStorage 中的数据不会随着请求发往服务器端，这有助于节省请求带宽，提升应用性能；

　　可以使用 localStorage 实现在客户端本地对数据进行简单的增删改查操作。

　　在 Vue 中使用 localStorage 进行 Token 本地缓存

　　在 Vue 应用中，我们通常需要在登录后将用户的 Token 值存储到客户端本地，这样在用户打开新页面或者刷新页面时依然能够保持登录状态，而无需再次进行身份验证。

　　下面是一个使用 localStorage 在 Vue 中进行 Token 缓存的示例代码：

　　// 存储 Token

　　localStorage.setItem('token', 'xxxxxxxxxx');

　　// 获取 Token

　　let token = localStorage.getItem('token');

　　// 删除 Token

　　localStorage.removeItem('token');

　　复制代码

　　其中，使用 localStorage 的 setItem 方法可以将 Token 值存储到客户端本地，getItem 方法可以获取 Token 值，removeItem 方法可以将存储的 Token 值从本地删除。

　　因此，在 Vue 应用中，我们通常需要在用户进行登录后，将服务端返回的 Token 值存储到 localStorage 中，以后的请求中，只要从 localStorage 中读取 Token，就可以继续使用之前的身份认证信息，从而顺利通过身份认证。

　　下面是一个使用 axios 拦截器 + localStorage 进行 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;

　　复制代码

　　在这段示例代码中，通过 axios.interceptors.request 添加请求拦截器，在发送请求前从 localStorage 中读取 Token 值，并将 Token 添加到请求头中，这样在后台进行身份认证时就能够识别当前请求访问的用户是谁。而在响应拦截器中，如果返回的状态码为未授权，则从 localStorage 中删除 Token 值，并跳转到登录页面重新认证。

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!