vue中设置token本地缓存

在前端开发中，常常需要进行用户身份验证，确保用户的合法性和安全性。而 token 身份验证成为了越来越常见的方式，它使得用户登录后，在后续的访问中不需要再次输入账号密码进行验证，只需要传递 token 即可。在 vue 应用中也常常会有这样的需求，比如在发送请求时需要 token 来访问受保护的资源，或者在一些需要登录才能进入的页面进行路由守卫时需要进行 token 验证。那么在 vue 中如何设置 token 的本地缓存呢？

本文将介绍如何在 Vue 中使用 localStorage 进行 Token 的本地缓存，让 Token 在用户刷新页面或者关闭浏览器后依然能够保持一定时间的有效性。

什么是 localStorage？

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

1. 与 Cookie 比较而言，localStorage 存储的数据量更大，可以存储 5MB 左右的数据；
2. 存储在 localStorage 中的数据不会随着请求发往服务器端，这有助于节省请求带宽，提升应用性能；
3. 可以使用 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 值从本地删除。

存了个图

视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

17

查看详情

因此，在 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 值，并跳转到登录页面重新认证。

总结

使用 Token 身份认证在前端开发中已经成为了常见的方式，而使用 localStorage 进行 Token 缓存也常常被使用。在 Vue 中，我们可以很容易地使用 localStorage 实现对 Token 的存储、获取和删除。值得注意的是，在使用 localStorage 进行本地缓存时，需要遵循客户端安全的原则，防止敏感数据泄露，比如将 Token 进行加密处理，只传递加密后的数据等等。

以上就是vue中设置token本地缓存的详细内容，更多请关注php中文网其它相关文章！