[前端]-Vue项目中, 记录用户关闭最后一个tab页面,利用本地localStorage

在页面初始化打开时, 会执行到window.onload属性, 所以监听这个方法

注意直接在 App.vue 根组件中区记录

在项目中打开新的页面时就会触发这个方法, 使这个 count 值 +1, 并且在页面销毁时, 触发onbeforeunload方法, 立即 count -1 , 计算标签页面数量

	// localStorage记录标签页
	window.onload = function () {
		// 为了防止出现其他意外的值,我们事先清空这个字段的值, 所以需要做一个判断
		if (isNaN(localStorage.getItem('tabCount')){
			localStorage.removeItem('tabCount')
		}
		var count = localStorage.getItem('tabCount') || 0
		localStorage.setItem('tabCount', parseInt(count) + 1)
	}

	// 删除标签页数量
	window.onbeforeunload = function () {
		var count = localStorage.getItem('tabCount') || 0
		count = parseInt(count) - 1
		if (count <= 0) {
			console.log('前端发出登出请求....')
			// 关闭最后一个标签页，发送登出请求
			localStorage.setItem('tabCount', 0) // 重置计数器

			// !如果需要发接口记录, 执行登出请求 (必须在onbeforeunload阶段执行)
			logout()
				.then((res) => {
					console.log('记录用户退出 res => ', res)
					this.$store.commit('SET_TOKEN', '')
					this.$store.commit('SET_ROLES', [])
					removeToken()
					resetRouter()
					this.$store.dispatch('tagsView/delAllViews', null, { root: true })
				})
				.catch((err) => {
					console.log('err', err)
				})

			// 后端记录登出接口
			// userLoginOut()
			// 	.then((res) => {
			// 		console.log('记录用户退出 res => ', res)
			// 	})
			// 	.catch((err) => {
			// 		console.log('err', err)
			// 	})
		} else {
			localStorage.setItem('tabCount', count)
		}
	}

最终我们把这个事件, 封装到方法中, 并在 App.vue 中使用

	created() {
		this.recordUserLogout()
	},


	methods:{
		// 页面销毁时处理记录用户退出
		recordUserLogout() {
			// localStorage记录标签页
			window.onload = function () {
				if (isNaN(localStorage.getItem('tabCount'))){
					localStorage.removeItem('tabCount')
				}
				var count = localStorage.getItem('tabCount') || 0
				localStorage.setItem('tabCount', parseInt(count) + 1)
			}
			// 删除标签页数量
			window.onbeforeunload = function () {
				var count = localStorage.getItem('tabCount') || 0
				count = parseInt(count) - 1
				if (count <= 0) {
					console.log('前端发出登出请求....')
					// 关闭最后一个标签页，发送登出请求
					localStorage.setItem('tabCount', 0) // 重置计数器

					logout()
						.then((res) => {
							this.$store.commit('SET_TOKEN', '')
							this.$store.commit('SET_ROLES', [])
							removeToken()
							resetRouter()
							this.$store.dispatch('tagsView/delAllViews', null, { root: true })
						})
						.catch((err) => {
							console.log('err', err)
						})

					// 后端记录登出接口
					// userLoginOut()
					// 	.then((res) => {
					// 		console.log('记录用户退出 res => ', res)
					// 	})
					// 	.catch((err) => {
					// 		console.log('err', err)
					// 	})
				} else {
					localStorage.setItem('tabCount', count)
				}
			}
		}
	}