业务场景:主项目是用vue写的单页面应用,但是有多开页面的需求,现在需要在用户关闭了所有的浏览器标签页面后,自动退出登录。
思路:因为是不同的tab页面,我只能用localStorage来通信,新打开一个标签页(页面初次装载时),我就往数组中加一个页面,在(页面关闭或刷新等)页面卸载时移除它。这样就只需要在页面装载时(load事件)判断当前是不是刷新页面就可以了,只要是其他来源就直接登出。
import store from '@/store'
const cache_key = 'currently_open_page'
/**
* 主方法,外部只要调用此方法就可以了
*/
export function mount() {
window.addEventListener('beforeunload', function () {
const currentRoute = getCurrentPage()
delPage(currentRoute)
})
window.addEventListener('load', function () {
// 网页通过“重新加载”按钮或者location.reload()方法加载
if (window.performance.navigation.type != 1) {
// 如果页面不是刷新进来,不管是任何来源,都可以认为是新进入页面,此时应该就去登录页面
if (!getCurrentOpenPageList().length) {
store.dispatch('user/logout')
}
return
}
// 添加新的页面
const currentRoute = getCurrentPage()
addPage(currentRoute)
})
}
/**
* 获取当前的页面(tab页面),目前就用时间值吧
* @returns
*/
function getCurrentPage() {
if (!window._currentPage) {
window._currentPage = 'page_' + new Date().getTime()
}
return window._currentPage
}
/**
* 获取当前已打开的页面列表
* @returns
*/
function getCurrentOpenPageList() {
const t = window.localStorage.getItem(cache_key)
if (t) {
return JSON.parse(t)
} else {
window.localStorage.setItem(cache_key, JSON.stringify([]))
return []
}
}
/**
* 往缓存中新增页面
*/
function addPage(page) {
const list = getCurrentOpenPageList()
list.push(page)
window.localStorage.setItem(cache_key, JSON.stringify(list))
}
/**
* 往缓存中移除页面
*/
function delPage(page) {
const list = getCurrentOpenPageList()
const findIndex = list.indexOf(page)
if (findIndex != -1) {
list.splice(findIndex, 1)
}
window.localStorage.setItem(cache_key, JSON.stringify(list))
}
/**
* 清除所有的页面
*/
export function clearAllPage() {
window.localStorage.setItem(cache_key, JSON.stringify([]))
}