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

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

那就先想想思路吧：

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失败

$(function () {
    if (window.location.hash != null && window.location.hash == "#login") {
        $.post("ashx/DeleteCookies.ashx", function (data) {
            if (data != -1) {
                $("#txtUserName").val(data); //绑定用户名
                window.location.hash = "";
            }
        });
    }
    $("#btnsubmit").click(function () {
        if (!checkValidate())
            return false;
        window.location.hash = "#login";
    });
});

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

$.ajax({
    url: "ashx/DeleteCookies.ashx",
    type: "post",
    async: false,//修改为同步
    success: function (data) {
        if (data != -1) {            
            location.href = "Login.aspx?user=" + data;
        }
    }
});

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

$(function () {
    if (window.location.hash != null && window.location.hash.length >0) {
        RefreshPage();        
    }
    //读取用户名绑定省略
    $("#btnsubmit").click(function () {
        if (!checkValidate())
            return false;     
        window.location.search = "?user=" + $("#txtUserName").val();//ff下读缓存问题
        window.location.hash = "#" + $("#txtUserName").val();
    });
});

function RefreshPage() {
    var name = window.location.hash.replace(/^#/, "");
    window.location.hash = "";
    var strurl = "Login.aspx?user=" + name;
    $.ajax({
        url: "ashx/DeleteCookies.ashx",
        type: "post",
        async: false,
        success: function (data) {
            if (data != -1) {                
                strurl = "Login.aspx?user=" + data;
            }
        }
    });
    location.href = strurl;
}

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

 

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