在用户先前单击的授权后重定向用户

Question

不知何故，我想到了一个问题，如果有人点击 link，如果没有授权，应该重定向到登录页面，如果授权，应该重定向到该页面。这听起来很简单，但问题是，如果用户重定向到应该被授权的页面，则用户授权并重定向到他单击的同一页面。

目前，我有一个受保护的路由，如下所示：（我有 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>

Answer 1

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 });
};

Answer 2

例如，您可以通过传递一些参数 (next_route) 来实现此目的。并在登录过程中保留它，以便在他完成后可以重新定向到正确的位置 (next_route)

在用户先前单击的授权后重定向用户

Redirect user after authorization where user previously clicked

javascript

jsx

reactjs

react-router

react-router-dom