禁止同域名下的其他页面修改、清除本地存储

最新推荐文章于 2024-10-30 21:10:40 发布

前端烤贝猿

最新推荐文章于 2024-10-30 21:10:40 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签：其他 javascript 前端

本文链接：https://blog.csdn.net/weixin_57024354/article/details/121406207

当页面跳转到同源的其他页面时，有时会遇到其他页面清空本地存储，导致用户需要重新登录的问题。通过在main.js中添加特定代码，在跳转时锁定local，并仅在用户主动退出时解除锁定，可以避免这种情况。值得注意的是，Storage事件只在非当前页面的本地存储变化时触发，这可能导致在当前页面测试时遇到困扰。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目里测试同学提了一个缺陷，就是当前页面跳转到其他同源页面时，由于一些其他原因，被其他页面阻止访问，并触发了其他页面清空本地存储的操作，导致了我们的当前页面也被提回登录页面，需要重新登录的情况。。。。倒腾了一阵子，记录一下备忘

1、main.js页面添加以下代码

// 用来阻止不是自己负责的却是同域名的其他页面清空本地存储local的方法
window.changeLocalStatus = (flag) => { // 设置一个全局的阻止改变local的方法
  window.preventChangeLocal =  (e) => {
    let localValue = localStorage.getItem('xxl_sso_sessionid')
       // 如果sessionId被修改了 或者 local被清空了
      if(localValue !== window.localStorageValue || localStorage.length === 0) {

      localStorage.setItem('xxl_sso_sessionid',window.localStorageValue)
      console.log('重新设置了xxl_sso_sessionid');
    }
  }
  if (flag === 1) {
    window.addEventListener('storage', window.preventChangeLocal)
    console.log('本地存储被锁定了')
  } else {
    window.addEventListener('storage', window.preventChangeLocal)
    console.log('本地存储锁定解除了')
  }
}


// 此方法作废，以上面的为准======================================
window.changeLocalStatus = (flag) => {
function preventChangeLocal (e) {
    if(key !== null) {
      localStorage.setItem(e.key, e.oldValue)
    }
  }
  if (flag) {
    window.addEventListener('storage', preventChangeLocal)
    console.log('本地存储被锁定了')
  } else {
    window.removeEventListener('storage', preventChangeLocal)
    console.log('本地存储锁定解除了')
  }
}

2、当前页面在点击跳转其他页面的方法里锁住local

window.changeLocalStatus(1) // 锁定本地存储

3、只有在用户主动点击退出按钮时，才解除锁定（注意异步的问题）

    logout () {
      window.localStorageValue = '' // 清除备用的sessionId
      window.changeLocalStatus(0) // 解除本地存储的锁定
      setTimeout(() => {
      this.removeSessionId()
      this.$router.push({
        path: '/login'
      })
      },200)
    }

最后，实在要吐槽一下这个Storage事件，有一个大坑！！

就是监听Storage事件之后，它只有在非当前页面的本地存储改变时才被触发，当前页面无论怎么操作本地存储，都不会触发Storage！

这导致了我在当前页面去测试上面这个监听函数的时候，怎么都不触发，后来看了这个地址的大大写的我才知道还有这一说。。。。。

storage事件中的坑,storage.setItem()无法触发storage事件 - 天兵Q - 博客园

多掉了好几根头发。。。哭唧唧