前端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 请求中自动携带。同时,也可以通过设置domainpath属性来调整其作用范围,使其能够在多个子域名之间共享。不过,这种自动携带的特性可能会带来安全风险,因为敏感信息可能会在不必要的请求中发送到服务器。
  3. SessionStorage:和 LocalStorage 一样,只能被同源的网页访问,确保了数据在同一来源的网页之间的合理使用,避免跨源访问带来的安全隐患。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/59741.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【学习笔记】SAP ABAP——OPEN SQL(一)【INTO语句】

【INTO语句】 结构体插入(插入一条语句时) SELECT...INTO [CORRESPONDING FIELDS OF] <wa> FROM <db> WHERE <condition>.内表插入(插入多条语句时) SELECT...INTO|APPENDING [CORRESPONDING FIELDS OF] TABLE <itab>FROM <db> WHERE <con…

微服务透传日志traceId

问题 在微服务架构中&#xff0c;一次业务执行完可能需要跨多个服务&#xff0c;这个时候&#xff0c;我们想看到业务完整的日志信息&#xff0c;就要从各个服务中获取&#xff0c;即便是使用了ELK把日志收集到一起&#xff0c;但如果不做处理&#xff0c;也是无法完整把一次业…

Qt中实现高准确率的语音识别

选择语音识别引擎 开源语音识别项目中&#xff0c;以下两款工具可以用于支持中英文识别&#xff0c;并且与Qt兼容&#xff1a; Vosk&#xff1a;Vosk是一个开源的语音识别工具&#xff0c;支持中英文及多种语言&#xff0c;具备离线识别能力&#xff0c;且不依赖互联网。 Padd…

c语言中的线程管理pthread详解

在C语言中,多线程编程常用的POSIX线程(POSIX Threads, pthreads)库主要由pthread.h头文件提供。pthread.h定义了许多用于线程创建、管理、同步的函数和数据结构。下面是pthread.h中的核心概念和主要函数的详细介绍。 1. 基本概念 线程:线程是一个轻量级的进程,可以并发执…

十五:java web(7)-- Spring Boot

目录 1. Spring Boot 简介 1.1 简介 1.2 Spring Boot 的特点 1.3 Spring Boot 和 Spring 的关系 2. Spring Boot 快速入门 2.1 创建第一个 Spring Boot 项目 3. Spring Boot 配置管理 3.1 application.properties 和 application.yml 配置 这两种都可以 好像现在更推荐…

关于打开网页非常慢的解决方法

方法一&#xff1a;刷新dns缓存 ipconfig /flushdns方法二&#xff1a;许多网站&#xff0c;太落后&#xff0c;不支持ipv6&#xff0c;所以关闭ipv6即可

使用Python简单实现客户端界面

服务端实现 import threading import timeimport wx from socket import socket, AF_INET, SOCK_STREAMclass LServer(wx.Frame):def __init__(self):wx.Frame.__init__(self, None, id1002, titleL服务器端界面, poswx.DefaultPosition, size(400, 450))# 窗口中添加面板pl …

JDK1.5 java代码打包jar HmacSha256

文章目录 demo地址背景实现编写代码编译class文件打包 JAR 文件执行生成的 JAR 文件辅助验证方式 常见问题和解决方法常规生成jar方案maven插件idea工具 demo地址 https://github.com/xiangge-zx/HmacSha256 背景 最近接到一个需求,做一个可以用来HmacSha256加密的小工具&am…

ubuntu 22.04 server 安装 xtrabackup 2.4 qpress LTS

ubuntu 22.04 server 安装 xtrabackup 2.4 qpress LTS 参考 https://docs.percona.com/percona-xtrabackup/innovation-release/apt-repo.html https://www.ubuntuupdates.org/ppa/percona_server_with_xtradb?distjammy centos7 xtrabackup mysql&#xff08;8&#xff0…

MySQL 8.0中的‘caching_sha2_password‘身份验证插件问题

使用Navicat Premium 12连接MySQL数据库时会出现Authentication plugin ‘caching_sha2_password’ cannot be loaded的错误。 出现这个原因是mysql8 之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规则是caching_sha2_password, 解决问题方法有两种,一种是…

Go八股(Ⅳ)***slice,string,defer***

***slice&#xff0c;string&#xff0c;defer*** 1.slice和arry的区别 arry&#xff1a; Go语言中arry即为数据的一种集合&#xff0c;需要在声明时指定容量和初值&#xff0c;且一旦声明就长度固定&#xff0c;访问时按照索引访问。通过内置函数len可以获取数组中的元素个…

雪花算法(Snowflake Algorithm)C# 实现版本

这里采用10位的工作ID,当时间回拔时,采用工作ID增加1来避免生成与旧的ID重复。 雪花算法的结构 雪花算法生成的ID是一个64位的Long型数字,结构如下: 高41位:时间戳(timestamp)中间10位:工作节点ID(workerId),用来避免时间回拔。低12位:序列号(sequence)时间戳(…

服务器虚拟化:构建高效、灵活的数据中心

服务器虚拟化&#xff1a;构建高效、灵活的数据中心 在当今数字化时代&#xff0c;服务器虚拟化已经成为构建高效、灵活数据中心的关键技术。通过服务器虚拟化&#xff0c;企业可以将物理服务器划分为多个虚拟服务器&#xff0c;从而提高资源利用率、降低成本、增强灵活性和提…

2024-11-07 问AI: [AI面试题] 解释推荐系统的概念

文心一言 推荐系统是一种信息过滤系统&#xff0c;旨在预测用户对物品的“评分”或“偏好”&#xff0c;并为用户提供个性化的推荐。以下是关于推荐系统的详细解释&#xff1a; 一、定义与功能 推荐系统通过分析和利用用户的历史行为、偏好和其他信息&#xff0c;来预测用户…

Win系统通过命令行查看笔记本电池损耗/寿命/健康

在 Windows 10/11 系统中&#xff0c;可以通过指令查看笔记本电池的寿命情况&#xff0c;方法如下&#xff1a; 0&#xff0c;打开cmd/终端 键盘快捷键&#xff1a;Win R&#xff0c;然后输入cmd&#xff0c;点击【确定】 1&#xff0c;执行命令 在命令行中输入下面指令并按…

103 - Lecture 1

Introduction to Database 一、Introduction to Database Systems 1. 数据的定义 What is Data? EX: data could be a docx file storing your project status report; data could be a spreadsheet containing information • 数据只有在设计的场景中才有意义。&#xff…

前端加密方式详解与选择指南

在当今数字化时代&#xff0c;前端数据安全的重要性日益凸显。本文将深入探讨前端加密的多种方式&#xff0c;为你提供选择适合项目加密方式的实用策略&#xff0c;并分享一些实际案例及相应代码。 一、前端加密方式汇总 &#xff08;一&#xff09;HTTPS 加密 HTTPS 是在 H…

【大数据学习 | kafka高级部分】kafka中的选举机制

controller的选举 首先第一个选举就是借助于zookeeper的controller的选举 第一个就是controller的选举&#xff0c;这个选举是借助于zookeeper的独享锁实现的&#xff0c;先启动的broker会在zookeeper的/contoller节点上面增加一个broker信息&#xff0c;谁创建成功了谁就是主…

关于几种卷积

1*1卷积 分组卷积&深度可分离卷积 空洞卷积、膨胀卷积 转置卷积 https://zhuanlan.zhihu.com/p/80041030 https://yinguobing.com/separable-convolution/#fn2 11的卷积可以理解为对通道进行加权&#xff0c;对于一个通道来说&#xff0c;每个像素点加权是一样的&am…

OCR、语音识别与信息抽取:免费开源的AI平台在医疗领域的创新应用

一、系统概述 在医疗行业中&#xff0c;大量数据来自手写病历、医学影像报告、患者对话记录等非结构化数据源。这些数据常常存在信息碎片化和管理困难的问题&#xff0c;给医务人员的工作带来了不便。思通数科AI多模态能力平台正是为了解决这一行业痛点而生&#xff0c;产品集…