数据埋点之记录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(()=>{
    		this.$store.dispatch('eventTracking', {
    			operationAct: '登出',
    			operationPosition: this.$route.meta.pageName,
    			operationContent: ''
    		})
    		this.$utils.Tools.removeStorage('timer', timer); // 计算token超时的定时器
    		this.$utils.Tools.removeStorage('expiration', expiration); // token过期时长
    		this.$utils.Tools.removeStorage('loginTime', Date.now()); // 登录获取token的系统时间
    	}, (expiration - 2) * 1000)
    	this.$utils.Tools.localStorage('timer', timer); // 计算token超时的定时器
    	this.$utils.Tools.localStorage('expiration', expiration); // token过期时长
    	this.$utils.Tools.localStorage('loginTime', Date.now()); // 登录获取token的系统时间
    }

  • 描述：用户登陆后手动点击登出时执行的操作，包括直接调用数据埋点接口、读取存储的定时器实例并清除。

    // 在token超时前调用记录token过期动作的接口有关的代码
    tokenTimeoutOperations(){
    	this.$store.dispatch('eventTracking', {
    		operationAct: '登出',
    		operationPosition: this.$route.meta.pageName,
    		operationContent: ''
    	})
    	const timer = this.$utils.Tools.localStorage('timer'); 
    	clearTimeout(timer)
    	this.$utils.Tools.removeStorage('timer'); // 计算token超时的定时器
    	this.$utils.Tools.removeStorage('expiration'); // token过期时长
    	this.$utils.Tools.removeStorage('loginTime'); // 登录获取token的系统时间
    }

  • 描述：用户登陆后按F5刷新页面或直接关闭网页再打开时执行的操作，包括读取本地存储的token过期时长、读取获取token时的系统时间、结合系统当前时间重建定时器、存储重建的定时器实例。

    // 写在main.js里的代码，window.projectApp是Vue根实例。
    // 在token超时前调用记录token过期动作的接口有关的代码
    ;(function tokenTimeoutOperations(){
    	const expiration = window.projectApp.$utils.Tools.localStorage('expiration')
    	const loginTime = window.projectApp.$utils.Tools.localStorage('loginTime')
    	if(expiration && loginTime){
    		const timer = setTimeout(()=>{
    			window.projectApp.$store.dispatch('eventTracking', {
    				operationAct: '登出',
    				operationPosition: window.projectApp.$route.meta.pageName,
    				operationContent: ''
    			})
    		}, (expiration - (Date.now() - loginTime)/1000 - 2) * 1000)
    		window.projectApp.$utils.Tools.localStorage('timer', timer)
    	}
    })()