当前位置: 首页 > news >正文

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

下图来源于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()}`}
}

相关文章:

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

下图来源于cookie、localStorage 和 sessionStorage的区别及应用实例 既然localstorage无有效期,关闭浏览器还存在,那么用来存储用户的身份信息并不是太合适,先看一下B站中localstorage都存在了啥,原来把我搜索的记录都存在了下来…...

C++11 新特性:常量表达式 constexpr(下)

接上篇文章,继续说说常量表达式 constexpr 在模板编程中的使用场景。 constexpr 用于模板编程 在模板编程中,constexpr 的应用非常广泛,主要是因为它能够在编译时进行计算,这对于模板元编程、编译时断言、模板特化选择等场合尤为…...

大数据开发--02.环境准备

一.准备三台linux虚拟机 1.分别取名node1,node2,node3 2.配置静态ip 这里以node1为例,配置静态ip地址,其他node2.node3一样 配置完成之后别忘记 systemctl restart network 3.在各自的/etc/hosts文件中编辑三个Ip地址 三台都要配置, 4.然…...

选择word中的表格VBA

打开开发工具 选择Visual Basic插入代码 Sub 选择word中的表格() Dim t As Table an MsgBox("即将选择选区内所有表格,若无选区,则选择全文表格。", vbYesNo, "提示") If an - 6 Then Exit Sub Set rg IIf(Selection.Type wdSel…...

开放签开源电子签章白皮书-简版

开放签开源电子签章白皮书-简版 一、摘要: 开放签电子签章团队源自于电子合同SaaS公司,立志于通过开源、开放的模式,结合团队十多年的行业经验,将电子签章产品更简单、更低门槛的推广到各行各业中。让电子签章应用更简单&#x…...

uniapp、vue2.6、H5,利用腾讯TRTC,快速跑通1v1视频功能

多人视频聊天室搭建,官网已有相关demo和案例,需要快速搭建多人聊天室直接进入以下网站: 实时音视频 Web & H5 (Vue2/Vue3)-视频通话(含 UI)-文档中心-腾讯云说明:https://cloud.tencent.com/document/…...

Spring Data访问Elasticsearch----查询方法

Spring Data访问Elasticsearch----查询方法 一、查询lookup策略1.1 声明的查询 二、创建查询三、方法返回类型四、使用Query注解 一、查询lookup策略 Elasticsearch模块支持所有基本的查询构建功能,如字符串查询、native搜索查询、基于条件的查询和从方法名派生的查…...

PyTorch 深度学习(GPT 重译)(四)

第二部分:从现实世界的图像中学习:肺癌的早期检测 第 2 部分的结构与第 1 部分不同;它几乎是一本书中的一本书。我们将以几章的篇幅深入探讨一个单一用例,从第 1 部分学到的基本构建模块开始,构建一个比我们迄今为止看…...

视频无水印批量下载软件|抖音视频提取工具

视频无水印批量下载软件 在当今社交媒体充斥着大量优质视频内容的时代,很多用户都希望能够轻松下载自己喜爱的视频进行收藏或分享。为了满足用户的需求,我们特别推出了一款专业的视频无水印批量下载软件,让您可以方便快捷地获取喜爱的视频内容…...

【linux】环境基础|开发工具|gcc|yum|vim|gdb|make|git

目录 ​编辑 Linux 软件包管理器 yum 软件包: 操作: 拓展:lrzsz简介 Linux开发工具 Linux编辑器-vim使用 vim 的基本概念 命令模式 插入模式 底行模式 vim 命令模式的操作指令 vim 底行模式的操作命令 Linux编译器-gcc/g使用 功能 格…...

小程序中实现轮播图左向堆叠

1、效果图&#xff1a; 轮播图左向堆叠 2、封装的组件&#xff1a; my-swiper.wxml <view><view class"tower-swiper" bindtouchend"TowerEnd"><view class"tower-item" wx:for"{{swiperList}}" wx:key"index&q…...

零基础入门数据挖掘系列之「建模调参」

摘要&#xff1a;对于数据挖掘项目&#xff0c;本文将学习如何建模调参&#xff1f;从简单的模型开始&#xff0c;如何去建立一个模型&#xff1b;如何进行交叉验证&#xff1b;如何调节参数优化等。 建模调参&#xff1a;特征工程也好&#xff0c;数据清洗也罢&#xff0c;都是…...

如何在Mac中删除照片?这里有详细步骤

前言 本文介绍如何从Mac中删除照片,以释放硬盘空间或更好地组织文件和文件夹。 如何使用废纸篓删除Mac上的图片 在Mac上删除图片的最简单方法之一是使用废纸篓功能。学习只需几秒钟。下面是如何删除单个图片以及如何在Mac上删除多个图片,以及一些关键和有用的提示,以使该…...

Qt笔记 事件处理_鼠标事件

什么是事件&#xff1f; 点击鼠标左键&#xff0c;双击鼠标左键&#xff0c;鼠标来回移动&#xff0c;按下键盘按钮&#xff0c;这些都是事件。 那么事件的响应机制是什么样的呢&#xff1f; 首先main函数中有一个QApplication&#xff0c;其作用是创建一个应用程序对象&…...

【Vue】三、使用ElementUI实现图片上传

目录 一、前端代码实现 二、后端代码实现 三、调试效果实现 一、前端代码实现 废话不多说直接上代码 <el-form-item prop"image" label"上传图片" v-model"form.image"><el-upload:action"http://localhost:8…...

ffmpeg的ffprobe.exe查询修改视频信息

# 查询视频信息 ffprobe -i 1.mp4Input #0, mov,mp4,m4a,3gp,3g2,mj2, from video.mp4:Metadata:major_brand : isomminor_version : 512compatible_brands: isomiso2avc1mp41encoder : Lavf58.20.100comment : 123654Duration: 00:00:15.21, start: 0.0…...

Windows 2019服务器上安装NFS服务器

提供NFS服务服务器&#xff1a; Windows 2019服务器上安装NFS服务器资源管理器 创建目录比如D:\nfshare, 鼠标邮件菜单 点击 属性&#xff0c;进行NFS共享 使用NFS服务的客户端&#xff1a; 另外一台Windows服务器&#xff0c;需要安装NFS客户端 具体操作&#xff1a;Window…...

元素定位之xpath和css

元素定位 xpath绝对路径相对路径案例xpath策略&#xff08;路径&#xff09;案例xpath策略&#xff08;层级、扩展&#xff09;属性层级与属性层级与属性拓展层级与属性综合 csscss选择器&#xff08;id、类、标签、属性&#xff09;id选择器类选择器标签选择器属性选择器案例-…...

JavaScript 什么是纯函数,有哪些常见的纯函数

什么是纯函数 纯函数是指那些不依赖于外部状态&#xff0c;也不改变外部状态的函数。在JavaScript中&#xff0c;纯函数的返回值仅由其输入参数决定&#xff0c;而且执行纯函数不会产生副作用&#xff0c;比如修改全局变量或修改传入的参数。 常见的纯函数 JavaScript中一些常…...

c++ 指针大小

C的一个指针占内存几个字节&#xff1f; 结论&#xff1a; 取决于是64位编译模式还是32位编译模式&#xff08;注意&#xff0c;和机器位数没有直接关系&#xff09; 在64位编译模式下&#xff0c;指针的占用内存大小是8字节在32位编译模式下&#xff0c;指针占用内存大小是4字…...

3分钟解锁Axure RP中文界面:从英文障碍到设计自由

3分钟解锁Axure RP中文界面&#xff1a;从英文障碍到设计自由 【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包。支持 Axure 11、10、9。不定期更新。 项目地址: https://gitcode.com/gh_mirrors/ax/axure-cn 还在被Axure RP的英…...

彻底解决ComfyUI图像细节缺失问题:Impact Pack V8版完整功能解锁指南

彻底解决ComfyUI图像细节缺失问题&#xff1a;Impact Pack V8版完整功能解锁指南 【免费下载链接】ComfyUI-Impact-Pack Custom nodes pack for ComfyUI This custom node helps to conveniently enhance images through Detector, Detailer, Upscaler, Pipe, and more. 项目…...

别再只调占空比了!舵机脉冲频率从50Hz到600Hz,实测告诉你哪些频率会让舵机‘罢工’

舵机控制进阶指南&#xff1a;突破50Hz限制的频率优化实战 第一次用Arduino控制舵机时&#xff0c;我也以为只要调准1ms到2ms的脉宽就够了。直到在机器人比赛现场&#xff0c;亲眼看到价值上万的机械臂因为频率设置不当而"跳机械舞"——那一刻才明白&#xff0c;舵机…...

OpenRGB:终极开源RGB灯光控制中心,跨平台统一管理多品牌设备

OpenRGB&#xff1a;终极开源RGB灯光控制中心&#xff0c;跨平台统一管理多品牌设备 【免费下载链接】OpenRGB Open source RGB lighting control that doesnt depend on manufacturer software. Supports Windows, Linux, MacOS. Mirror of https://gitlab.com/CalcProgrammer…...

MATLAB几何计算实战:从射线法到二分法,高效判定点与多边形位置关系

1. 为什么需要点与多边形位置判定&#xff1f; 在地理围栏报警系统中&#xff0c;当设备坐标进入预设区域时需要触发警报&#xff1b;在CAD软件里&#xff0c;我们需要判断鼠标点击是否选中了某个图形&#xff1b;在游戏开发中&#xff0c;子弹是否击中目标往往需要检测碰撞点是…...

保姆级教程:在Ubuntu 20.04上搭建高通Camx源码阅读与调试环境(含Source Insight配置)

高通Camx开发环境搭建实战&#xff1a;从源码获取到调试全流程指南 如果你正在阅读这篇文章&#xff0c;大概率是因为你刚接触高通Camera驱动开发&#xff0c;面对庞大的Camx代码库感到无从下手。Camx作为高通Spectra ISP的核心驱动框架&#xff0c;其复杂性和深度确实会让初学…...

如何用trackerslist终极优化BT下载:92个追踪器全解析与实战指南

如何用trackerslist终极优化BT下载&#xff1a;92个追踪器全解析与实战指南 【免费下载链接】trackerslist Updated list of public BitTorrent trackers 项目地址: https://gitcode.com/GitHub_Trending/tr/trackerslist 你是否曾经面对BT下载时连接数寥寥无几、下载速…...

用GEE和Sentinel-5P数据,5分钟搞定城市空气质量变化趋势分析(以NO2、O3为例)

城市空气质量动态监测&#xff1a;基于GEE与Sentinel-5P的高效分析实战 清晨打开天气预报APP时&#xff0c;那些跳动的空气质量指数背后&#xff0c;其实隐藏着卫星每天扫描地球大气层产生的海量数据。作为环境研究者&#xff0c;我们完全可以通过Google Earth Engine&#xff…...

保姆级教程:用Python+ArcPy搞定ERA5-Land月数据(降水/气温/辐射)的下载与批量处理

PythonArcPy自动化处理ERA5-Land气象数据的完整实战指南 当面对全球尺度的ERA5-Land月数据时&#xff0c;手动处理降水、气温和辐射等多变量数据就像用勺子舀干大海——效率低下且容易出错。本文将分享一套经过实战检验的自动化处理方案&#xff0c;帮助地理信息、生态水文领域…...

国产小参数大模型落地实践:南北阁 Nanbeige 4.1-3B 在中小企业AI助手场景应用

国产小参数大模型落地实践&#xff1a;南北阁 Nanbeige 4.1-3B 在中小企业AI助手场景应用 1. 引言&#xff1a;为什么中小企业需要自己的AI助手&#xff1f; 想象一下&#xff0c;你的公司每天要处理大量的客户咨询、内部文档整理和会议纪要。如果有一个能理解你业务、随时待…...