系统通过浏览器后退到登录页面,然后禁止通过前进登录的实现

首先,此功能是美好丰满的,但是做的时候才发现是那么的骨感。或许是本人技术太菜,或许是网上大牛不愿分享,各种百度谷歌也没有找到解决实例。

那就先想想思路吧:

1、  监控浏览器后退按钮事件,触发时删除cookies,设置location.href到登录页面

2、  监控系统登录后首页的unload事件,触发时做相应处理

事实证明以上2种我都无法实现,第一种浏览器后退按钮事件我无法监控到,估计装控件可以,但是不实用也没必要。第二种方法在系统首页跳转的时候都会触发,无法确定什么情况下是后退触发的。

发下牢骚:淘宝、163邮箱、人人都没有这效果,为嘛我要做这么苦逼的功能……

牢骚归牢骚,工作还是要做的,好吧,一切归零。还是查资料吧,各种搜索,试用各种漫天转载禁用页面缓存的方法失败,期间还整过history.go(0)、history.forward(-1)这种,均没有搞定。哎……

无意中查到了location.hash,虽然当时按别人的方法没有实现,最后看了别人封装的hashChange方法的实例,让我重燃对他的希望。

hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。这是w3school上的定义,简单点就是链接地址#开始的字符穿,类似于页面上的锚点。

重新整理思路:login页面登录提交时设置location.hash的值,在login页面load时判断location.hash值是否有为空,为空则为首次载入的;不为空说明是从系统后退出来的,那么清楚系统cookies,重新加载login页面。

Ok,开始实施:

a.初版//ie测试通过,chrome、FF失败

View Code
 1 $(function () {
 2     if (window.location.hash != null && window.location.hash == "#login") {
 3         $.post("ashx/DeleteCookies.ashx", function (data) {
 4             if (data != -1) {
 5                 $("#txtUserName").val(data); //绑定用户名
 6                 window.location.hash = "";
 7             }
 8         });
 9     }
10     $("#btnsubmit").click(function () {
11         if (!checkValidate())
12             return false;
13         window.location.hash = "#login";
14     });
15 });

经调试chrome下ajax执行有问题,FF下直接读的缓存
b.修改//ie、chrome测试通过,FF失败

View Code
 1 $.ajax({
 2     url: "ashx/DeleteCookies.ashx",
 3     type: "post",
 4     async: false,//修改为同步
 5     success: function (data) {
 6         if (data != -1) {            
 7             location.href = "Login.aspx?user=" + data;
 8         }
 9     }
10 });

 经测试FF下仍然有问题,还是直接读缓存
c.终版//ie、chrome、FF均通过

View Code
 1 $(function () {
 2     if (window.location.hash != null && window.location.hash.length >0) {
 3         RefreshPage();        
 4     }
 5     //读取用户名绑定省略
 6     $("#btnsubmit").click(function () {
 7         if (!checkValidate())
 8             return false;     
 9         window.location.search = "?user=" + $("#txtUserName").val();//ff下读缓存问题
10         window.location.hash = "#" + $("#txtUserName").val();
11     });
12 });
13 
14 function RefreshPage() {
15     var name = window.location.hash.replace(/^#/, "");
16     window.location.hash = "";
17     var strurl = "Login.aspx?user=" + name;
18     $.ajax({
19         url: "ashx/DeleteCookies.ashx",
20         type: "post",
21         async: false,
22         success: function (data) {
23             if (data != -1) {                
24                 strurl = "Login.aspx?user=" + data;
25             }
26         }
27     });
28     location.href = strurl;
29 }

经测试FF下已通过,加的代码window.location.search = "?user=" + $("#txtUserName").val()的作用是修改页面地址,避免加载缓存
经过以上努力终于通过了测试人员测试,真是不容易。事实证明简单的copy&paste的确不能解决问题,感谢自己,感谢各大搜索,废话说多了。

完整js文件:https://files.cnblogs.com/tobebetter/BackLoginOut.js

原文地址:https://www.cnblogs.com/tobebetter/p/2826542.html