前端Web用户 token 持久化

用户 token 持久化

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

基础思路:

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

Cookie 解释:浏览器本地存储区域,类似 localStorage

TypeScript 复制代码
pnpm add js-cookie
pnpm add @types/js-cookie -D
TypeScript 复制代码
// 专门用来操作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)
}

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

  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 请求中自动携带。同时,也可以通过设置domainpath属性来调整其作用范围,使其能够在多个子域名之间共享。不过,这种自动携带的特性可能会带来安全风险,因为敏感信息可能会在不必要的请求中发送到服务器。
  3. SessionStorage:和 LocalStorage 一样,只能被同源的网页访问,确保了数据在同一来源的网页之间的合理使用,避免跨源访问带来的安全隐患。
相关推荐
海天胜景21 分钟前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘41 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾1 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉1 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。1 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
wei_shuo2 小时前
飞算 JavaAI 开发助手:深度学习驱动下的 Java 全链路智能开发新范式
java·开发语言·飞算javaai
熊猫钓鱼>_>2 小时前
用Python解锁图像处理之力:从基础到智能应用的深度探索
开发语言·图像处理·python