Скрыть заголовок в указанных c компонентах ReactJS / Реагировать - PullRequest
0 голосов
/ 13 апреля 2020

Я почти понял это, но это действительно сводит меня с толку, что это продолжалось в течение некоторого времени в том, что кажется простой задачей: скрыть ваш заголовок, если вы не вошли в систему ReactJS. Я пробовал несколько методов, и текущий действительно скрывает мой заголовок от / login, но при принятии учетных данных он не выполняет перепроверку при нажатии / dashboard. Просто загружает / панель инструментов и никакие метрики на месте не проверяются после входа в систему. (Попробовал console.log () по всему коду, чтобы проверить, действительно ли он проверяет путь или проверяет токен, не повезло. Как только я вручную обновлю sh заголовок выходит как следует, но не делает этого в исходном состоянии входа в систему.

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";
const isLoggedIn = () => {
  return localStorage.getItem("TOKEN_KEY") != null;
};
// Protected Route
const SecuredRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>  
      isLoggedIn() === true ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);
export default class App extends Component {
  componentWillUpdate(nextProps, nextState) {
    console.log("update");
  }

  render() {
    // const {pathname} = this.props.location;
    return (
      <Router>
        <Switch>
          <div>
            {isLoggedIn() && <Header />}
            <Route path="/register" component={Register} />
            <Route path="/login/:notify?" component={Login} />
            <Route path="/password/reset/:token" component={Passwordreset} />
            <Route path="/password/forgot" component={Passwordforgot} />
            <SecuredRoute path="/dashboard" component={Dashboard} />
          </div>
        </Switch>
      </Router>
    );
  }
}

И компонент входа в систему.

...
    submitForm = async(values, history) => {
        values.username = values.username.toLowerCase()
        axios
          .post('http://localhost:3000/login', values, values)
          .then(res => {
            if (res.data.result === "success") {
              localStorage.setItem("TOKEN_KEY", res.data.token);
              swal("Success!", res.data.message, "success").then(value => {
                history.push("/dashboard");          });


            } else if (res.data.result === "error") {
              swal("Error!", res.data.message, "error");
            }
          })
      .catch(error => {
        console.log(error);
        return swal("Error!", error.message, "error");
      });
  };
...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...