Welcome to

Mr.Xiong

Home / LayUI / 记 LayUI-access_token 的超级巨坑

记 LayUI-access_token 的超级巨坑

如需 LayUI 单页正版可联系我!

一、神坑所在

在使用 LayUI 单页正版,我相信所有人都会遇到一个神坑,登陆成功后需要返回给 LayUI 一个access_token,具体的值 LayUI 也没有详细说,很愤怒!那么我选择的是 md5 加密时间戳的方式,各位有自己的方式可以分享给我~ 由于单页面版本的视图文件和静态资源模块都是动态加载的,所以可能存在浏览器的本地缓存问题,导致关闭再开启浏览器时 access_token 依然存在,那么就会直接略过登录界面进入首页,到这里逻辑都没毛病;接着,首页中所有数据都走的是接口,在登录成功同时我会存用户信息到 session 当中,同时后台框架公共控制器去判断是否登录,以避免黑客直接访问接口;到这里可能有些朋友处理方式和我不一样欢迎分享给我。在首页点击退出,会清除 session 及存在 LayUI 当中的 access_token,再次访问首页会跳转登录页面,到这里都没毛病。但是当没有点击退出,关闭再开启浏览器访问首页问题就来了!session 是会话时间,再次开启浏览器就不存在了,后台会强制到登录页面,但是!!!!!!前台的 access_token 依然存在啊!!!所以出现下图这种畸形报错:

神坑关键【Layui 允许进入首页,但后台接口因未登录没给数据】,导致以上这种情况出现。。。

二、我的解决方案

首先,在后台返回 access_token 时,我另外返回了一个当前时间,同时需要在 LayUI src/config.js 文件当中增加一个自定义请求字段。

,request: {
  tokenName: 'access_token' //自动携带 token 的字段名。可设置 false 不携带。
  ,loginTime:'login_time'//登录时间
  }

接着在 LayUI 的 login.html 登录页面当中,在登录成功的提示与跳转代码之前加上如下代码。

//请求成功后,写入 login_time
layui.data(setter.tableName, {
    key: setter.request.loginTime
    ,value: res.data.login_time
});

最后,LayUI 单页默认走到 src/index.js 文件。在 index.js 页面当中判断到期时间。

//超过两小时 清除access_token
var local = layui.data(setter.tableName);
var loginTime = local[setter.request.loginTime];
var timestamp = Date.parse(new Date());
var chaoshi = 1000*60*60*1;
if (timestamp > loginTime + chaoshi){
    //清空本地记录的 token
    layui.data(setter.tableName, {
        key: setter.request.tokenName
        ,remove: true
    });
}

代表登录一小时后自动清空 access_token ,避免浏览器缓存 access_token 。

此解决方案个人觉得一般,因还存在一小时内情况的 Bug ,目前也只想到此最佳解决方案;当然,使用 Localstorage 另当别论啦。

欢迎各位朋友推荐更好的解决方案,万分感谢!

Finally,谢谢大家的阅读!祝每天开心~
版权声明:本文为博主原创文章,未经博主允许不得转载。

赞赏

微信赞赏支付宝赞赏

5 条回应 “记 LayUI-access_token 的超级巨坑”
  1. 并非是主办方的内部地方 2019年4月24日 on 下午5:58 回复

    以下为个人评价,不喜勿喷,
    第一,access_token不推荐直接用md5加密时间戳, 一般是uid+username+timestamp字符串拼接md5加密或是sha1加密,

    第二, Localstorage确实可以做到,保存到本地,但一般不怎么用.

    第三,类ui+vue.js,用vue的全局变量global保存

    • Mr.Xiong 2019年4月26日 on 下午2:37 回复

      非常棒。那么你是如何处理浏览器关闭 session清除 access_token依然存在的问题呢?

  2. 蚊子 2019年5月23日 on 下午5:54 回复

    怎么分享LayUI 单页正版

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

雄心勃勃但谦卑温逊!

>> <<