在页面初始化打开时, 会执行到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)
}
}
}
}