使用sessionStorage解决刷新后自动定点登陆的问题

来源:互联网 发布:美术教学网络系统 编辑:程序博客网 时间:2024/06/11 12:49

需求描述:
1. 后台系统中,如何客户按页面刷新键或者F5/Ctrl+R进行刷新,则需要自动进入之前三级导航的列表对应页面,而非列表进入的非后台返回权限路由页面;
2. 关闭当前页面再进入则需要用户进入登陆页面,点击登陆页面登陆。

解决方案:
1. onBeforeUnload方法中监听,判断是关闭还是刷新,别人给的代码如下(经测试无效):

window.onbeforeunload=function (){     alert("===onbeforeunload===");  if(event.clientX>document.body.clientWidth && event.clientY < 0 || event.altKey){          alert("你关闭了浏览器");     }else{          alert("你正在刷新页面");     } } 

但是还是新学习了点知识点:
页面加载时只执行onload
页面关闭时先执行onbeforeunload,最后onunload
页面刷新时先执行onbeforeunload,然后onunload,最后onload
2.使用sessionStorage,这或许可以称为换一种解决思路
在用户点击登陆按钮后保存一个sessionStorage值

sessionStorage.setItem('isRefresh', true);

当再次进入login页面时检查该值是否存在(系统默认页面为登录页),如果存在说明是刷新操作,否则是关闭页面操作,然后可进行对应操作,部分代码如下:

if(Storage.get('prevRouterMenu') && sessionStorage.getItem('isRefresh')) {//判断时候刷新时需要默认调用登陆接口跳转指定页面        const prevRouterMenu = JSON.parse(Storage.get('prevRouterMenu'));        if(Storage.get('isLogined')) {          const client = JSON.parse(Storage.get('userClient'));          this.adminLoginIn(client).then( () => {            this.$router.push({ name: prevRouterMenu.url, query: {pageName: prevRouterMenu.name, url: prevRouterMenu.url} });          }).catch( (error) => {            this.handleLoadingStatus();          });        }      }

关于sessionStorage,不熟悉的小伙伴请参考HTML 5 Web 存储

阅读全文
0 0
原创粉丝点击