diff --git a/.env.sample b/.env.sample index 5b853d5..b75b811 100644 --- a/.env.sample +++ b/.env.sample @@ -10,3 +10,4 @@ DOCKER_BUILDKIT=1 #Build only stages required for target COMPOSE_FILE=docker-compose.yml:docker-compose.dev.yml VITE_AUTH_URL='https://ya-praktikum.tech/api/v2' VITE_SRC_URL='https://ya-praktikum.tech/api/v2/resources' +VITE_AUTH_PATHNAMES='/sign-in, /sign-up' diff --git a/packages/client/src/components/hoc/withAuthUser.tsx b/packages/client/src/components/hoc/withAuthUser.tsx index a92027e..596fc50 100644 --- a/packages/client/src/components/hoc/withAuthUser.tsx +++ b/packages/client/src/components/hoc/withAuthUser.tsx @@ -1,9 +1,10 @@ import { ComponentType, useEffect } from 'react' -import { actions, getUser, UserType } from '@/store/reducers/auth-reducer' +import { UserType } from '@/store/reducers/auth-reducer' import { toast } from 'react-toastify' import { useNavigate, useLocation } from 'react-router-dom' import { RootState, useAppDispatch } from '@/store' import { useSelector } from 'react-redux' +import { userService } from '@/services/userService' type WithAuthUserProps = { userIsLogged: boolean @@ -18,42 +19,36 @@ export default function withAuthUser

( const user = useSelector( state => state.authReducer.user ) - const userIsLogged = window.sessionStorage.getItem('userIsLogged') === '1' + const userIsLogged = userService.isLoggedIn() const navigate = useNavigate() const dispatch = useAppDispatch() - const location = useLocation() - const { pathname } = location + const { pathname } = useLocation() + const isAuthPath = import.meta.env.VITE_AUTH_PATHNAMES.split(', ').includes( + pathname + ) + + const handleAuthentication = async () => { + const isAuthenticated = await userService.fetchUser(dispatch) - const successAuth = (redirectTo: string) => { - toast.success('Вы уже авторизованы') - navigate(redirectTo) + if (!isAuthenticated && !isAuthPath) { + toast.error('Необходимо авторизоваться', { autoClose: 1500 }) + navigate('/sign-in') + } } useEffect(() => { if (!userIsLogged || user === null) { - dispatch(getUser()) - .unwrap() - .then(data => { - dispatch(actions.setUser(data)) - window.sessionStorage.setItem('userIsLogged', '1') // 0 - - if (redirectTo) { - successAuth(redirectTo) - } - }) - .catch(() => { - window.sessionStorage.setItem('userIsLogged', '0') // 1 - - if (!['/sign-in', '/sign-up'].includes(pathname)) { - toast.error('Необходимо авторизоваться') - navigate('/sign-in') - } - }) + handleAuthentication() } else if (redirectTo) { - successAuth(redirectTo) + toast.success('Вы уже авторизованы', { autoClose: 1500 }) + navigate(redirectTo) } }, [user, userIsLogged]) - return + if (userIsLogged || isAuthPath) { + return + } + + return

Загрузка...

} } diff --git a/packages/client/src/layouts/PrivateLayout/PrivateLayout.tsx b/packages/client/src/layouts/PrivateLayout/PrivateLayout.tsx index 55d6143..63aa846 100644 --- a/packages/client/src/layouts/PrivateLayout/PrivateLayout.tsx +++ b/packages/client/src/layouts/PrivateLayout/PrivateLayout.tsx @@ -3,19 +3,14 @@ import { Outlet } from 'react-router-dom' import withAuthUser from '@/components/hoc/withAuthUser' import './PrivateLayout.scss' -const PrivateLayout = (props: any & { userIsLogged: boolean }) => { - const { userIsLogged } = props - - if (userIsLogged) { - return ( -
-
-
- -
-
- ) - } - return

Загрузка...

+const PrivateLayout = () => { + return ( +
+
+
+ +
+
+ ) } export default withAuthUser(PrivateLayout) diff --git a/packages/client/src/services/userService.tsx b/packages/client/src/services/userService.tsx new file mode 100644 index 0000000..926d3ed --- /dev/null +++ b/packages/client/src/services/userService.tsx @@ -0,0 +1,20 @@ +import { actions, UserType, getUser } from '@/store/reducers/auth-reducer' +import { useAppDispatch } from '@/store' + +export const userService = { + async fetchUser(dispatch: ReturnType) { + try { + const data: UserType = await dispatch(getUser()).unwrap() + dispatch(actions.setUser(data)) + window.sessionStorage.setItem('userIsLogged', '1') + return true + } catch { + window.sessionStorage.setItem('userIsLogged', '0') + return false + } + }, + + isLoggedIn() { + return window.sessionStorage.getItem('userIsLogged') === '1' + }, +} diff --git a/packages/client/src/store/reducers/auth-reducer.ts b/packages/client/src/store/reducers/auth-reducer.ts index c02cb55..7f9cc30 100644 --- a/packages/client/src/store/reducers/auth-reducer.ts +++ b/packages/client/src/store/reducers/auth-reducer.ts @@ -1,5 +1,5 @@ import { createAsyncThunk, createSlice } from '@reduxjs/toolkit' -import { AppDispatch, InferAppActions } from '@/store' +import { InferAppActions } from '@/store' import backendApi from '@/api/backendApi' export type UserType = {