From 5a38dfdc574adbbb30a3196d41e38134f4ec62fa Mon Sep 17 00:00:00 2001 From: Andrei Dekterev Date: Mon, 20 Mar 2023 19:27:07 +0700 Subject: [PATCH] fix(fix black screen): fix black screen --- public/silent-refresh.html | 15 ++++++++ src/features/AuthStore/helpers.tsx | 2 ++ src/features/AuthStore/hooks/useAuth.tsx | 36 +++++++++++++------- src/helpers/callApi/logoutIfUnauthorized.tsx | 7 ++-- 4 files changed, 43 insertions(+), 17 deletions(-) create mode 100644 public/silent-refresh.html diff --git a/public/silent-refresh.html b/public/silent-refresh.html new file mode 100644 index 00000000..852cc138 --- /dev/null +++ b/public/silent-refresh.html @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/src/features/AuthStore/helpers.tsx b/src/features/AuthStore/helpers.tsx index e938180b..50818c4f 100644 --- a/src/features/AuthStore/helpers.tsx +++ b/src/features/AuthStore/helpers.tsx @@ -61,6 +61,7 @@ const redirectUrl = () => { export const getClientSettings = (): Settings => ({ authority: AUTH_SERVICE, + automaticSilentRenew: true, client_id: client.auth.clientId, filterProtocolClaims: false, loadUserInfo: false, @@ -69,6 +70,7 @@ export const getClientSettings = (): Settings => ({ response_mode: 'query', response_type: 'id_token token', scope: 'openid', + silent_redirect_uri: `${window.location.origin ?? window.origin}/silent-refresh.html`, userStore: new WebStorageStateStore({ store: window.localStorage }), }) diff --git a/src/features/AuthStore/hooks/useAuth.tsx b/src/features/AuthStore/hooks/useAuth.tsx index d2a6c5ad..3014348f 100644 --- a/src/features/AuthStore/hooks/useAuth.tsx +++ b/src/features/AuthStore/hooks/useAuth.tsx @@ -42,6 +42,7 @@ import { } from 'requests' import { userManager } from '../config' +// eslint-disable-next-line import { needCheckNewDeviсe } from '../helpers' export const useAuth = () => { @@ -219,6 +220,7 @@ export const useAuth = () => { }) }, [logout]) + // eslint-disable-next-line const checkNewDevice = useCallback(async () => { const loadedUser = await userManager.getUser() if (!loadedUser) return @@ -228,25 +230,25 @@ export const useAuth = () => { }) }, [reChekNewDevice]) - useEffect(() => { - if (!needCheckNewDeviсe && !user) return undefined - const startCheckDevice = setInterval(checkNewDevice, 20000) - isNewDeviceLogin && clearInterval(startCheckDevice) - return () => clearInterval(startCheckDevice) - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ - checkNewDevice, - isNewDeviceLogin, - setIsNewDeviceLogin, - ]) + // useEffect(() => { + // if (!needCheckNewDeviсe && !user) return undefined + // const startCheckDevice = setInterval(checkNewDevice, 20000) + // isNewDeviceLogin && clearInterval(startCheckDevice) + // return () => clearInterval(startCheckDevice) + // + // // eslint-disable-next-line react-hooks/exhaustive-deps + // }, [ + // checkNewDevice, + // isNewDeviceLogin, + // setIsNewDeviceLogin, + // ]) useEffect(() => { // попытаемся обновить токен используя refresh_token const tryRenewToken = () => { const tokenLastUpdated = Number(localStorage.getItem('token_updated')) // предотвращаем одновременное обновление токена в разных окнах/вкладках - const needRenewToken = Date.now() - tokenLastUpdated >= userManager.settings.clockSkew! * 1e3 + const needRenewToken = Date.now() - tokenLastUpdated >= 2 * 1e3 if (!needRenewToken) return @@ -267,6 +269,14 @@ export const useAuth = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [logout]) + useEffect(() => { + // событие срабатывает после получения токена(первый + // логин и обновление токена) + userManager.events.addUserLoaded(storeUser) + return () => userManager.events.removeUserLoaded(storeUser) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [userManager, storeUser]) + const fetchUserInfo = useCallback(async () => { try { const userInfoFetched = await getUserInfo() diff --git a/src/helpers/callApi/logoutIfUnauthorized.tsx b/src/helpers/callApi/logoutIfUnauthorized.tsx index feffe52b..18e71881 100644 --- a/src/helpers/callApi/logoutIfUnauthorized.tsx +++ b/src/helpers/callApi/logoutIfUnauthorized.tsx @@ -1,9 +1,8 @@ export const logoutIfUnauthorized = async (response: Response) => { /* отключили из-за доступа без авторизации */ - // if (response.status === 401 || response.status === 403) { - // removeToken() - // window.dispatchEvent(new Event('FORBIDDEN_REQUEST')) - // } + if (response.status === 401 || response.status === 403) { + window.dispatchEvent(new Event('FORBIDDEN_REQUEST')) + } const error = new Error(response.statusText) // eslint-disable-next-line no-console