fix(fix black screen): fix black screen

3 years ago · 5a38dfdc57
parent 8859004e6c
commit 5a38dfdc57
4 changed files with 43 additions and 17 deletions
--- a/public/silent-refresh.html
+++ b/public/silent-refresh.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title></title>
+</head>
+<body>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.11.5/oidc-client.min.js" integrity="sha512-pGtU1n/6GJ8fu6bjYVGIOT9Dphaw5IWPwVlqkpvVgqBxFkvdNbytUh0H8AP15NYF777P4D3XEeA/uDWFCpSQ1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script>
+    new Oidc.UserManager().signinSilentCallback()
+        .catch((err) => {
+            console.error('OIDC: silent refresh callback error', err);
+        });
+  </script>
+</body>
+</html>
--- 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 }),
 })

--- 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()
--- 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