以前都是开始一段废话的,现在直接进入主题,首先介绍一下一些概念:

单页应用:

优点:

  1. 具有桌面应用的即时性、网站的可移植性和可访问性。
  2. 用户体验好、快,内容的改变不需要重新加载整个页面,web应用更具响应性和更令人着迷。
  3. 基于上面一点,SPA相对对服务器压力小。
  4. 良好的前后端分离。SPA和RESTful架构一起使用,后端不再负责模板渲染、输出页面工作,web前端和各种移动终端地位对等,后端API通用化。
  5. 对前端人员javascript技能要求更高,促使团队技能提升。

缺点:

  1. 不利于SEO。
  2. 初次加载耗时相对增多。
  3. 导航不可用,如果一定要导航需要自行实现前进、后退。
  4. 对开发人员技能水平、开发成本高。

多角色:项目设计中多角色参与,比如我现在做的系统,除了有个人用户,还有开店的商户进行登录2种角色

session:这个不多说,后台系统判断用户活跃存在的一种身份凭证。PS:现在很多大型公司都自己做session管理

问题再现

  1. 在一个浏览器中,首先使用个人用户登录(现在该浏览器针对该站点发送的请求为个人用户的session)
  2. 然后在浏览器中新开一个标签页,同样访问该网址,然后安全退出,清除cookie保存的一些信息和服务器的session数据。然后使用商户账号进行登录(现在整个浏览器针对于该域名,发送的请求都使用该商户的session)
  3. 现在切换到第一个标签页,是个人的首页,然后点一个功能按钮,监控xhr的请求,你会发现个人用户请求的session凭据并不是个人的,被商户的标识覆盖了,且占用了商户的session去发送请求
  4. 这样得到的结果肯定是错的。所以必须解决该问题

测试淘宝

  •  登录第一个账户

  • 新开标签页输入相同网址

  • 网页会自动跳转到和标签也一样的页面

  • 退出登录新的账号,第一个标签页还是在第一个人的个人中心那里

  • 登录第二个账户,这个时候第一个标签页是第一个账户的个人信息,第二个标签页是第二个账户的个人信息

  • 这个时候,浏览器针对这个域名,其实存储的已经是第二个账户的所有信息了,包括session_id。所以点击第一个标签页的任何操作,如果不刷新页面的话(也就是单页应用),会以第二个用户的session_id去请求数据。但是淘宝是刷新整个页面就不存在这个问题了。

  • 这样整页刷新就是第二个账户的所有的信息了。如果系统多角色,而且多角色菜单啊,和业务功能不一样的话,就会更明显发现大问题,抢占session,无法正确请求数据

解决方案

  确立解决手段:经过测试淘宝网站发现,淘宝针对这种问题,每次操作都会刷新页面,因为刷新页面所有数据都将重新向后台请求,所以不会存在该问题:不刷新页面然后通过ajax一步请求数据。所以解决手段就是只要刷新页面全部重新请求数据就不会出现这个问题。

  关键问题:怎么去让浏览 器每次去鉴别是否为一个用户,然后让浏览器主动去刷新页面

  解决步骤

  1. 因为问题关键是用户发出的请求会被商户的覆盖叼,所以确认第一步在用户每次请求的时候去检查用户session_id是否一致(为同一个用户)
  2. 在前端每次发送ajax请求的时候去检查每次用户登录的时候缓存的session_id是否和当前浏览器登录的用户使用的session_id是否一致
  3. 因为安全退出的时候我们会清除所有该域名下的cookie(这是我们设定的规则),然后用户登录更新cookie,所以cookie中无法去检测是否一致。PS:其实在cookie中也可以判断,每次登录判断oldSession_id是否有值,没有的话就将oldSession_id和newSession_id都设置为该用户的Session_id,安全退出的时候只清除newSession_id,用户在新标签页再登录的时候判断oldSession_id的值,然后设置newSession_id的值。这样就可以比对了,但是我们的规则是清除所有的cookie,所以没办法,这里我们走不通。
  4. 最后灵光一闪,想到了单页应用的优点:不刷新页面,从而进行局部刷新或操作。这就代表着,单页应用每次进行dom渲染完成之后,就不会第二次渲染整个页面的dom,也就代表了window对象不会像每次页面刷新重置window中的方法和对象了,那么我们就可以将每次缓存当前用户的session_id到window对象中,这样的话,我们每次请求的时候取到每次用户登录缓存的session_id和及时更新的cookie中的当前用户的session_id进行比对,如果不一样,那么就可以刷新页面,整个页面重新去请求整个数据,这样就不会出现这样覆盖session_id的问题
  5. 好了,问题解决了,但是需要注意的是,每次新开一个单页应用页面都要缓存一下session_id这样很繁琐,但是没办法,业务规则确定了安全退出,不留任何痕迹。繁琐不是问题,解决问题才不是问题

其实解决问题的方式有千万种,没有你解决不了的,只有你想不到的。程序员的路还很漫长,如果目标更大一点,架构师啊或者其他的话,这样的路更长。而且在职场的话,老板不是要的你的各种阻塞的理由,而是一个结果,你解决了没有?解决了,ok能力杠杠的,解决不了,对不起,能力还欠缺。所以,我的原则是:能做的,漂亮的解决;不能做的,评估一下,想方设法去解决,这样才能让老板或者你的上司相信你,安心把事情给你做,这样的话,老板器重你了,升职加薪也不是问题咯。

分享我的全栈书签(持续集成中):https://github.com/GerryIsWarrior/MyBookmarks   希望点颗星,这才是我的动力

个人简介:

  • 性别:男
  • 爱好:女
  • 目标:全栈架构师
  • github:https://github.com/GerryIsWarrior

转载于:https://www.cnblogs.com/GerryOfZhong/p/6094612.html

以整体思维看问题:解决单页应用,系统角色请求覆盖身份唯一标识(本项目中是session_id命名的)发送请求问题...相关推荐

  1. 以整体思维看问题:解决单页应用,系统角色请求覆盖身份唯一标识(本项目中是session_id命名的)发送请求问题

    以整体思维看问题:解决单页应用,系统角色请求覆盖身份唯一标识(本项目中是session_id命名的)发送请求问题 参考文章: (1)以整体思维看问题:解决单页应用,系统角色请求覆盖身份唯一标识(本项目 ...

  2. 雨尘奇偶猫单页SEO系统源码v1.3

    简介: 雨尘奇偶猫单页SEO系统源码v1.3,PHP开发,随机静态页面生成,一秒钟可生成上千条单页面,批量生成单页用来做SEO是非常不错的源码. 支持文章采集,功能,多模板选择批量生成单页,本次更新增 ...

  3. 前沿 | 5G尚未发现明显漏洞?周鸿祎:要用整体思维看5G安全

    来源:中国信息安全 11月21日,首届世界5G大会在京开幕,这也是5G商用落地21天后,中国5G产业迎来的首次集体誓师.作为网络安全的领军企业,360携网络安全大脑亮相此次大会,为5G时代的工业互联网 ...

  4. 如何删除第一张单页_如何用PowerBI导入网页数据

    作者: 东军 相信很多朋友被PBI颜值吸引而入了坑,迫切想上手,但往往会卡在数据源环节.本公司数据自己没权限,外公司数据可望不可及,而网络社区里提供的练习数据,往往专业性太强,业务逻辑摸不透,分析更是 ...

  5. 揭秘喜马拉雅黑科技——网页播放器(创建自己的单页应用)

    某天上班,偶然打开网页版的喜马拉雅,随手点了首推荐音频...于是伴随着动词大词,动词大词,继续逛着它的首页. 一个不小心,又点进了老郭的相声,哎,还是木有更新,不过老段子也可以再听听,正当老夫要点播的 ...

  6. prerender html5,HTML5 VUE单页应用 SEO 优化之 预渲染(prerender-spa-plugin)

    前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是 单页面 应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而 ...

  7. 【网站架构】为什么我的单页应用这么慢,打开页面需要几分钟?怎样才能用好单页应用?现阶段把整个项目做成一个单页应用真的可行?单页应用的工作原理是什么?

    传统的网站会不断跳转页面, 例如单击搜索后会跳转页面,单击翻页后会跳转页面, 而一旦出现跳转页面,用户就需要等待重新加载页面后才能继续操作. 为了改进这种糟糕体验,单页应用的概念逐渐流行, 单页应用指 ...

  8. 【前端部署第四篇】使用 Docker 构建缓存及多阶段构建优化单页应用

    大家好,我是山月,这是我最近新开的专栏:前端部署系列.包括 Docker.CICD 等内容,大纲图示如下: 示例代码开源,置于 Github 中,演示如何对真实项目进行部署上线. simple-dep ...

  9. 七天学会ASP.NET MVC(七)——创建单页应用

    目录 引言 最后一篇学什么 实验32-整理项目组织结构 关于实验32 实验33--创建单页应用--第一部分-安装 什么是Areas? 关于实验33 实验34--创建单页应用--第二部分-显示Emplo ...

最新文章

  1. 在Angular中有多个字段
  2. 【Android 高性能音频】Oboe 开发流程 ( 创建并设置 AudioStreamCallback 对象 | 打开 Oboe 音频流 | 日志封装 logging_macros.h )
  3. 华东交通大学计算机调剂,华东交通大学2018考研调剂信息
  4. 六年级下册百分数计算题_小学六年级数学期末考,题量较大,出题全面、灵活...
  5. 牛客网 【每日一题】7月24日题目精讲—小A的柱状图
  6. 日志查看技巧_10种Git技巧,让你省时省力又省心!
  7. 3D打印策略:检验CIO领导力的试金石
  8. Lesson 08 for Plotting in R for Biologists
  9. jenkins中eclipse+ant+svn自动打包APK
  10. java实验报告实验思路_20145307第一周JAVA实验报告
  11. 我的软件测试修炼之道
  12. 计算机windows用户名密码怎么查,如何查看Windows和Office的密码、序列号
  13. RabbitMQ-operation queue.declare caused a channel exception precondition_failed错误
  14. tar,bz2,bzip等格式解压缩命令汇总
  15. EGPU use in NUC about ubuntu20.04.5
  16. WhiteBalance
  17. [庆国庆]来生情缘-温情女儿国
  18. 整数n分解成素数乘积c语言,关于几种求素数的方法(C语言描述)
  19. 【转载】基于LLVM Pass实现控制流平坦化
  20. 1. Stateflow - 基本概念,界面介绍

热门文章

  1. 【STM32】PWM程序
  2. 【Linux系统编程】可重入和不可重入函数
  3. 【Linux】一步一步学Linux——ssh-add命令(182)
  4. 【Linux】一步一步学Linux——ss命令(170)
  5. 【lLinux驱动】linux内核源码目录结构
  6. 字符串常量前面的L的作用
  7. 51nod 1021 石子归并 (动态规划 简单代码)
  8. AOJ GRL_1_B: Shortest Path - Single Source Shortest Path (Negative Edges) (Bellman-Frod算法求负圈和单源最短路径)
  9. 计算机应用基础专科,2016电子科技大学计算机应用基础(专科)在线作业2
  10. c语言 执行free函数程序被卡住,FreeRTOS操作系统,在按键中断函数中恢复被挂起的任务,程序卡死的原因和解决办法...