数据埋点之记录token过期登出行为的前端解决方案

  • 友情提示:本文只分享思路和示例代码,无法通过cv解决你的问题。
  • 问题描述:通过调用接口的方式实现数据埋点(事件跟踪),但需要记录因token过期导致的登出行为时会遇到问题:token已经过期了,无法用这个过期的token去调用数据埋点接口来记录用户行为。
  • 思路:
    • 让后端同学在返回token的接口添加字段:token过期时长。
    • 在刚获取token时,使用定时器实现在token过期的前一秒调用数据埋点接口。
    • 存储三样数据:定时器实例、token过期时长(必须本地存储)、获取token时的系统时间(必须本地存储)。
    • 特殊情景和处理方案:
      • 用户登录后手动点击登出:直接调用数据埋点接口,读取存储的定时器实例并清除。
      • 用户登陆后按F5刷新页面、用户登录后直接关闭网页再打开(都会导致定时器实例被清除):读取本地存储的token过期时长、获取token时的系统时间,结合系统当前时间重建定时器,并存储重建的定时器实例。(可写在main.js里)
  • 示例代码:
    • 描述:获取token时执行的操作,包括创建定时器、本地存储三样数据。
      // 在token超时前调用记录token过期动作的接口有关的代码
      tokenTimeoutOperations(res){ // res是登录接口返回的数据
      	const expiration = res.data.expiration // token过期时长
      	const timer = setTimeout(()=>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值