frontend
/
spa_instat_tv
1
0
Fork 0
Code Pull Requests 1 Releases Wiki Activity

fix(in-316): fix logout
continuous-integration/drone/push Build is passing
Details

Browse Source
pull/109/head
Ruslan Khayrullin 3 years ago
parent 8d069a4242
commit 7b3b0fe2c0
7 changed files with 74 additions and 62 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. 7
      src/features/AuthStore/config.tsx
  3. 2
      src/features/AuthStore/helpers.tsx
  4. 103
      src/features/AuthStore/hooks/useAuth.tsx
  5. 3
      src/helpers/index.tsx
  6. 4
      src/hooks/useEventListener.tsx
  7. 2
      src/requests/index.tsx

15
public/silent-refresh.html
Unescape View File

@ -1,15 +0,0 @@
<!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>

7
src/features/AuthStore/config.tsx
Unescape View File

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

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

@ -61,7 +61,6 @@ 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,
@ -70,7 +69,6 @@ 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 }),
}) })

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

@ -7,7 +7,6 @@ import {
import { useHistory } from 'react-router' import { useHistory } from 'react-router'
import type { User } from 'oidc-client' import type { User } from 'oidc-client'
import { UserManager } from 'oidc-client'
import isString from 'lodash/isString' import isString from 'lodash/isString'
import isBoolean from 'lodash/isBoolean' import isBoolean from 'lodash/isBoolean'
@ -16,34 +15,33 @@ import { PAGES } from 'config'
import { import {
addLanguageUrlParam, addLanguageUrlParam,
} from 'helpers/languageUrlParam'
import {
writeToken, writeToken,
removeToken, removeToken,
readToken, readToken,
} from 'helpers/token'
import {
setCookie, setCookie,
removeCookie, removeCookie,
} from 'helpers/cookie' isMatchPage,
import { isMatchPage } from 'helpers/isMatchPage' } from 'helpers'
import { import {
useLocalStore, useLocalStore,
useSessionStore, useSessionStore,
useToggle, useToggle,
useEventListener,
} from 'hooks' } from 'hooks'
import { useLexicsStore } from 'features/LexicsStore' import { useLexicsStore } from 'features/LexicsStore'
import { queryParamStorage } from 'features/QueryParamsStorage' import { queryParamStorage } from 'features/QueryParamsStorage'
import { getUserInfo, UserInfo } from 'requests/getUserInfo' import type { UserInfo, FailedResponse } from 'requests'
import { checkDevice, FailedResponse } from 'requests/checkDevice' import {
import { getTokenVirtualUser } from 'requests/getTokenVirtualUser' getUserInfo,
checkDevice,
getTokenVirtualUser,
} from 'requests'
// eslint-disable-next-line import { userManager, channel } from '../config'
import { getClientSettings, needCheckNewDeviсe } from '../helpers' import { needCheckNewDeviсe } from '../helpers'
export const useAuth = () => { export const useAuth = () => {
const { changeLang, lang } = useLexicsStore() const { changeLang, lang } = useLexicsStore()
@ -55,11 +53,10 @@ export const useAuth = () => {
const [user, setUser] = useState<User>() const [user, setUser] = useState<User>()
const [isNewDeviceLogin, setIsNewDeviceLogin] = useState(false) const [isNewDeviceLogin, setIsNewDeviceLogin] = useState(false)
const [userInfo, setUserInfo] = useState<UserInfo>() const [userInfo, setUserInfo] = useState<UserInfo>()
const userManager = useMemo(() => new UserManager(getClientSettings()), [])
const login = useCallback(async () => { const login = useCallback(async () => {
userManager.signinRedirect({ extraQueryParams: { lang } }) userManager.signinRedirect({ extraQueryParams: { lang } })
}, [userManager, lang]) }, [lang])
const logout = useCallback((key?: string) => { const logout = useCallback((key?: string) => {
setPage(history.location.pathname) setPage(history.location.pathname)
@ -73,7 +70,7 @@ export const useAuth = () => {
removeCookie('access_token') removeCookie('access_token')
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [userManager, lang]) }, [lang])
const storeUser = useCallback((loadedUser: User) => { const storeUser = useCallback((loadedUser: User) => {
setUser(loadedUser) setUser(loadedUser)
@ -83,6 +80,8 @@ export const useAuth = () => {
name: 'access_token', name: 'access_token',
value: loadedUser.access_token, value: loadedUser.access_token,
}) })
// обновляем токен в других окнах/вкладках
channel.postMessage({ token: loadedUser.access_token })
}, []) }, [])
const checkUser = useCallback(async () => { const checkUser = useCallback(async () => {
@ -102,7 +101,6 @@ export const useAuth = () => {
return loadedUser return loadedUser
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [ }, [
userManager,
storeUser, storeUser,
markUserLoaded, markUserLoaded,
]) ])
@ -173,12 +171,31 @@ export const useAuth = () => {
}).catch(login) }).catch(login)
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [ }, [
userManager,
login, login,
storeUser, storeUser,
markUserLoaded, markUserLoaded,
]) ])
useEventListener({
callback: useCallback(async (e: MessageEvent<{ token: string }>) => {
const loadedUser = await userManager.getUser()
if (
!e.data.token
|| !loadedUser
|| loadedUser.access_token === e.data.token
) return
userManager.storeUser({
...loadedUser,
access_token: e.data.token,
toStorageString: loadedUser.toStorageString,
})
}, []),
event: 'message',
target: channel,
})
useEffect(() => { useEffect(() => {
const isRedirectedBackFromAuthProvider = history.location.pathname === '/redirect' const isRedirectedBackFromAuthProvider = history.location.pathname === '/redirect'
isRedirectedBackFromAuthProvider ? signinRedirectCallback() : checkUser() isRedirectedBackFromAuthProvider ? signinRedirectCallback() : checkUser()
@ -200,34 +217,41 @@ export const useAuth = () => {
setTimeout(logout, 10000) setTimeout(logout, 10000)
} }
}) })
}, [logout, userManager]) }, [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
checkDevice(loadedUser.access_token).catch(() => { checkDevice(loadedUser.access_token).catch(() => {
setTimeout(reChekNewDevice, 2000) setTimeout(reChekNewDevice, 5000)
}) })
}, [reChekNewDevice, userManager]) }, [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 needRenewToken = Date.now() - tokenLastUpdated >= userManager.settings.clockSkew! * 1e3
if (!needRenewToken) return
localStorage.setItem('token_updated', String(Date.now()))
userManager.signinSilent() userManager.signinSilent()
.catch(() => user && logout()) .catch(() => user && logout())
} }
@ -241,14 +265,7 @@ export const useAuth = () => {
userManager.events.removeAccessTokenExpired(tryRenewToken) userManager.events.removeAccessTokenExpired(tryRenewToken)
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [userManager, logout]) }, [logout])
useEffect(() => {
// событие срабатывает после получения токена(первый
// логин и обновление токена)
userManager.events.addUserLoaded(storeUser)
return () => userManager.events.removeUserLoaded(storeUser)
}, [userManager, storeUser])
const fetchUserInfo = useCallback(async () => { const fetchUserInfo = useCallback(async () => {
try { try {

3
src/helpers/index.tsx
Unescape View File

@ -11,3 +11,6 @@ export * from './selectedApi'
export * from './openSubscribePopup' export * from './openSubscribePopup'
export * from './getCurrentYear' export * from './getCurrentYear'
export * from './getTeamAbbr' export * from './getTeamAbbr'
export * from './cookie'
export * from './isMatchPage'
export * from './languageUrlParam'

4
src/hooks/useEventListener.tsx
Unescape View File

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

2
src/requests/index.tsx
Unescape View File

@ -34,3 +34,5 @@ export * from './getTeamsStats'
export * from './getPlayersStats' export * from './getPlayersStats'
export * from './getMatchParticipants' export * from './getMatchParticipants'
export * from './getStatsEvents' export * from './getStatsEvents'
export * from './getTokenVirtualUser'
export * from './checkDevice'

Write Preview
Loading…
Cancel
Save