Как использовать auth в Reaction-router-dom с запросом auth axios по состоянию использования и правильно использовать ловушки эффектов? - PullRequest
Новая
       14

Как использовать auth в Reaction-router-dom с запросом auth axios по состоянию использования и правильно использовать ловушки эффектов?

0 голосов
/ 22 июня 2019

Я пытаюсь использовать перенаправления (auth), как в качестве примеров в реакции-роутере-dom с auth axios и использовать состояние, эффект реагирующих хуков. Но что-то пошло не так.

Результат в инструментах консоли dev, когда я запрашиваю / admin: Предупреждение. Невозможно выполнить обновление состояния React для неустановленного компонента. Это не работает, но это указывает на утечку памяти в вашем приложении. Для исправления отмените все подписки и асинхронные задачи в функции очистки useEffect.

Пожалуйста, дайте мне немного подробностей, спасибо. 

import React, { useState, useEffect } from "react";
import { Switch, Route, Redirect } from "react-router-dom";
import Admin from "./layouts/Admin";
import Login from "./layouts/Login";
import Swal from "sweetalert2";
import axios from "axios";
function App() {
  return (
    <Switch>
      <PrivateRoute path="/admin" component={Admin} />
      <Route path="/login" component={Login} />
      <Redirect from="/" to="/admin" />
    </Switch>
  );
}
function PrivateRoute({ component: Component, ...rest }) {
  const [login, setLogin] = useState(false);
  useEffect(() => {
    async function fetchLogin() {
      try {
        let isLogin = await axios.get("/api/user/isLogin", {
          headers: { Authorization: sessionStorage.getItem("token") }
        });
        if (isLogin.status == 200) {
          setLogin(true);
        }
      } catch (err) {
        console.log(err);
      }
    }
    fetchLogin();
  },[]);
  return (
    <Route
      {...rest}
      render={props =>
        login ? (
          <Component {...props} />
        ) : (
          <>
            {
              !Swal.fire({
                title: "Login required!",
                text: "You have to login!",
                type: "error",
                confirmButtonText: "OK"
              })
            }
            <Redirect
              to={{
                pathname: "/login",
                state: { from: props.location }
              }}
            />
          </>
        )
      }
    />
  );
}
export default App;
...