前端 登录权限 本地缓存用户信息

最新推荐文章于 2023-11-06 15:57:17 发布
最新推荐文章于 2023-11-06 15:57:17 发布
阅读量3.5k 收藏 8
点赞数 22
分类专栏： 前端 文章标签： javascript 缓存 vue cookie session
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ckhIS/article/details/119832044
版权
本文探讨了前端开发中用于登录权限和本地缓存用户信息的三种常见方法：localStorage、sessionStorage和Cookie。localStorage提供无时间限制的数据存储，适合存储大量数据；sessionStorage则在浏览器关闭后消失，适用于会话级存储；Cookie虽然操作相对复杂，但支持设置过期时间。在Vue开发中，可以借助vuex-persistedstate实现状态持久化，结合vuex进行更高效的状态管理。
摘要由CSDN通过智能技术生成 
   登录中很关键的一个操作就是在本地缓存用户信息，用来验证并记录下用户的登录状态。用来维护用户的信息安全，比如设置网页访问权限，也有些请求头需要在authentication带上相关信息，以验证用户身份。
   下面有几种本地缓存的方法，包括HTML5中的localStorage和sessionStorage    以及最常用的cookie，和vue中的vuex。
  1. localStorage
    localStorage属于HTML中的特性，数据以键/值对形式存在，localStorage可以存储的较大的数据，并且存储的数据没有时间限制，直到手动删除。另外localStorage在浏览器中都以字符串形式存储，而我们又经常会存储对象（JSON格式）的数据，所以需要转化。
    以下的方法只要写在html的<script>标签中就会生效哦，也就是任何框架中都适用。
localStorage.setItem(key,value) //设置localstorage
localStorage.getItem
最低0.47元/天 解锁文章
ckhIS
关注
专栏目录
登录用户缓存试验
NeverSayDie_的博客
06-15 2385
登录页面 login.jsp 校验用户 LoginServlet 登录成功 succ1.jsp只是小实验，所以没有连接数据库。首先，登录页面是一个简单的提交表单。 <h1>大写的登陆</h1><br/> <font color="red"><b><%=message %></b></font> <form action="/day_11-3/LoginServlet"
数据存储-前端缓存技术
qq_53559311的博客
07-24 787
这是一个通用术语，包含几个独立但相关的APIWebStorage、WebSQLDatabase、IndexedDatabase和FileAccess。每种技术都提供了在用户硬盘上——而非通常存储数据的服务器——存储数据的独特方式。这么做主要基于以下两点理由（a）使webapp离线可用；（b）改善性能。-----摘自web应用允许使用浏览器提供的API将数据存储在客户端电脑上；客户端存储遵守“同源策略”，不同的站点页面之间不能相互读取彼此的数据；......
加载用户菜单权限信息放到哪里合适
xiaoxiao1777的博客
05-31 1008
情景： 登录成功获取到token后，跳转到首页，请求用户的权限信息(包括可访问的菜单信息)这一步是放到跳转之前的路由守卫中，还是放到首页的钩子函数中呢？ 分析： 其实都可以，但觉得还是放到跳转之前，依然处于登录页面中好一些，因为数据处理准备好，再去加载页面会合理 ...
Vue 使用localStorage保存登录状态
sanjun_done的博客
12-01 2814
使用localStorage保存登录状态 相关概念： 只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。 localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessi...
web前端安全
liona_koukou的博客
07-28 576
大体了解了下web前端安全的几项黑客技术，以下做简单整理，具体的深入学习希望有时间好好读一下《web前端黑客技术揭秘》这本书，给走在web前端学习路上的自己加油！！ 前端安全主要有三类：XSS、CSRF、界面操作劫持。越往后，实施这些攻击的代价越大，界面劫持需要很好的美工基础，黑客高美工不太现实，因为现在有很多好的方式可以黑下目标。 题外话：跨站攻击发生在浏览器客户端，而SQL注入攻击由于
前端数据存储与缓存策略
Sun_blog
06-29 923
通过合理选择和使用本地存储方案（如 LocalStorage、SessionStorage 和 IndexedDB）以及缓存策略（如强缓存和协商缓存），可以有效地管理和利用数据，提高网页的加载速度和响应性能。在前端开发中，数据的存储和缓存是非常重要的一环。合理的数据存储和缓存策略可以提高网页的加载速度和用户体验。本文将介绍一些常用的前端数据存储和缓存策略，并通过一个示例来说明其实际应用。IndexedDB 是一种高级的本地存储方案，可以存储大量结构化数据，并支持复杂的查询。
token在前端页面的处理及java后台代码( 登录 /加载登录用户的信息/ 置换token
02-27
如果有效，服务器从Token中提取用户信息，用于提供个性化的服务或者权限控制。 3. **置换Token**： - 为了防止Token被长期滥用，通常会设置Token的有效期。当Token即将过期时，前端需要发起Token刷新流程。这通常...
Springboot前后端分离，JWT+Security+Redis实现登录拦截及权限认证，包含全局异常处理以及统一返回风格
最新发布
12-25
5. **登录拦截与权限认证**：当用户登录时，Spring Security会验证用户凭证，如果验证成功，会生成一个JWT并返回给前端。前端将这个令牌保存在本地，后续的API请求都会带上这个令牌。服务器端通过解析JWT来识别用户...
前端页面利用localStorage设置缓存方案
yhaibo222的专栏
12-06 6750
前端页面利用localStorage设置缓存方案 localStorage的存储空间大致在5M左右，各大浏览器略有差别。我再chrome 54中测试能放下 5233962 字节，该值并不精确，通过每次往localStorage中插入一个大字符串，到达上线报错之后再取总长度得到。 LocalStorageClient类提供两个方法来存储缓存数据save(key, data, flag) saveAss
前端系统权限
zhu_hangfeng的博客
04-12 180
前端系统权限
【Javascript】进阶之localStorage在登录注册中的应用
qq_37086980的博客
12-16 875
描述 1. 进入首页, 判断本地缓存的手机号和密码是否都存在, 如果都存在显示已经登录和显示个人中心; 如果其中有一项不存在则状态为未登录, 显示登录注册按钮。 2. 注册的时候, 在缓存中有一个数组 ，存储当前创建的账户信息 3. 登录的时候,获取数组,验证对象是否在数组中存在 localStorage基本语法 // localStorage: 缓存数据 json数据 console.log(localStorage); // 存储数据: 1. localSt
web前端安全以及防范措施
liujiujiang的博客
11-24 2112
以下简单介绍这几种常见的 web 安全问题： XSS CSRF SQL注入 点击劫持 除了这个还有同源策略，下面先简单说下这个 什么是同源策略？ 同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。 不受同源策略限制的： 1、页面中的链接，重定向以及表单提交是不会受到...
前端浏览器缓存位置
LuckXinXin的博客
11-14 933
从缓存位置上来说分为四种，并且各自有优先级，当依次查找缓存且都没有命中的时候，才会去请求网络 Service Worker Memory Cache Disk Cache Push Cache 网络请求 Service Worker service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。 当 Service Worker 没有命中缓存的时候，我们需要去调用 fetch 函数获取数据。也就是说，如果我们没.
前端浏览器缓存更新删除操作
zcxbd的博客
10-09 350
js中session Storage和local Storage操作 session Storage操作 // 保存数据到sessionStorage sessionStorage.setItem(‘key’, ‘value’); // 从sessionStorage获取数据 var data = sessionStorage.getItem(‘key’); // 从sessionStorage删...
html 缓存的用法
冰淇淋真好吃
10-30 1088
//存如缓存 function cl(msg){ if(window.localStorage){ localStorage.setItem("usermsg",msg); }else{ Cookie.write("usermsg",msg); } } //从缓存中取出 var str = window.localStorage?localStorage.getItem("us...
vue如何实现登录数据的持久化
每天都想吃好吃的
11-06 1362
是一款流行的JavaScript框架，它可以帮助开发者构建高效且易于维护的单页面应用程序。在Vue.js中，实现登录数据的持久化是一个重要的任务，因为它可以帮助用户保持登录状态并避免频繁的登录操作。在本文中，我们将讨论Vue.js如何实现登录数据的持久化，以及相关的代码实现。
浅谈常见浏览器缓存方法(前端缓存)
Angel_Tears_的博客
08-02 6660
浏览器缓存时浏览器保存数据用于快速读取或避免请求重复资源,提升网页加载速度. 前端缓存可分为两大类:http缓存和浏览器缓存 一.http缓存 http缓存指的是:当客户端向服务器请求资源时,会先抵达浏览器缓存,如果浏览器有"要求资源"的副本,就可以直接从浏览器缓存中提取,而不是从原始服务器中提取这个资源 常见的htttp缓存只能缓存get请求响应的资源,对于其他类型的响应则无能为力, http缓存都是从第二次请求开始的,第一次请求资源时,服务器返回资源,并在respone hearder头中回传资源的
基于微前端qiankun的多页签缓存方案实践
vivo互联网技术
08-02 5052
本文梳理了基于阿里开源微前端框架qiankun，实现多页签及子应用缓存的方案，同时还类比了多个不同方案之间的区别及优劣势，为使用微前端进行多页签开发的同学，提供一些参考。
uni-app 前端判断小程序用户登录
09-09
在uni-app中，可以通过一些方法来判断小程序用户是否已登录。 首先，可以使用uni-app提供的uni.getStorageSync()方法来获取本地缓存中保存的相关用户信息。通常，我们会在用户登录时将其相关信息存储在本地缓存中。例如，可以在用户成功登录后，将用户的登录态token或用户信息存储在本地缓存中。通过uni.getStorageSync()方法，我们可以获取到这些信息。如果获取到了相关信息，则说明用户已经登录。 另外，还可以通过uni.getUserInfo()方法来获取小程序用户的基本信息。在小程序登录过程中，如果用户授权了获取信息的权限，我们可以通过uni.getUserInfo()方法来获取到用户的基本信息。如果能够获取到用户信息，则说明用户已登录。 还有一种方法是通过后端接口进行验证。前端可以调用相应的后端接口来校验用户的登录状态。通过发送登录态token或用户信息给后端，后端可以验证该用户是否已登录。后端接口可以返回相应的信息，前端根据返回结果进行判断。 综上所述，我们可以通过获取本地缓存中的信息、获取用户信息、以及调用后端接口进行验证，来判断小程序用户是否已登录。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值