frontend
/
spa_instat_tv
1
0
Fork 0
Code Pull Requests 1 Releases Wiki Activity
Labels Milestones
New Pull Request

fix(fix black screen): fix black screen #129

Merged
andrey.dekterev merged 1 commits from fix-black-screen into develop 3 years ago
Conversation 0 Commits 1 Files Changed 4
4 changed files with 43 additions and 17 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 15
      public/silent-refresh.html
  2. 2
      src/features/AuthStore/helpers.tsx
  3. 36
      src/features/AuthStore/hooks/useAuth.tsx
  4. 7
      src/helpers/callApi/logoutIfUnauthorized.tsx

15
public/silent-refresh.html
Unescape View File

@ -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>

2
src/features/AuthStore/helpers.tsx
Unescape View File

@ -61,6 +61,7 @@ const redirectUrl = () => {
export const getClientSettings = (): Settings => ({ export const getClientSettings = (): Settings => ({
authority: AUTH_SERVICE, authority: AUTH_SERVICE,
automaticSilentRenew: true,
client_id: client.auth.clientId, client_id: client.auth.clientId,
filterProtocolClaims: false, filterProtocolClaims: false,
loadUserInfo: false, loadUserInfo: false,
@ -69,6 +70,7 @@ export const getClientSettings = (): Settings => ({
response_mode: 'query', response_mode: 'query',
response_type: 'id_token token', response_type: 'id_token token',
scope: 'openid', scope: 'openid',
silent_redirect_uri: `${window.location.origin ?? window.origin}/silent-refresh.html`,
userStore: new WebStorageStateStore({ store: window.localStorage }), userStore: new WebStorageStateStore({ store: window.localStorage }),
}) })

36
src/features/AuthStore/hooks/useAuth.tsx
Unescape View File

@ -42,6 +42,7 @@ import {
} from 'requests' } from 'requests'
import { userManager } from '../config' import { userManager } from '../config'
// eslint-disable-next-line
import { needCheckNewDeviсe } from '../helpers' import { needCheckNewDeviсe } from '../helpers'
export const useAuth = () => { export const useAuth = () => {
@ -219,6 +220,7 @@ export const useAuth = () => {
}) })
}, [logout]) }, [logout])
// eslint-disable-next-line
const checkNewDevice = useCallback(async () => { const checkNewDevice = useCallback(async () => {
const loadedUser = await userManager.getUser() const loadedUser = await userManager.getUser()
if (!loadedUser) return if (!loadedUser) return
@ -228,25 +230,25 @@ export const useAuth = () => {
}) })
}, [reChekNewDevice]) }, [reChekNewDevice])
useEffect(() => { // useEffect(() => {
if (!needCheckNewDeviсe && !user) return undefined // if (!needCheckNewDeviсe && !user) return undefined
const startCheckDevice = setInterval(checkNewDevice, 20000) // const startCheckDevice = setInterval(checkNewDevice, 20000)
isNewDeviceLogin && clearInterval(startCheckDevice) // isNewDeviceLogin && clearInterval(startCheckDevice)
return () => clearInterval(startCheckDevice) // return () => clearInterval(startCheckDevice)
//
// eslint-disable-next-line react-hooks/exhaustive-deps // // eslint-disable-next-line react-hooks/exhaustive-deps
}, [ // }, [
checkNewDevice, // checkNewDevice,
isNewDeviceLogin, // isNewDeviceLogin,
setIsNewDeviceLogin, // setIsNewDeviceLogin,
]) // ])
useEffect(() => { useEffect(() => {
// попытаемся обновить токен используя refresh_token // попытаемся обновить токен используя refresh_token
const tryRenewToken = () => { const tryRenewToken = () => {
const tokenLastUpdated = Number(localStorage.getItem('token_updated')) 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 if (!needRenewToken) return
@ -267,6 +269,14 @@ export const useAuth = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [logout]) }, [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 () => { const fetchUserInfo = useCallback(async () => {
try { try {
const userInfoFetched = await getUserInfo() const userInfoFetched = await getUserInfo()

7
src/helpers/callApi/logoutIfUnauthorized.tsx
Unescape View File

@ -1,9 +1,8 @@
export const logoutIfUnauthorized = async (response: Response) => { export const logoutIfUnauthorized = async (response: Response) => {
/* отключили из-за доступа без авторизации */ /* отключили из-за доступа без авторизации */
// if (response.status === 401 || response.status === 403) { if (response.status === 401 || response.status === 403) {
// removeToken() window.dispatchEvent(new Event('FORBIDDEN_REQUEST'))
// window.dispatchEvent(new Event('FORBIDDEN_REQUEST')) }
// }
const error = new Error(response.statusText) const error = new Error(response.statusText)
// eslint-disable-next-line no-console // eslint-disable-next-line no-console

Write Preview
Loading…
Cancel
Save