在前端开发中，常常需要进行用户身份验证，确保用户的合法性和安全性。而 token 身份验证成为了越来越常见的方式，它使得用户登录后，在后续的访问中不需要再次输入账号密码进行验证，只需要传递 token 即可。在 vue 应用中也常常会有这样的需求，比如在发送请求时需要 token 来访问受保护的资源，或者在一些需要登录才能进入的页面进行路由守卫时需要进行 token 验证。那么在 vue 中如何设置 token 的本地缓存呢？
本文将介绍如何在 vue 中使用 localstorage 进行 token 的本地缓存，让 token 在用户刷新页面或者关闭浏览器后依然能够保持一定时间的有效性。
什么是 localstorage？localstorage 是 html5 中新加入的一个特性，它可以将数据存储在客户端本地，具有以下几个优点：
与 cookie 比较而言，localstorage 存储的数据量更大，可以存储 5mb 左右的数据；存储在 localstorage 中的数据不会随着请求发往服务器端，这有助于节省请求带宽，提升应用性能；可以使用 localstorage 实现在客户端本地对数据进行简单的增删改查操作。在 vue 中使用 localstorage 进行 token 本地缓存在 vue 应用中，我们通常需要在登录后将用户的 token 值存储到客户端本地，这样在用户打开新页面或者刷新页面时依然能够保持登录状态，而无需再次进行身份验证。
下面是一个使用 localstorage 在 vue 中进行 token 缓存的示例代码：
// 存储 tokenlocalstorage.setitem('token', 'xxxxxxxxxx');// 获取 tokenlet token = localstorage.getitem('token');// 删除 tokenlocalstorage.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 值，并跳转到登录页面重新认证。
总结使用 token 身份认证在前端开发中已经成为了常见的方式，而使用 localstorage 进行 token 缓存也常常被使用。在 vue 中，我们可以很容易地使用 localstorage 实现对 token 的存储、获取和删除。值得注意的是，在使用 localstorage 进行本地缓存时，需要遵循客户端安全的原则，防止敏感数据泄露，比如将 token 进行加密处理，只传递加密后的数据等等。
以上就是vue中设置token本地缓存的详细内容。