文档章节

angular4后台系统控制浏览器回退登录页面操作

SubinY
 SubinY
发布于 2017/08/30 14:12
字数 468
阅读 737
收藏 0

 其实我就想记录这一段代码,方便日后做单页面应用阻止用户通过浏览器回退登录页面。其中popstate是用户操作前进后退的事件源,外面的是初始化整个程序只调用一次,用于记录modules页面

ngAfterViewInit() {
    if (window.history && window.history.pushState) {
        $(window).on('popstate',  ()=>{
            window['history'].pushState('forward', '', 'modules');
            window['history'].forward();
        });
    }
    window['history'].pushState('forward', '', 'modules'); //在初始化阶段必须得有这两行控制
    window['history'].forward();
}

为何我例子中直接用history.state为‘forward’,因为只是简单记录一个值,而且该值没什么意义就是一个参数而已

不要浪费空白,也来解释一下H5的新东西 history state/pushState/replaceState

history.state

解释:

当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的,那么history.state是null。

history.pushState

解释:

将当前URL和history.state加入到history中,并用新的state和URL替换当前。不会造成页面刷新。

用法:

history.pushState(state, title, url);  

参数解释:

state:与要跳转到的URL对应的状态信息(eg: forward, back)。

title:不知道干啥用,传空字符串就行了。

url:要跳转到的URL地址,必须同源不能跨域。

history.replaceState

解释:

用新的state和URL替换当前。不会造成页面刷新。

用法:

history.replaceState(state, title, url);  

参数解释:同上

 

window onPopstate事件

调用history.back()、history.forward()、history.go()等方法,会触发popstate事件,单纯调用pushState()或replaceState()不触发popstate事件。

兼容性问题

pushState直到IE10才被支持,在早版本的IE中只能通过修改window.location=”#foo”完成,但这样会触发hashchange事件。

 

参考:

利用pushState开发无刷页面切换

ajax与HTML5 history pushState/replaceState实例

pjax是ajax+pushState的封装,同时支持本地存储、动画等多种功能

 

© 著作权归作者所有

共有 人打赏支持
SubinY
粉丝 8
博文 87
码字总数 66143
作品 0
佛山
程序员
私信 提问
购物车的设计

本文中的商品没有活动,价格可以通过后台管理系统控制调节. 初始化本地购物车 用户登录从后台请求出购物车数据,并存储到本地浏览器,可以用h5的sessionStorage;存储结构可以为key: 用户id+cart...

流光韶逝
2016/12/16
23
0
使用angular4和asp.net core 2 web api做个练习项目(三)

第一部分: http://www.cnblogs.com/cgzl/p/7755801.html 第二部分: http://www.cnblogs.com/cgzl/p/7763397.html 后台代码: https://github.com/solenovex/asp.net-core-2.0-web-api-boilerp......

solenovex
2017/11/02
0
0
react 关于input 输入框无法输入的问题

react框架搭建的页面,登录页面跳转到主页面之后,通过history(浏览器的后退按钮)回退到登录页面时,该登录页面的输入框输入不了字母信息, 登录页面的代码如下: 路由的跳转采用的是hashR...

陈明cxm
2017/08/24
117
0
shiro No cache or cacheManager properties have been set. Authorization cache cannot be obtained. 导致无法验证

各位大神,请教个问题,使用shiro做权限管理,登录成功后进入系统主页,这是点击浏览器的回退键,再次进入登录页面,点击登录,之后无法登录,但是,如果关闭浏览器,重新打开再登录就没问题...

刘朕
2016/06/24
2.8K
0
angular5 angular4 angular2 登录 路由守卫 登录验证 登录实例 实例 session验证 非token方式

找了半天,网上都没有这样的资料和文章。 angular4 angular2怎么做登录验证,angular身份认证。 用法,懂得router的用法,路由守卫的用法,然后在 路由守卫按照下面的逻辑编写,就跟以往ses...

安浪
2017/10/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PHP生成CSV之内部换行

当我们使用PHP将采集到的文件内容保存到csv文件时,往往需要将采集内容进行二次过滤处理才能得到需要的内容。比如网页中的换行符,空格符等等。 对于空格等处理起来都比较简单,这里我们单独...

豆花饭烧土豆
17分钟前
0
0
使用 mjml 生成 thymeleaf 邮件框架模板

发邮件算是系统开发的一个基本需求了,不过搞邮件模板实在是件恶心事,估计搞过的同仁都有体会。 得支持多种客户端 支持响应式 疼彻心扉的 outlook 多数客户端只支持 inline 形式的 css 布局...

郁也风
20分钟前
2
0
让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
今天
3
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
今天
17
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部