多租户平台前端存储结构的选择

下图来源于cookie、localStorage 和 sessionStorage的区别及应用实例
1
既然localstorage无有效期,关闭浏览器还存在,那么用来存储用户的身份信息并不是太合适,先看一下B站中localstorage都存在了啥,原来把我搜索的记录都存在了下来。
1
因此用户登录之后的token信息,我还是存在cookie中,虽然后台还是会为token设置超时时间。
1
之前参考了一个网站,将菜单和权限存储在localstorage中,除非他很少变动。
多租户模式下,一个人可以拥有多个账套,打开不同页签,操作不同账套的数据,从上图看,应该存储在sessionStorage,例如
当前账套ID是16
1
看看http请求参数,与sessionStorage中存储的账套ID一致。
接着看另外一个账套
1
另外一个账套请求参数如下,与账套信息是匹配的
1
因此知道了,SaaS之类平台,租户信息应该存储在sessionStorage中,这样可以让用户操作不同账套,数据还不会错乱。
接下来再看状态管理pinia,状态数据是存储在内存中,当你在页面使用鼠标邮件刷新,这个数据就会消失。
1
赋值是下面的方式,这种方式,在页面刷新的时候,就会丢失。
1
pinia有持久化解决方案,Pinia学习-存储数据、修改数据以及持久化实现,不过写一个通用的存储模板后,不一定非得要这样一个组件,因为既然选择有一定周期的存储,一定是因为业务,既然业务存在,那么应该掌握好数据的生存周期,所以我的经验告诉我,我应该自行设置。
接下来附带了统一数据存取风格的代码

/* localStorage */
tool.local = {set(key, data, datetime = 0) {//加密if(sysConfig.LS_ENCRYPTION == "AES"){data = tool.crypto.AES.encrypt(JSON.stringify(data), sysConfig.LS_ENCRYPTION_key)}let cacheValue = {content: data,datetime: parseInt(datetime) === 0 ? 0 : new Date().getTime() + parseInt(datetime) * 1000}return localStorage.setItem(key, JSON.stringify(cacheValue))},get(key) {try {const value = JSON.parse(localStorage.getItem(key))if (value) {let nowTime = new Date().getTime()if (nowTime > value.datetime && value.datetime != 0) {localStorage.removeItem(key)return null;}//解密if(sysConfig.LS_ENCRYPTION == "AES"){value.content = JSON.parse(tool.crypto.AES.decrypt(value.content, sysConfig.LS_ENCRYPTION_key))}return value.content}return null} catch (err) {return null}},remove(key) {return localStorage.removeItem(key)},clear() {return localStorage.clear()}
}/*sessionStorage*/
tool.session = {set(table, settings) {var _set = JSON.stringify(settings)return sessionStorage.setItem(table, _set);},get(table) {var data = sessionStorage.getItem(table);try {data = JSON.parse(data)} catch (err) {return null}return data;},remove(table) {return sessionStorage.removeItem(table);},clear() {return sessionStorage.clear();}
}/*cookie*/
tool.cookie = {set(name, value, config={}) {var cfg = {expires: null,path: null,domain: null,secure: false,httpOnly: false,...config}var cookieStr = `${name}=${escape(value)}`if(cfg.expires){var exp = new Date()exp.setTime(exp.getTime() + parseInt(cfg.expires) * 1000)cookieStr += `;expires=${exp.toGMTString()}`}if(cfg.path){cookieStr += `;path=${cfg.path}`}if(cfg.domain){cookieStr += `;domain=${cfg.domain}`}document.cookie = cookieStr},get(name){var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"))if(arr != null){return unescape(arr[2])}else{return null}},remove(name){var exp = new Date()exp.setTime(exp.getTime() - 1)document.cookie = `${name}=;expires=${exp.toGMTString()}`}
}

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

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

相关文章

灯塔:CSS笔记(4)

伪类选择器: 1.作用与优势: 1.作用:根据元素在HTML中的结构关系查找元素 2.优势:减少对于HTML中类的依赖,有利于保持代码的整洁 3.场景:常用于查找某父级选择器中的子元素 2.选择器 选择器说明E:first-c…

重新认识BIO、NIO、IO多路复用、Select、Poll、Epollo它们之间的关系

目录 一、背景 二、名词理解 (1)BIO (2)NIO (3)IO多路复用 (4)Select、Poll、Epollo 三、他们之间的关系总结 一、背景 最近又在学习网络IO相关知识,对我们常说的…

可视化软件:第一原理计算/VASP + 结构预测/USPEX

分享一篇 VASPUSPEX 的可视化软件。 感谢论文的原作者! 主要内容 “流行的第一原理仿真代码 Vienna Ab initio Simulation Package (VASP) 和晶体结构预测 (CSP) 包、Universal Structure Predictor: Evolutionary Xtallography (USPEX) 已集成到 GDIS 可视化软件…

PWM驱动舵机

PWM驱动舵机 接线图 程序结构图: pwm.c部分代码 #include "stm32f10x.h" // Device headervoid PWM_Init(void){// 开启时钟,这里TIM2是通用寄存器RCC_APB1PeriphClockCmd(RCC_APB1Periph_TIM2,ENABLE);// GPIO初始化代…

如何在Windows系统搭建Emby影音平台并实现远程访问本地文件【内网穿透】

文章目录 1.前言2. Emby网站搭建2.1. Emby下载和安装2.2 Emby网页测试 3. 本地网页发布3.1 注册并安装cpolar内网穿透3.2 Cpolar云端设置3.3 Cpolar内网穿透本地设置 4.公网访问测试5.结语 1.前言 在现代五花八门的网络应用场景中,观看视频绝对是主力应用场景之一&…

计算机网络——物理层(数据交换方式)

计算机网络——数据交换方式 提高数据交换方式的必要性电路交换电路交换原理电路交换的阶段建立阶段通信阶段和连接拆除阶段 电路交换的优缺点报文交换什么是报文报文交换的阶段报文交换的优缺点 分组交换分组交换的阶段分组交换的优缺点 数据交换方式的选择数据报方式数据报方…

unity内存优化之AB包篇(微信小游戏)

1.搭建资源服务器使用(HFS软件(https://www.pianshen.com/article/54621708008/)) using System.Collections; using System.Collections.Generic; using UnityEngine;using System;public class Singleton<T> where T : class, new() {private static readonly Lazy<…

SQLite数据库使用指南以及相关API编程

SQLite介绍 SQLite是一种基于C语言开发的轻量级、快速、自包含、高可靠性和全功能的SQL数据库引擎。它是全球范围内使用最为广泛的数据库引擎&#xff0c;被嵌入到所有移动设备和大部分计算机中&#xff0c;并且伴随着无数日常使用的应用程序一起提供。SQLite的文件格式具有稳…

Qt教程 — 3.4 深入了解Qt 控件:Input Widgets部件(3)

目录 1 Input Widgets简介 2 如何使用Input Widgets部件 2.1 Dial 组件-模拟车速表 2.2 QScrollBar组件-创建水平和垂直滚动条 2.3 QSlider组件-创建水平和垂直滑动条 2.4 QKeySequenceEdit组件-捕获键盘快捷键 Input Widgets部件部件较多&#xff0c;将分为三篇文章介绍…

JavaWeb笔记 --- 四、HTMlCSS

四、HTMl&CSS HTML入门 基本标签 图片、音频、视频标签 尺寸单位 px&#xff1a;像素 百分比 超链接标签 列表标签 表格标签 布局标签 表单标签 CSS导入方式 CSS选择器

【JDBC编程】 Java程序操作数据库

目录 一、数据库编程的必备条件 二、什么是JDBC&#xff1f; 三、JDBC的使用 1. 准备工作 2. 建立数据库连接 2.1 加载驱动程序 2.2 数据库连接池技术 3. 正式操作 四、JDBC的局限性与MyBatis的优势 一、数据库编程的必备条件 编程语言&#xff0c;如Java&#xff0…

MySQL:SQL优化

1. 插入优化 使用insert语句单条单条数据插入效率偏低&#xff0c;建议使用insert批量插入数据&#xff0c;批量控制在500-1000条数据较为合适&#xff0c;当面对数以百万的数据时&#xff0c;可以使用load指令&#xff0c;提升插入数据效率 相关指令 #客户端连接服务端加上参…