fix(in-316): rewrite token update listener

src/features/AuthStore/config.tsx

@@ -3,5 +3,3 @@ import { UserManager } from 'oidc-client'
 import { getClientSettings } from './helpers'
 
 export const userManager = new UserManager(getClientSettings())
-
-export const channel = new BroadcastChannel('access_token')

src/features/AuthStore/hooks/useAuth.tsx

@@ -21,6 +21,7 @@ import {
   setCookie,
   removeCookie,
   isMatchPage,
+  TOKEN_KEY,
 } from 'helpers'
 
 import {
@@ -40,7 +41,7 @@ import {
   getTokenVirtualUser,
 } from 'requests'
 
-import { userManager, channel } from '../config'
+import { userManager } from '../config'
 import { needCheckNewDeviсe } from '../helpers'
 
 export const useAuth = () => {
@@ -80,8 +81,6 @@ export const useAuth = () => {
       name: 'access_token',
       value: loadedUser.access_token,
     })
-    // обновляем токен в других окнах/вкладках
-    channel.postMessage({ token: loadedUser.access_token })
   }, [])
 
   const checkUser = useCallback(async () => {
@@ -177,23 +176,24 @@ export const useAuth = () => {
   ])
 
   useEventListener({
-    callback: useCallback(async (e: MessageEvent<{ token: string }>) => {
+    callback: useCallback(async (e: StorageEvent) => {
       const loadedUser = await userManager.getUser()
 
       if (
-        !e.data.token
+        e.storageArea !== localStorage
+          || e.key !== TOKEN_KEY
+          || !e.newValue
           || !loadedUser
-          || loadedUser.access_token === e.data.token
+          || loadedUser.access_token === e.newValue
       ) return
 
       userManager.storeUser({
         ...loadedUser,
-        access_token: e.data.token,
+        access_token: e.newValue,
         toStorageString: loadedUser.toStorageString,
       })
     }, []),
-    event: 'message',
-    target: channel,
+    event: 'storage',
   })
 
   useEffect(() => {

src/helpers/token/index.tsx

@@ -1,4 +1,4 @@
-const TOKEN_KEY = 'token'
+export const TOKEN_KEY = 'token'
 
 export const readToken = () => (
   localStorage.getItem(TOKEN_KEY)

src/hooks/useEventListener.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef } from 'react'
 
 type EventMap = HTMLElementEventMap & WindowEventMap
 
-type Target = RefObject<HTMLElement> | HTMLElement | Window | BroadcastChannel
+type Target = RefObject<HTMLElement> | HTMLElement | Window
 
 type Args<E extends keyof EventMap> = {
   callback: (e: EventMap[E]) => void,
@@ -28,7 +28,7 @@ export const useEventListener = <E extends keyof EventMap>({
   }, [callback])
 
   useEffect(() => {
-    const windowOrElement: HTMLElement | Window | BroadcastChannel | null = 'current' in target
+    const windowOrElement: HTMLElement | Window | null = 'current' in target
       ? target.current
       : target