前端Web用户 token 持久化

用户 token 持久化

业务背景：Token的有效期会持续一段时间，在这段时间内没有必要重复请求token，但是pinia本身是基于内存的管理方式，刷新浏览器Token会丢失，为了避免丢失需要配置持久化进行缓存

基础思路：

1. 存 Token 数据时，一份存入pinia，一份存入 cookie
2. pinia中初始化Token时，优先从本地 cookie 取，取不到再初始化为空串儿

Cookie 解释：浏览器本地存储区域，类似 localStorage

1. 基于 js-cookie 封装存取方法

pnpm add js-cookie
pnpm add @types/js-cookie -D

// 专门用来操作cookie的方法包
// 内部封装了繁琐的操作方法 参数处理 暴露三个函数 get,set,remove
import Cookies from 'js-cookie'const TOKEN_KEY = 'hm-admin-token-key'// 获取token的方法
export const getLocalToken = () => {return Cookies.get(TOKEN_KEY)
}// 设置方法
export const setLocalToken = (token: string) => {Cookies.set(TOKEN_KEY, token)
}// 删除方法
export const removeLocalToken = () => {Cookies.remove(TOKEN_KEY)
}

2.为什么要使用 pinia + Cookie

俩种存储方式的优势都想要 ： 

1. pinia 基于内存 存取快 但是刷新就丢失
2. localStorage / sessionStorage / cookie 基于磁盘 存取速度稍慢 刷新不丢失(持久化)

因为我们既可以享受pinia速度优势封装优势 同时保持持久化

扩展：

内存读写速度：几十 GB/s

磁盘读写速度：几 GB/s

但是 token 字符串长度确实很短，无论哪种都很快，所以保存 token 的位置看团队的选择，都是可以的！

3.localstorage和cookie 和 sessionStorage的区别

 1.存储容量

1. LocalStorage：通常提供相对较大的存储容量，一般在 5MB 左右（具体大小因浏览器而异）。这使得它可以用于存储较多的数据，如整个文档内容、大量的用户配置信息等
2. Cookie：存储容量较小，通常限制在 4KB 左右。这就决定了它只能用于存储一些小型的数据，如用户的登录会话标识、简单的偏好设置（如语言选择）等。
3. SessionStorage：存储容量和 LocalStorage 类似，也有一定的大小限制（一般为 5MB 左右），可以存储较多的数据用于当前会话。

 ​​2.数据有效期

1. LocalStorage：数据是持久存储的，除非用户手动清除浏览器缓存或者通过 JavaScript 代码进行删除，否则数据会一直保存在浏览器中。这使得它适合存储长期需要的用户数据，比如用户的个性化主题设置，下次用户打开浏览器访问相关网站时，这些设置依然有效。
2. Cookie：可以通过设置过期时间来控制有效期。如果没有设置过期时间，Cookie 会在浏览器会话结束（即关闭浏览器）时自动失效。这对于保存和当前会话紧密相关的数据很有用，例如用户登录后的会话信息，在用户关闭浏览器后自动清除登录状态相关的 Cookie。
3. SessionStorage：数据的有效期仅限于当前浏览器会话。当用户关闭浏览器窗口或者标签页时，SessionStorage 中的数据就会被清除。例如，一个多步骤的表单填写过程中，数据可以暂时存储在 SessionStorage 中，一旦用户完成操作或者关闭页面，这些数据就不再保留。

 ​​​​​​​3.数据访问范围

1. LocalStorage：只能被同源（协议、域名、端口相同）的网页访问。例如，https://example.com下的网页不能访问https://other.com的 LocalStorage 内容，这保证了数据的安全性和独立性，防止不同网站之间的数据混乱。
2. Cookie：默认情况下，在和服务器端通信时，会在同源的 HTTP 请求中自动携带。同时，也可以通过设置domain和path属性来调整其作用范围，使其能够在多个子域名之间共享。不过，这种自动携带的特性可能会带来安全风险，因为敏感信息可能会在不必要的请求中发送到服务器。
3. SessionStorage：和 LocalStorage 一样，只能被同源的网页访问，确保了数据在同一来源的网页之间的合理使用，避免跨源访问带来的安全隐患。