前端Web用户 token 长期化

用户 token 长期化

业务配景：Token的有效期会连续一段时间，在这段时间内没有须要重复哀求token，但是pinia自己是基于内存的管理方式，革新欣赏器Token会丢失，为了制止丢失须要设置长期化举行缓存
底子思绪：

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

Cookie 表明：欣赏器本地存储地区，类似 localStorage
1. 基于 js-cookie 封装存取方法

2. pnpm add js-cookie
3. pnpm add @types/js-cookie -D

复制代码

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

复制代码

2.为什么要使用 pinia + Cookie

俩种存储方式的上风都想要 ： 

• pinia 基于内存 存取快 但是革新就丢失
  
• localStorage / sessionStorage / cookie 基于磁盘 存取速率稍慢 革新不丢失(长期化)
  

由于我们既可以享受pinia速率上风封装上风 同时保持长期化
扩展：
内存读写速率：几十 GB/s
磁盘读写速率：几 GB/s
但是 token 字符串长度确实很短，无论哪种都很快，以是生存 token 的位置看团队的选择，都是可以的！

3.localstorage和cookie 和 sessionStorage的区别

 1.存储容量

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

 ​​2.数据有效期

• LocalStorage：数据是长期存储的，除非用户手动扫除欣赏器缓存大概通过 JavaScript 代码举行删除，否则数据会不停生存在欣赏器中。这使得它得当存储长期须要的用户数据，比如用户的个性化主题设置，下次用户打开欣赏器访问相干网站时，这些设置依然有效。
  
• Cookie：可以通过设置逾期时间来控制有效期。如果没有设置逾期时间，Cookie 会在欣赏器会话竣事（即关闭欣赏器）时自动失效。这对于生存和当前会话细密相干的数据很有效，比方用户登录后的会话信息，在用户关闭欣赏器后自动扫除登录状态相干的 Cookie。
  
• SessionStorage：数据的有效期仅限于当前欣赏器会话。当用户关闭欣赏器窗口大概标签页时，SessionStorage 中的数据就会被扫除。比方，一个多步调的表单填写过程中，数据可以暂时存储在 SessionStorage 中，一旦用户完成使用大概关闭页面，这些数据就不再生存。
  

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

• LocalStorage：只能被同源（协议、域名、端口雷同）的网页访问。比方，https://example.com下的网页不能访问https://other.com的 LocalStorage 内容，这包管了数据的安全性和独立性，防止差别网站之间的数据紊乱。
  
• Cookie：默认环境下，在和服务器端通讯时，会在同源的 HTTP 哀求中自动携带。同时，也可以通过设置domain和path属性来调解其作用范围，使其可以或许在多个子域名之间共享。不外，这种自动携带的特性大概会带来安全风险，由于敏感信息大概会在不须要的哀求中发送到服务器。
  
• SessionStorage：和 LocalStorage 一样，只能被同源的网页访问，确保了数据在同一泉源的网页之间的公道使用，制止跨源访问带来的安全隐患。
  

 



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金