文章目录

  • 1. 需求
  • 2. 解决方案
    • 2.1. 服务端
    • 2.2. 前端
      • 2.2.1. 强制刷新页面
      • 2.2.2. 关闭之前的页面
  • 3. window API
    • 3.1. window.open
      • 3.1.1. window.location.reload

参考:

刷新页面的方法

使用beforeSend提升用户体验

1. 需求

在每个浏览器中,如果用户已经登录了系统,那么用户打开新的页面,默认是之前已经登录的用户,不再重新显示登录页面。

2. 解决方案

有两种方案,但是服务端需要做改动。

2.1. 服务端

对要跳转到登录页面的请求进行拦截,检测其中是否有已登录标识。如果有,且没有超时,则直接重定向到登录之后的页面;否则,跳转到登录页面

/*** 这里只是模拟一下,提供一个思路,具体实现还要自己动手*/
@RequestMapping(value = "/login")
public ModelAndView loginView(HttpServletRequest request) {ModelAndView mav = new ModelAndView();//这里假设登录信息保存在cookie//然后从cookie中取出String token="";if(token != null && !token.equals("")){//todo:判断超时if(不超时){mav.setViewName(登录后页面);}else{mav.setViewName(登录页面);}}else{mav.setViewName(登录页面);}return mav;
}

2.2. 前端

前端要考虑的情况要多一些。因为项目中所有的请求都是通过jquery的ajax请求,所以这里选择对jquery的ajax进行增强处理

这种写法有点类似于代理模式。

//扩展Jquery
(function($){// 扩展ajax方法,用来统一处理后端抛出的异常//备份jquery的ajax方法var _ajax=$.ajax;//重写jquery的ajax方法$.ajax=function(opt){//备份opt中error和success方法var fn = {error:function(XMLHttpRequest, textStatus, errorThrown){},success:function(data, textStatus){},complete:function(XMLHttpRequest, textStatus){},beforeSend : function(XMLHttpRequest){}};if(opt.error){fn.error=opt.error;}if(opt.success){fn.success=opt.success;}if(opt.beforeSend){fn.beforeSend=opt.beforeSend;}if(opt.complete){fn.complete=opt.complete;}// //扩展增强处理var _opt = $.extend(opt, {error: function (xhr,textStatus,errorThrown) {//TODO:ajax发生错误时的统一处理if(fn.error && typeof fn.error === 'function') {fn.error(xhr, textStatus, errorThrown);}},success: function (data, textStatus) {//TODO:ajax成功是的统一处理fn.success(data, textStatus);},beforeSend: function (XHR,obj) {fn.beforeSend(XHR,obj);},complete: function (XHR, TS) {//请求完成后回调函数 (请求成功或失败之后均调用)。fn.complete(XHR, TS);}});return _ajax(_opt);};
})(jQuery);

因为在登录账号A后,用户有可能重新打开一个新的页面,然后注销并登录一个新的账号B。这时用户在A页面的操作就可能引发数据不一致问题。

所以,要对这种情况进行处理。处理方法有两种:

2.2.1. 强制刷新页面

$(function () {(function ($) {var _ajax = $.ajax;// 扩展ajax方法,用来处理登录后的双页面问题$.ajax = function (opt) {var fn = {beforeSend: function () {}};if (opt.beforeSend) {fn.beforeSend = opt.beforeSend;}//如果登录状态不一致,刷新当前页面。// 解决两个页面同时点开,在第二个页面重新登录但是在第一个页面操作的问题return _ajax($.extend(opt, {beforeSend: function (XHR, obj) {if (cookie中的用户信息 !== 内存变量中的用户信息) {alert('提示信息');//参数为true表示忽略缓存强制刷新;为false表示会首先检查是否修改过,如果被修改则重新加载,否则不加载location.reload(true);//终止请求XHR.abort();}fn.beforeSend(XHR, obj);}}));};})(jQuery);
});

2.2.2. 关闭之前的页面

这种写法的灵感来自于CSDN。之前CSDN在使用Markdown对同一篇博客进行编辑时,如果打开了第二个编辑页,那么就会自动关闭第一个编辑页。

但是,并没有想到实现的方法。遗憾

个人觉得CSDN的实现原理如:
首先,我们看一下JavaScript新建标签页和关闭标签页的方法。这里以打开百度为例
第一、打开百度首页(简称A页面),在控制台执行如下代码

//window.open的返回值就是window.opener,也就是打开页面的对象
var opener = window.open('https://www.baidu.com/', "_blank");

这时,将打开一个新的百度标签页(简称B页面)

第二、在A页面的控制台查看window.opener其结果为null;在B页面查看,结果是一个window对象

第三、在A页面执行window.close(),报错:Scripts may close only the windows that were opened by it.;在B页面执行,成功关闭标签页

第四、在A页面执行opener.close(),B页面被关闭

综上,记录opener,检测到有新值添加就先关闭原先的页面,然后打开新的页面;或者将页面的打开者作为参数传递给其它页面,由其它页面关闭。

3. window API

window-MDN

3.1. window.open

参考:window.open-MDN

3.1.1. window.location.reload

用来刷新当前页面。该方法只有一个参数,当值为 true 时,将强制浏览器从服务器加载页面资源,当值为 false 或者未传参时,浏览器则可能从缓存中读取页面。

该方法在跨域调用(执行该方法的脚本文件的域和 Location 对象所在页面的跨不同)时,将会抛出 DOMException 异常。

语法:

object.reload(forcedReload);

forcedReload 可选

该参数要求为 布尔 类型,当取值为 true 时,将强制浏览器从服务器重新获取当前页面资源,而不是从浏览器的缓存中读取,如果取值为 false 或不传该参数时,浏览器则可能会从缓存中读取当前页面。

示例

// 无缓存刷新页面(但页面引用的资源还是可能使用缓存,
// 大多数浏览器可以通过设置在打开开发者工具时禁用缓存实现无缓存需求)
document.location.reload(true);

一个浏览器只运行登录一个用户相关推荐

  1. C++一个项目只允许有一个main函数怎么办

    C++中一个项目只允许有一个main()函数怎么办 大家在学习C++的时候一个项目只允许有一个main函数怎么办(本人IDE为Visual Studio) 这两天学习c++发现了一个问题,当你跟着教程 ...

  2. 【参透浏览器原理】1—— 为什么明明浏览器只打开了一个页面,却出现了多个进程

    前言 这个专题主要是结合对浏览器原理的学习而产出的一些笔记,作为一个职业前端,浏览器就像是我们的一个宝贝盒子一样,我们必须知道你们有些什么,以及为什么会有这些东西的存在,这样我们才能在日常的编码过程中 ...

  3. python文件运行哪一个_如何使一个python文件运行另一个?

    本问题已经有最佳答案,请猛点这里访问. 如何创建一个python文件来运行另一个? 例如,我有两个.py文件.我想运行一个文件,然后让它运行另一个.py文件. docs.python.org / / ...

  4. 两个scanf只运行了一个

    不知道为什么,在每次循环的时候,刚输入了a 10,就已经自动跳到第三个循环了.试了好多次才发现,第二个scanf没有执行,直接跳过了,百思不得其解. 后来才知道scanf函数当变量是%c类型的时候,下 ...

  5. 转:让程序只运行一个实例的四种方法

    先留着以后有用. 让程序只运行一个实例的四种方法 综述:让一个程序只运行一个实例的方法有多种,但是原理都类似,也就是在程序创建前,有窗口的程序在窗口创建前,检查系统中是否已经设置了某些特定标志了,如果 ...

  6. Flex:AIR十分钟就能做出一个浏览器

    AIR十分钟就能做出一个浏览器 发布: violam  时间: 2009-1-3 11:42:41  分类: Flash & ActionScript 是的, 标题没打错字,做出一个浏览器只需 ...

  7. vue同一浏览器只允许同时登录一个账号的解决办法-真实项目使用

    上篇文章介绍了:同一浏览器只允许同时登录一个账号的解决办法 这篇文章记录下项目中确定的最终方案. 场景: 同一浏览器,登陆账号A后,打开新的tab标签页,登陆账号B,用户A将会强制返回登陆页面: 这个 ...

  8. 限制在同一台电脑上只允许有一个用户登录系统

    在web应用系统中,出于安全性考虑,经常需要对同一客户端登录的用户数量和一个客户同时在多个客户端登陆进行限制. 具体一点就是: 1.在同一台电脑上一次只允许有一个用户登录系统: 2.一个用户在同一时间 ...

  9. java限制在同一台电脑上只允许有一个用户登录系统

    在web应用系统中,出于安全性考虑,经常需要对同一客户端登录的用户数量和一个客户同时在多个客户端登陆进行限制. 具体一点就是: 1.在同一台电脑上一次只允许有一个用户登录系统: 2.一个用户在同一时间 ...

最新文章

  1. mysql myisam innodb 区别
  2. JavaScript学习(八)
  3. OutOfMemoryError: GC Overhead Limit Exceeded错误处理
  4. 生物信息学概论_大学专业详解系列83——生物信息学(理学学士)
  5. Java基础知识强化之IO流笔记44:IO流练习之 复制图片的 4 种方式案例
  6. shell与python相互赋值
  7. 如何写一个Linux精灵进程
  8. 使用rsyslog+loganalzey收集日志显示客户端ip
  9. PLSQL自动输入select * from|附件在cnblogs文件|
  10. libiconv安装
  11. MATLAB 如何使用pascal函数创建Pascal(帕斯卡)矩阵
  12. qiankun加载react子应用报错[import-html-entry]: error occurs while executing normal script
  13. 进阶-第18__深度探秘搜索技术_基于slop参数实现近似匹配以及原理剖析和相关实验
  14. react-native-beacons-manager在Android上的使用 --工作笔记
  15. MacTeX的使用心得
  16. 【Codecs系列】GDR(Gradual Decoder Refresh)帧
  17. 详解adb shell 常用命令
  18. Ubuntu20.04 配置网卡信息
  19. 中国象棋残局库构建[抄]
  20. upc Buy an Integer#二分

热门文章

  1. 2021-03-24课堂笔记
  2. Android Camera HAL3 - Multi Camera(1)
  3. surface go写php,surface go和ipad比较
  4. java狼羊草过河_狼羊菜过河问题深入学习分析——Java语言描述版
  5. 可视化案例研究——以智利总统选举为例
  6. 猫吃老鼠问题的链表实现
  7. ubuntu 系统日志信息
  8. 【小知识点】MySql数据库增删改查常用语句命令
  9. 短视频技术课程培训干货分享
  10. 通过表单隐藏域向后台传值