Laravel 7多标签页切换关联公司的同步更新问题求助

针对多标签页下切换关联公司后仅当前页更新的问题，提供以下几种可行方案：

方案一：利用localStorage跨标签页通信（推荐，无需额外后端配置） #

浏览器的localStorage是同源标签页共享的，当一个标签页修改它时，其他标签页会触发storage事件，以此实现同步。

1. 切换公司时同步localStorage
   在切换公司的前端逻辑中，成功更新后端session后，将新公司ID存入localStorage：

// 切换公司成功后的处理函数
function onCompanySwitched(newCompanyId) {
    // 原有更新session的逻辑（比如AJAX请求后端接口）
    // ...
    // 同步到localStorage
    localStorage.setItem('current_company_id', newCompanyId);
    // 当前页面刷新或更新数据
    location.reload();
}

2. 全局监听storage事件
   在所有需要同步的页面（比如全局布局的JS文件中）添加监听，检测公司ID变化时自动更新：

window.addEventListener('storage', function(e) {
    // 只处理公司ID变化的事件
    if (e.key !== 'current_company_id') return;
    
    // 从页面meta标签获取当前页的公司ID
    const currentPageCompanyId = document.querySelector('meta[name="current-company-id"]').content;
    if (currentPageCompanyId !== e.newValue) {
        // 全页面刷新，或者局部AJAX更新数据
        location.reload();
    }
});

3. 在Laravel视图中注入当前公司ID
   在全局布局模板里添加meta标签，方便前端获取当前页的公司标识：

<meta name="current-company-id" content="{{ session('current_company_id') ?? '' }}">

方案二：Laravel广播系统（实时性更高，适合复杂场景） #

通过Laravel的广播功能，当用户切换公司时向后端触发事件，广播给该用户的所有连接标签页。

1. 创建广播事件
   生成CompanySwitched事件类，携带用户ID和新公司ID：

namespace App\Events;

use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\InteractsWithSockets;
use Illuminate\Queue\SerializesModels;

class CompanySwitched implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $userId;
    public $newCompanyId;

    public function __construct($userId, $newCompanyId)
    {
        $this->userId = $userId;
        $this->newCompanyId = $newCompanyId;
    }

    // 指定广播到用户私有频道
    public function broadcastOn()
    {
        return new PrivateChannel('user.' . $this->userId);
    }
}

2. 切换公司时触发广播
   在切换公司的控制器方法中，更新session后触发广播事件：

public function switchCompany(Request $request)
{
    $newCompanyId = $request->validate(['company_id' => 'required|integer'])['company_id'];
    // 更新session中的当前公司
    session(['current_company_id' => $newCompanyId]);
    
    // 广播事件给当前用户的其他连接
    broadcast(new \App\Events\CompanySwitched(auth()->id(), $newCompanyId))->toOthers();
    
    return redirect()->back();
}

3. 前端监听广播
   配置Laravel Echo（配合Pusher或Redis驱动），监听用户私有频道的事件：

Echo.private('user.' + {{ auth()->id() }})
    .listen('CompanySwitched', (event) => {
        const currentPageCompanyId = document.querySelector('meta[name="current-company-id"]').content;
        if (currentPageCompanyId !== event.newCompanyId) {
            location.reload();
        }
    });

方案三：定时轮询后端（简单兜底方案） #

通过定时AJAX请求后端接口，对比当前页的公司ID与session中的值，不一致则刷新页面。

1. 后端提供检查接口
   新增接口返回当前session的公司ID：

public function checkCurrentCompany()
{
    return response()->json([
        'company_id' => session('current_company_id') ?? ''
    ]);
}

2. 前端定时轮询
   在全局JS中添加定时检查逻辑：

// 每5秒检查一次
setInterval(() => {
    fetch('/check-current-company')
        .then(res => res.json())
        .then(data => {
            const currentPageCompanyId = document.querySelector('meta[name="current-company-id"]').content;
            if (currentPageCompanyId !== data.company_id) {
                location.reload();
            }
        })
        .catch(err => console.log(err));
}, 5000);

内容的提问来源于stack exchange，提问作者SedaxGaming