Как удалить кнопку входа в систему с панели навигации после входа в систему

Question

Я создаю веб-сайт с 3 разными страницами (Home, Login и User), и я использую компонент Switch в React Router для перемещения между страницами. Проблема, с которой я сталкиваюсь, заключается в том, что когда я попадаю на страницу пользователя, я все еще вижу логин в списке навигации, как показано на изображении ниже Теперь я хочу, чтобы кнопка входа была удалена, как только я доберусь до страницу пользователя или переключите текст на «Выйти». У вас есть предложения, как это можно сделать? Я также включил код, чтобы он был более понятным.

Заголовок (панель навигации). Компонент

import React from "react";
import { Link } from "react-router-dom";
import './App.css';

const Header = () => (
  <header >
    <nav className='topnav'>
      <ul>
          <li>
            <Link to="/Login">Login</Link>
          </li>
          <li>
            <Link to="/">Home</Link>
          </li>

      </ul>
    </nav>
  </header>
);

export default Header;

Компонент входа

const Login = () => (

  <Switch>
    <div className="LoginWrap">
      <Route exact path="/Login" component={LoginForm} />
      <Route path="/Login/:number" component={User} />
    </div>
  </Switch>

);

export default Login;

, а пользовательский компонент здесь .

---

Изменить: основываясь на ваших предложениях, я попытался сделать это:

<Link to="/Login">
{
  console.log("Header localStorage.getItem isLoggedIn is :" + localStorage.getItem("isLoggedIn"))
}
{
  localStorage.getItem("isLoggedIn") === true? "Logout" : "Login"
}
</Link>

Тем не менее, он все время показывал «Войти».

Понятия не имею, почему. Несмотря на то, что в консоли он правильно печатает «Header localStorage.getItem isLoggedIn is: true» и «Header localStorage.getItem isLoggedIn is: false», когда вы входите через форму входа, а затем нажимаете кнопку Link в заголовке

---

Еще более странным было то, что когда я менял код на

localStorage.getItem("isLoggedIn") ? "Logout" : "Login"

, он всегда показывает «Выход»

Answer 1

Если вы хотите использовать Redux для решения ваших проблем, можете проверить мой простой пример redux в моем репозитории на github (https://github.com/saamerm/ReactAndRedux-CounterApp), который сможет все подробно объяснить.

Вам просто нужно изменить index. js и Counter. js (Логин в вашем случае) файлы для вашего приложения:

1. Index. js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./components/App";
import { Provider } from "react-redux";
import { createStore } from "redux";

const initialState = {
  isLoggedIn: false
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case "LOGIN":
      return {
        isLoggedIn: true
      };
    case "LOGOUT":
      return {
        isLoggedIn: false
      };
    default:
      return state;
  }
}

const store = createStore(reducer);

render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

Компонент входа

import React from "react";
import { connect } from "react-redux";

class Login extends React.Component {
    login = () => {
        this.props.dispatch({ type: "LOGIN" });
    };
    logout = () => {
        this.props.dispatch({ type: "LOGOUT" });
    };

    handleLoginClick=()=>
    {
      if (this.props.isLoggedIn === true){  
        this.logout()
      }
      else{
        this.login()
      }
    }  
    
    render(){...}
}

function mapStateToProps(state) {
    return {
        isLoggedIn: state.isLoggedIn
    };
}

export default connect(mapStateToProps)(Login);

Answer 2

Один из лучших базовых c методов - это установка значения localStorage при входе пользователя в систему и удаление этого значения при выходе пользователя из системы. Примерно так:

const auth = localStorage.getItem("islogin");

if (islogin) { // if there is a value named as islogin...
  <Button>Logout</Button>
} else { 
  <Button>Login</Button>
}

Answer 3

По сути, соглашение заключается в использовании контекста аутентификации для управления состоянием, или вы также можете поместить метод аутентификации в контекст. Я просто быстро погуглил пример и нашел один чистый пример здесь .