Vue中存储token方式盘点_不会因为关掉浏览器而丢失_优点 可以设置有效期控制token的寿命
Vue中存储token的最佳方式盘点
一、用`localStorage`来存储
`localStorage`就像是个小盒子，放在浏览器里，你存的东西不会因为关掉浏览器就消失，所以很适合长期保存用户的登录状态。
优点
- 数据长期存在，不会因为关掉浏览器而丢失。
- 容量挺大，通常能有5MB。
缺点
- 数据可以被同一网站的所有页面共享，有点小风险。
- 如果不加密，token可能被坏人偷走。
操作步骤
- 存储token：
localStorage.setItem('token', 'yourToken'); - 获取token：
var token = localStorage.getItem('token'); - 删除token：
localStorage.removeItem('token');
二、用`sessionStorage`来存储
`sessionStorage`和`localStorage`有点像，但是它的数据在会话结束（比如浏览器关掉）后就会消失，所以如果你不需要长期保存数据，它比较安全。
优点
- 数据只在会话中有效，安全性高。
- 操作简单，和`localStorage`一样。
缺点
- 数据会在浏览器关闭后清除，不能长期保存。
操作步骤
- 存储token：
sessionStorage.setItem('token', 'yourToken'); - 获取token：
var token = sessionStorage.getItem('token'); - 删除token：
sessionStorage.removeItem('token');
三、用`Cookie`来存储
`Cookie`是老式的存储方式，但它依然很流行，因为可以设置有效时间和标志，让存储更安全。
优点
- 可以设置有效期，控制token的寿命。
- 服务器也可以设置，安全性更高。
缺点
- 容量小，通常只有4KB。
- 每次请求都会带着cookie，可能影响性能。
操作步骤
- 存储token：
document.cookie = 'token=yourToken; expires=Thu, 31 Dec 2040 23:59:59 UTC'; - 获取token：
var cookies = document.cookie.split(';'); var token = cookies.find(cookie => cookie.trim().startsWith('token=')).split('=')[1]; - 删除token：
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC';
四、用Vuex来存储
Vuex是Vue.js的一个状态管理模式，可以集中管理你的应用状态，包括token。
优点
- 适合大型应用，统一管理状态。
- 和Vue组件无缝集成，用起来方便。
缺点
- 页面刷新后状态会丢失，需要配合其他方式。
操作步骤
- 安装Vuex。
- 创建store。
- 在组件中使用：
import { mapState } from 'vuex'; computed: { ...mapState(['token']) }
每种存储方式都有它的用场，你需要根据你的应用场景来选择最适合你的方式。
| 需要持久化存储 | 仅需会话级别存储 | 需要更高的安全性，且容量较小 | 需要集中管理应用状态 |
|---|---|---|---|
| localStorage | sessionStorage | Cookie | Vuex |
选择存储方式时，要考虑安全性、持久性和应用需求，确保token的安全存储和管理。