Блог

Я создал Login компонент, который перенаправляет меня обратно Login после успешной аутентификации. Вместо этого он должен перенаправляться на частный маршрут по адресу "/" . handleSubmit Функция в моем Login компоненте выглядит следующим образом:

   function handleSubmit(e) {
    setLoading(true);
    e.preventDefault();
    authenticationService.login(email, password)
      .then((res) => {
        console.log(res.data);
        setLoading(false);
        history.push("/");
        console.log(authenticationService.isAuthenticated);
      })
      .catch((error) => {
        console.log(error);
        setLoading(false);
        setError(error.message || error);
      });
  }
 

Я вижу , что console.log(authenticationService.isAuthenticated) это false так, поэтому причину, по которой я перенаправляюсь Login при history.push("/") запуске, можно найти в PrivateRoute — Я еще не аутентифицирован, поэтому он отправляет сообщение обратно Login :

 import { Redirect, Route } from "react-router";
import { authenticationService } from "./services";

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) => {
      if (authenticationService.isAuthenticated) {
        return <Component {...props} />;
      }
      return <Redirect to="/login" />;
    }}
  />
);

export default PrivateRoute;
 

Мой вопрос заключается в следующем: каков рекомендуемый способ решения этой проблемы. Поскольку это, безусловно, чрезвычайно частый случай использования, я думаю, что существует стандартная процедура, позволяющая сделать эту работу правильной.

В случае, если это полезно, я authenticationService.login выгляжу следующим образом:

 // authentication.service.js
import axios from "axios";
import { api } from "../api";

const authAxios = axios.create();

authAxios.interceptors.request.use((config) => {
  const newConfig = config;
  const token = localStorage.getItem("token");
  console.log(token);
  newConfig.headers = {
    Authorization: `Token ${token}`,
  };
  return newConfig;
});

function isAuthenticated() {
  const token = localStorage.getItem("token");
  return token !== null amp;amp; token !== undefined;
}

function login(email, password) {
  return axios
    .post(api.auth.login, {
      email,
      password,
    })
    .then((res) => {
      localStorage.setItem("token", res.data.key);
      return res;
    });
}

function logout() {
  localStorage.removeItem("token");
}

const authenticationService = {
  isAuthenticated: isAuthenticated(),
  login,
  logout,
};

export { authAxios, authenticationService };