Необходимо реализовать компонент ProtectedRoute. Он будет принимать список ролей (accessRoles), которые ему доступны, и для таких ролей показывать контент. Его работа будет выглядеть так: Ес

Вопрос пользователя:

Необходимо реализовать компонент ProtectedRoute. Он будет принимать список ролей (accessRoles), которые ему доступны, и для таких ролей показывать контент. Его работа будет выглядеть так: Если сейчас загрузка или приложение еще НЕ прошло инициализацию, тогда необходимо рисовать загрузку. Если пользователя нет или его роль отсутствует в массиве accessRoles, тогда пользователя необходимо перенаправить на страницу /sign-in. В противном случае отображаем children этого роута. Теперь необходимо Home обернуть в ProtectedRoute и передать туда accessRoles={[ROLE.USER, ROLE.ADMIN]}, а страницу для администратора AdminPage обернуть в ProtectedRoute и передать туда accessRoles={[ROLE.ADMIN]}. Для отображения children в ProtectedRoute используйте компонент Outlet. Чтобы заиспользовать защищенный роут используйте следующую конструкцию: <Route path='/' element={<ProtectedRoute accessRoles={[/* тут роли */]} />}> <Route path='/' element={<Main />} /> </Route> import React from 'react'; import {useSelector} from 'react-redux'; import {Outlet, Navigate} from 'react-router-dom'; import {RootState} from '../../store'; import {Role} from '../../types'; export const ProtectedRoute = ({accessRoles}: {accessRoles: Role[]}) => { const { } = useSelector((store: RootState) => store.user); return null; }; import {useEffect} from 'react'; import { Routes, Route, } from 'react-router-dom'; import {useDispatch} from 'react-redux'; import {Home} from '../pages/Home'; import {SignIn} from '../pages/SignIn'; import {getUserThunk, init} from '../features/user/userSlice'; import {AppDispatch} from '../store'; import {ProtectedRoute} from '../components/ProtectedRoute'; import {ROLE} from '../constants'; import {AdminPage} from "../pages/AdminPage"; export const App = () => { const dispatch: AppDispatch = useDispatch(); useEffect(() => { const token = localStorage.getItem('token'); if (token) { dispatch(getUserThunk({token})); } else { dispatch(init()); } }, []); return ( <> <Routes> <Route path='/sign-in' element={<SignIn />} /> <Route path='/' element={<Home />} /> <Route path='/admin' element={<AdminPage />} /> </Routes> </> ) };

Ответ нейросети:

Пройдите быструю авторизацию для просмотра:

import React from 'react'; import { useSelector } from 'react-redux'; import { Outlet, Navigate } from 'react-router-dom'; import { RootState } from '../../store'; import { Role } from '../../types';

export const ProtectedRoute = ({ accessRoles, children }: { accessRoles: Role[], children: React.ReactNode }) => { const { user, loading, initialized } = useSelector((store: RootState) => store.user);

if (loading || !initialized) {
    return <div>Loading...</div>;
}

if (!user || !accessRoles.includes(user.role)) {
    return <Navigate to="/sign-in" />;
}

return <Outlet>{children}</Outlet>;

};

// In App component import React, { useEffect } from 'react'; import { Routes, Route } from 'react-router-dom'; import { useDispatch } from 'react-redux'; import { Home } from '../pages/Home'; import { SignIn } from '../pages/SignIn'; import { getUserThunk, init } from '../features/user/userSlice'; import { AppDispatch } from '../store'; import { ProtectedRoute } from '../components/ProtectedRoute'; import { ROLE } from '../constants'; import { AdminPage } from '../pages/AdminPage';

export const App = () => { const dispatch: AppDispatch = useDispatch();

useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
        dispatch(getUserThunk({ token }));
    } else {
        dispatch(init());
    }
}, []);

return (
    <>
        <Routes>
            <Route path='/sign-in' element={<SignIn />} />
            <Route path='/' element={<ProtectedRoute accessRoles={[ROLE.USER, ROLE.ADMIN]}><Home /></ProtectedRoute>} />
            <Route path='/admin' element={<ProtectedRoute accessRoles={[ROLE.ADMIN]}><AdminPage /></ProtectedRoute>} />
        </Routes>
    </>
)

};

Напишите нам, если в вопросе есть ваши персональные данные (yasnoponyatno24@yandex.ru)

useEffect(() => { const token = localStorage.getItem('token'); if (token) { dispatch(getUserThunk({ token })); } else { dispatch(init()); } }, []); return ( <> <Routes> <Route path='/sign-in' element={<SignIn />} /> <Route path='/' element={<ProtectedRoute accessRoles={[ROLE.USER, ROLE.ADMIN]}><Home /></ProtectedRoute>} /> <Route path='/admin' element={<ProtectedRoute accessRoles={[ROLE.ADMIN]}><AdminPage /></ProtectedRoute>} /> </Routes> </> )

ЯсноПонятно24

Пройдите быструю авторизацию для просмотра:

Пройдите быструю авторизацию для просмотра:

Последние вопросы: