首页教程软件教程正文

Vue页面限制跨浏览器只能打开一个标签页

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 875 浏览 1895 个字

摘要 :

文章目录前端代码实现后端代码实现实验结果总结遇到个需求就是针对某个路由页面，只能打开一个tab标签页，不管是跨浏览器还是不跨浏览器，都进行限制，也就是说针……

文
章
目
录

前端代码实现
后端代码实现
实验结果
总结

遇到个需求就是针对某个路由页面，只能打开一个tab标签页，不管是跨浏览器还是不跨浏览器，都进行限制，也就是说针对这一台设备的ip，只允许打开一个标签页，那么该怎么实现呢？

纯前端的方案肯定不行，没办法解决跨浏览器问题，只能寻求后端解决方案，这里的方案思路是：

该页面定时给后台发心跳，如果发现该页面已存在打开的情况，就保留最新打开的，关闭之前打开的，优点就是可以跨浏览器，缺点就是心跳频率较高，后端如果使用缓存多节点需要保证缓存一致性较麻烦，不用缓存就可能就要刷数据库。

这里设定为单节点，直接使用缓存，缓存用的是hutool缓存，每个页面定时任务发送心跳都要携带打开或刷新页面的时间戳作为pageId进行区分，

前端代码实现

// data下面
heartbeatInterval: null,
pageId: (new Date()).getTime(),

// methods下面
startHeartbeat() {
   this.heartbeatInterval = setInterval(() => {
    this.sendHeartbeat();
 }, 2000);
},
stopHeartbeat() {
   clearInterval(this.heartbeatInterval);
},
sendHeartbeat() {
      send({\"pageId\":this.pageId})
        .then(response => {
          console.log (response.data);
          // 如果当前pageId时间戳值小于后台最新打开时记录的时间戳，则关闭当前
          if(this.pageId < response.data) {
            console.log(\"close\")
            var currentView = this.$store.getters.visitedViews[0]
            for (currentView of this.$store.getters.visitedViews) {
              if (currentView.path === this.$route.path) {
                break
              }
            }
            // 关闭当前标签
            this.$store.dispatch(\"tagsView/delView\", currentView)
            this.$router.push(\"/dashboard\")
          }else {
            console.log(\"open\")
          }
        })
        .catch(error => {
          // Handle errors if needed
        });
    },

//挂载执行
mounted() {
    this.startHeartbeat();
},

api的send方法：

export function send(data) {
  return request({
    url: \'/sync/heartbeat\',
    params: data,
    method: \'get\'
  })
}

后端代码实现

private static final Cache<String, String> heartbeatCache = CacheUtil.newTimedCache(10 * 1000);
@GetMapping(\"/heartbeat\")
    public ResponseResult handleHeartbeat(HttpServletRequest request) {
        String ipAddress = request.getRemoteAddr();
        String pageId = request.getParameter(\"pageId\");

        String pageIdMax = heartbeatCache.get(ipAddress);
        if(pageIdMax == null) {
            heartbeatCache.put(ipAddress, pageId);
        }else if(Long.valueOf(pageId) > Long.valueOf(pageIdMax)){
            heartbeatCache.put(ipAddress, pageId);
        }
        return ResponseResult.success(heartbeatCache.get(ipAddress));
    }

主要就是根据ip进行缓存判断是否是最新打开的，如果是最新打开的直接替换pageId为最新打开的时间戳。