vue中怎么设置token本地缓存
这篇文章主要讲解了“vue中怎么设置token本地缓存”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中怎么设置token本地缓存”吧!
创新互联主营云龙网站建设的网络公司,主营网站建设方案,成都app软件开发,云龙h5微信小程序搭建,云龙网站营销推广欢迎云龙等地区企业咨询
什么是 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 值,并跳转到登录页面重新认证。
感谢各位的阅读,以上就是“vue中怎么设置token本地缓存”的内容了,经过本文的学习后,相信大家对vue中怎么设置token本地缓存这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
网站名称:vue中怎么设置token本地缓存
链接地址:http://scyanting.com/article/piogjh.html