Блог

Главная - Вопросы по программированию - Как направить пользователя на другую страницу, если человек не авторизован?

Как направить пользователя на другую страницу, если человек не авторизован?

#javascript #reactjs #react-hooks #react-router #react-router-dom

Вопрос:

Я хочу направить пользователя на страницу входа в систему, если он/она не авторизован. Для этой цели я написал нижний код. Корневой маршрут-это страница входа, а страница панели администратора предназначена для администратора. Если data.success верен, это означает, что человек является администратором. Но этот код рендеринга 404 не найден на http://localhost:3000/user url. Как я могу исправить эту проблему?

 const App = () => {
  const [auth, setAuth] = useState(false);
  const authControl = async () => {
    try {
      const res = await axios({
        url: "https://localhost:44357/api/Auth/user",
        withCredentials: true,
      });
      console.log(res.data.success);
      if (res.data.success) setAuth(true);
    } catch (err) {
      console.log(err);
    }
  };
  useEffect(() => {
    authControl();
  }, []);
  return (
    <div>
      <BrowserRouter>
        <Route path="/" exact component={Login} />
        <Route
          path="/user"
          render={() => {
            auth ? <AdminPanel /> : <Redirect to="/" />;
          }}
        />
        <Route render={() => <h1>404 Not Found</h1>} />
      </BrowserRouter>
    </div>
  );
};

Комментарии:

1. У вас нет "/user" маршрута, поэтому маршруты не совпадают, и вы попадаете на 404. Либо перейдите к существующему маршруту, либо создайте "/user" маршрут, чтобы он существовал.

Ответ №1:

вам нужно завернуть <Route /> s в a <Switch /> из маршрутизатора react. что-то вроде этого:

  <Switch>
    <Route path="/public">
        <PublicPage />
    </Route>
    <Route path="/login">
        <LoginPage />
    </Route>
</Switch>
Метки: ,