文档章节

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

SubinY
 SubinY
发布于 2017/08/30 14:12
字数 468
阅读 643
收藏 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
码字总数 66118
作品 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
80
0
shiro No cache or cacheManager properties have been set. Authorization cache cannot be obtained. 导致无法验证

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

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

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

安浪
2017/10/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

sourcetree 离线免注册登录安装教程

Sourcetree是一个优秀的git可视化管理工具,深受开发者喜爱Sourcetree官网,但是在安装时需要谷歌账户登录,需要翻qiang才可以,此一点一直被人们所诟病。今天本教程就为大家提供离线免登陆安...

QQZZFT
14分钟前
1
0
使用 PostgreSQL 解决一个实际的统计分析问题

使用 PostgreSQL 解决一个实际的统计分析问题作者:老农民(刘启华)Email: 46715422@qq.com 之前有个朋友扔给我一个奇葩需求,他们公司之前做了一批问卷调查,全部都是统一格式的excel...

新疆老农民
17分钟前
1
0
TypeScript基础入门之高级类型的映射类型

转发 TypeScript基础入门之高级类型的映射类型 高级类型 映射类型 一个常见的任务是将一个已知的类型每个属性都变为可选的: interface PersonPartial {    name?: string;    age?...

durban
32分钟前
1
0
Dubbo源码分析(6):Dubbo内核实现之基于SPI思想Dubbo内核实现

SPI接口定义 定义了@SPI注解 package com.alibaba.dubbo.common.extension; import java.lang.annotation.Documented;import java.lang.annotation.ElementType;import java.lang.an......

郑加威
33分钟前
1
0
RxJS的另外四种实现方式(后记)—— 同时实现管道和链式编程

目录 RxJS的另外四种实现方式(序) RxJS的另外四种实现方式(一)——代码最小的库 RxJS的另外四种实现方式(二)——代码最小的库(续) RxJS的另外四种实现方式(三)——性能最高的库 Rx...

一个灰
36分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部