江苏中淮建设集团有限公司网站,中移建设 网站,婚庆策划公司装修,海拉尔北京网站建设业务场景#xff1a;主项目是用vue写的单页面应用#xff0c;但是有多开页面的需求#xff0c;现在需要在用户关闭了所有的浏览器标签页面后#xff0c;自动退出登录。
思路#xff1a;因为是不同的tab页面#xff0c;我只能用localStorage来通信#xff0c;新打开一个…业务场景主项目是用vue写的单页面应用但是有多开页面的需求现在需要在用户关闭了所有的浏览器标签页面后自动退出登录。
思路因为是不同的tab页面我只能用localStorage来通信新打开一个标签页页面初次装载时我就往数组中加一个页面在页面关闭或刷新等页面卸载时移除它。这样就只需要在页面装载时load事件判断当前是不是刷新页面就可以了只要是其他来源就直接登出。
2024-01-06 22:23 更新修改了页面load事件在页面数组中无页面时直接去登录页面了但是还是得把页面加入到页面数组中那个return没有必要。这个return会导致进入一个新设备或者清空了浏览器缓存,即清空了currently_open_page时未记录当前页那么页面数组就是空的导致打开新页面时也直接去登出了。
代码
import store from /storeconst 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([]))
}
