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

Posted 2023-02-21

【中文标题】登录后如何从导航栏中删除登录按钮

【英文标题】：How to remove Login button from nav bar after logging in

【发布时间】：2020-08-23 08:42:11

【问题描述】：

我正在构建一个具有 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;

用户组件是here。

---

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

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

，它总是显示“注销”

【问题讨论】：

我建议您使用 State 而不是 localStorage 来管理身份验证。

@Devang 你的意思是使用像 Redux 这样的工具的全局状态？您是否知道为什么当我删除===true 时它有时会显示登录而有时会显示注销？

不需要使用 Redux。只需更新登录成功的状态。

【参考方案1】：

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

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

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);

【参考方案2】：

基本上约定是使用身份验证上下文来管理状态，或者您也可以将身份验证方法也放入上下文中。我只是快速搜索了这个例子，找到了一个干净的例子here。

【参考方案3】：

最好的基本方法之一是在用户登录时设置一个 localStorage 值，并在用户注销时删除该值。像这样的：

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

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

【讨论】：

我尝试按照您的建议进行操作，并根据您的建议更新了我的答案。但基本上它没有工作，即使它显然应该有