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

2024-03-17 09:52

本文主要是介绍多租户平台前端存储结构的选择,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

下图来源于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.chinasem.cn/article/818599

相关文章

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

深入理解Apache Kafka(分布式流处理平台)

《深入理解ApacheKafka(分布式流处理平台)》ApacheKafka作为现代分布式系统中的核心中间件,为构建高吞吐量、低延迟的数据管道提供了强大支持,本文将深入探讨Kafka的核心概念、架构... 目录引言一、Apache Kafka概述1.1 什么是Kafka?1.2 Kafka的核心概念二、Ka

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript