Перенаправить пользователя после авторизации, где пользователь ранее нажал
Как-то я пришел к мысли, как сделать так, чтобы если человек нажимал на ссылку, он должен был быть перенаправлен на страницу входа, если он не авторизован, и на эту страницу, если он авторизован. Это звучит просто, но проблема в том, что я хочу сделать так, чтобы если пользователь перенаправлялся на одну страницу, где он должен авторизоваться, пользователь авторизуется и перенаправляет на ту же страницу, на которую он нажал.
На данный момент у меня есть защищенный маршрут, который выглядит так: (у меня есть аргумент fromPath для следующего перенаправления, но это не работает для меня.)
const ProtectedRoute = ({
isAllowed,
redirectPath = "/sign-in",
fromPath = null,
children,
}) => {
const dispatch = useDispatch();
if (fromPath) dispatch(setURLPath(fromPath));
if (!isAllowed) {
return <Navigate to = {fromPath} replace />;
}
return children ? children : <Outlet />;
};
А вот как это выглядит со стороны App.js:
<Suspense fallback = {<Spinner />}>
<GlobalStyle />
<Routes>
<Route
path='/'
element = {
<ProtectedRoute
isAllowed = {roleLevel > 0}
/>
}
>
<Route path='bookings' element = {<BookingsPage />} />
<Route path='single-booking/:id' element = {<SingleBookingPage />} />
<Route path='documents' element = {<DocumentsPage />} />
<Route path='my-account' element = {<MyAccountPage />} />
<Route path='reservation' element = {<ReservationPage />} />
</Route>
</Route>
<Route path='*' element = {<NotFoundPage />} />
</Routes>
</Suspense>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Компонент ProtectedRoute должен получить текущий объект location для доступа к маршруту и передать его в состоянии маршрута маршруту входа.
import { useLocation } from 'react-router-dom';
const ProtectedRoute = ({
isAllowed,
redirectPath = "/sign-in",
fromPath = null,
children,
}) => {
const location = useLocation();
const dispatch = useDispatch();
if (fromPath) dispatch(setURLPath(fromPath));
if (!isAllowed) {
return <Navigate to = {fromPath} replace state = {{ from: location }} />;
}
return children ? children : <Outlet />;
};
Затем компонент входа в систему должен получить доступ к переданному состоянию маршрута и перенаправить назад на исходный маршрут, к которому осуществляется доступ.
const location = useLocation();
const navigate = useNavigate();
...
const login = () => {
...
const { from } = location.state || { from: { pathname: "/" } };
navigate(from, { replace: true });
};
Вы можете добиться этого, передав, например, некоторые параметры (next_route). и сохраните его во время входа в систему, чтобы, когда он закончит, он мог быть перенаправлен в нужное место (next_route)