单点登陆针对 vue 单页面模式下的 hash 问题

因为 hash 模式下,#/ 后面的参数没法传递到后台。

hash、hashchange事件

一、hash即URL中"#"字符后面的部分。html

  ①使用浏览器访问网页时,若是网页URL中带有hash,页面就会定位到id(或name)与hash值同样的元素的位置;浏览器

  ②hash还有另外一个特色,它的改变不会致使页面从新加载;服务器

  ③hash值浏览器是不会随请求发送到服务器端的;spa

  ④经过window.location.hash属性获取和设置hash值。htm

  window.location.hash值的变化会直接反应到浏览器地址栏(#后面的部分会发生变化),同时,浏览器地址栏hash值的变化也会触发window.location.hash值的变化,从而触发onhashchange事件。对象

 

二、hashchange事件(IE8已支持该事件)blog

  ①当URL的片断标识符更改时,将触发hashchange事件(跟在#符号后面的URL部分,包括#符号)事件

  ②hashchange事件触发时,事件对象会有hash改变前的URL(oldURL)和hash改变后的URL(newURL)两个属性:get

window.addEventListener('hashchange',function(e) { console.log(e.oldURL);  console.log(e.newURL) },false);hash

 

解决方案

能够经过页面加载事件的 onload 事件

window.location.href 获取 访问地址

window.location.hash 获取 hash 

而后在onload 中发送请求(请求头携带 ticket 参数)到后台效验 是否已登陆 ,考虑到当前页面加载完后,hash 能够会发生变化,能够在 onload 中同时注册 hashchange 事件来监听 hash 的变化,若是发生变化也就是访问新的页面,一样须要发生请求到后台检验是否已登陆或者ticket 是否过时。

相关文章
相关标签/搜索