vue多tab页面全部关闭后自动退出登录

业务场景：主项目是用vue写的单页面应用，但是有多开页面的需求，现在需要在用户关闭了所有的浏览器标签页面后，自动退出登录。

思路：因为是不同的tab页面，我只能用localStorage来通信，新打开一个标签页（页面初次装载时），我就往数组中加一个页面，在（页面关闭或刷新等）页面卸载时移除它。这样就只需要在页面装载时（load事件）判断当前是不是刷新页面就可以了，只要是其他来源就直接登出。

2024-01-06 22:23 更新：修改了页面load事件，在页面数组中无页面时，直接去登录页面了，但是还是得把页面加入到页面数组中，那个return没有必要。这个return会导致进入一个新设备（或者清空了浏览器缓存,即清空了currently_open_page）时，未记录当前页，那么页面数组就是空的，导致打开新页面时也直接去登出了。

代码

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([]))
}