时间戳

首页 > 解决方案 > 登录后如何从导航栏中删除登录按钮

javascript - 登录后如何从导航栏中删除登录按钮

问题描述

我正在构建一个具有 3 个不同页面（主页、登录和用户）的网站，并且我正在使用 React Router 中的 Switch 组件在页面之间移动。我遇到的问题是，当我进入用户页面时，我仍然在导航列表中看到登录信息，如下图所示在此处输入图像描述 现在我希望在进入用户页面后删除登录按钮或将文本切换为“登出”。你对如何做到这一点有什么建议吗？我还包括了代码，所以它更清楚

标题（导航栏）组件

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;

User 组件在这里。

编辑：根据您的建议，我尝试这样做：

<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”

更奇怪的是，当我将代码更改为

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

，它总是显示“注销”

标签： javascriptreactjsreact-routerjsx

解决方案

如果您想使用 Redux 解决您的问题，可以查看我的 github 存储库 ( https://github.com/saamerm/ReactAndRedux-CounterApp ) 中的简单 redux 示例，该示例将能够详细解释所有内容。

您只需要为您的应用程序更改 index.js 和 Counter.js（在您的情况下为登录）文件：

  1. 索引.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")
);
  1. 登录组件
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);

推荐阅读