Web Locks API boleh menghalang lima tab yang dibuka daripada membebankan pelayan pengesahan secara serentak dengan panggilan refresh-token, sekali gus menyelamatkan pengguna daripada log keluar secara tiba-tiba. Dengan menyelaraskan proses penyegaran merentasi tab, satu permintaan sahaja akan menggantikan lambakan permintaan yang biasanya mencetuskan penamatan sesi apabila Refresh Token Rotation digunakan.

Beban berlebihan tersembunyi dalam sesi pelbagai tab

Aplikasi satu halaman (single-page app) yang tipikal menambah interceptor Axios yang memantau respons 401, menukar bendera Boolean isRefreshing, dan menyusun sebarang permintaan keluar dalam barisan sehingga JWT baharu tiba. Apabila diuji dalam satu tab, aliran ini berfungsi dengan sempurna.

Buka aplikasi yang sama dalam lima tab, biarkan token akses tamat tempoh, dan kelima-lima tab akan mengesan 401 pada milisaat yang sama. Setiap tab beranggapan ia perlu melakukan penyegaran, jadi lima permintaan refresh-token yang serupa akan bersaing ke pelayan pengesahan. Dengan Refresh Token Rotation—satu langkah keselamatan yang membatalkan token penyegaran sebelumnya sebaik sahaja token baharu dikeluarkan—pelayan akan menganggap permintaan kedua sebagai serangan ulangan (replay attack), menandakan sesi tersebut telah diceroboh, dan membatalkannya. Pengguna akan log keluar daripada setiap tab dalam sekelip mata.

Punca utamanya adalah model pengasingan JavaScript. Pemboleh ubah seperti isRefreshing hanya wujud dalam tab yang menetapkannya; tab lain tidak mempunyai cara untuk mengetahui bahawa penyegaran sedang dalam proses. Hasilnya adalah masalah konkurensi (concurrency) klasik, tetapi "proses" tersebut adalah tab pelayar dan bukannya thread.

Mengapa kunci merentasi tab (cross-tab lock) adalah alat yang tepat

Apa yang kita perlukan adalah cara untuk tab berkomunikasi antara satu sama lain tentang sumber kongsi—dalam kes ini, JWT yang segar. Web Locks API, yang didedahkan sebagai navigator.locks, memberikan fungsi tersebut. Ia membolehkan skrip meminta kunci bernama yang dikuatkuasakan oleh pelayar merentasi semua konteks yang tergolong dalam asal (origin) yang sama. Jika kunci sudah dipegang, pemanggil lain akan disusun dalam barisan sehingga pemegang melepaskannya atau pelayar membatalkannya (contohnya, apabila tab terhenti/crash). Tiada pelayan luaran, tiada polling, hanya penyelarasan asli pelayar.

Melaksanakan aliran penyegaran berasaskan kunci

  1. Kesan 401 – Interceptor Axios menangkap respons tanpa kebenaran seperti sebelumnya.
  2. Minta kunci eksklusif – Tab memanggil navigator.locks.request('auth_token_refresh_lock', async lock => { … }). Hanya satu tab boleh memasuki callback pada satu-satu masa.
  3. Semak semula sebelum menghubungi rangkaian – Di dalam kunci, baca cap masa (atau token itu sendiri) daripada localStorage. Jika cap masa tersebut kurang daripada beberapa saat, tab lain telah pun menyegarkan token; tab semasa akan melangkau panggilan rangkaian dan hanya membaca JWT baharu daripada storan.
  4. Segarkan jika perlu – Jika cap masa yang disimpan sudah lama, hantar permintaan penyegaran, simpan token baharu dan masa semasa dalam localStorage, kemudian lepaskan kunci dengan keluar daripada callback.
  5. Sambung permintaan dalam barisan – Semua tab lain yang sedang menunggu akan memperoleh kunci satu demi satu, melihat cap masa yang segar, dan selesai tanpa membuat permintaan lain.
async function refreshIfNeeded() {
  await navigator.locks.request('auth_token_refresh_lock', async lock => {
    const lastRefresh = Number(localStorage.getItem('token_refreshed_at') || 0);
    const now = Date.now();
    if (now - lastRefresh < 5_000) return; // another tab already refreshed

    const newToken = await callRefreshEndpoint(); // actual network call
    localStorage.setItem('jwt', newToken);
    localStorage.setItem('token_refreshed_at', now.toString());
  });
}

Corak ini menjamin bahawa, tidak kira berapa banyak tab yang dibuka, hanya satu permintaan penyegaran sahaja yang sampai ke pelayan.

Manfaat yang boleh anda ukur

  • Kecekapan rangkaian – Satu permintaan menggantikan lima, mengurangkan jalur lebar dan beban pelayan secara drastik.
  • Keselamatan sesi – Dengan Refresh Token Rotation, pelayan hanya melihat penggunaan tunggal token penyegaran lama, jadi ia tidak akan menandakan sesi tersebut sebagai diceroboh.
  • Ketahanan – Jika tab yang memegang kunci terhenti (crash), pelayar akan melepaskan kunci secara automatik, menghalang kebuntuan (deadlock) yang boleh menyebabkan semua tab terhenti.
  • Kebolehskalaan – Pengguna boleh membuka berpuluh-puluh tab tanpa risiko log keluar berantai, kerana penyelarasan kekal di dalam pelayar.

Sisi lain: sokongan pelayar dan kaedah sandaran (fallbacks)

Web Locks API adalah ciri yang agak baharu. Pelayar berasaskan Chromium moden dan versi terkini Firefox melaksanakannya, tetapi pelayar lama dan Safari kekurangan sokongan asli. Dalam persekitaran di mana API tidak tersedia, pembangun mesti menggunakan teknik yang kurang dipercayai—seperti menyiarkan acara tersuai (custom event) melalui localStorage atau menggunakan shared worker—untuk meniru isyarat merentasi tab. Kaedah penyelesaian (workarounds) tersebut tidak mempunyai perlindungan kebuntuan automatik yang disediakan oleh navigator.locks, jadi ia harus digunakan dengan berhati-hati.

Apa yang perlu diperhatikan seterusnya

  • Kemajuan penstandardan – Pantau lengkung penggunaan API; sokongan yang lebih luas akan menjadikan pendekatan berasaskan kunci sebagai pilihan lalai untuk sebarang penyelarasan rentas-tab.
  • Pembungkus perpustakaan – Beberapa utiliti sumber terbuka sudah pun mengabstraksikan corak permintaan kunci, menjadikannya lebih mudah untuk disambungkan ke interceptor Axios sedia ada.
  • Audit keselamatan – Walaupun kunci tersebut menyelesaikan isu konkurensi, titik akhir (endpoint) pembaharuan masih perlu menguatkuasakan putaran token dan pengehadan kadar (rate limiting) yang betul, kerana satu tab berniat jahat masih boleh membanjiri pelayan dengan permintaan jika kunci tersebut dipintas.

Kesimpulannya mudah: anggap sekumpulan tab yang dibuka sebagai satu sistem teragih dan berikan mereka primitif penyinkronan asli. Dengan menyepadukan Web Locks API ke dalam aliran pembaharuan token, pembangun dapat menghapuskan "perangkap token tab pelayar" dan memastikan pengguna kekal log masuk, tidak kira berapa banyak tab yang mereka uruskan.