用户登录和注销后如何更改导航栏?

时间:2019-02-27 01:24:50

标签: reactjs forms state navbar

因此,我了解如何创建表单,导航栏和页脚等单个组件,但我不了解的是如何在用户退出时更改导航栏的状态。

例如,登录页面应具有一个非常基本的导航栏和几个navLink的表单,但是一旦用户登录,导航栏应包括“注销”导航链接和一个带有两个导航栏的页脚导航链接也是如此。

我遇到的问题是,当我单击“注销”链接时,当我单击其他导航链接之一时,它的确会呈现登录页面,但导航栏会重新显示“已登录”版本。

CustomNavbar.js

import React, { Component } from 'react'
import { Navbar, Nav, NavItem } from 'react-bootstrap';

class CustomNavbar extends Component {

render() {
    if (this.props.userID === null) {
        return (
            <div>
                <Navbar collapseOnSelect expand="md" bg="dark" variant="dark">
                    <Navbar.Brand href="/">
                        Ndnu's Notes
                    </Navbar.Brand>
                    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                    <Navbar.Collapse id="responsive-navbar-nav">
                    </Navbar.Collapse>
                </Navbar>
                <Navbar className="footer text-center" fixed="bottom" expand="lg" bg="light">
                    <Nav.Link href="/contactus">Contact Us</Nav.Link>
                    <Nav.Link href="/privacyterms">Privacy & Terms</Nav.Link>
                    <Nav.Link href="/about">About</Nav.Link>
                </Navbar>
            </div>
        )
    } else {    
        return (
            <div>
                <Navbar collapseOnSelect expand="md" bg="dark" variant="dark">
                    <Navbar.Brand href="/">
                    Ndnu's Notes
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                    <Navbar.Collapse id="responsive-navbar-nav">
                        <Nav className="mr-auto">
                        </Nav>
                        <Nav>
                            <Nav.Link eventKey={2} href="/myAccount"> <i class="fas fa-user"></i> My Account</Nav.Link>
                            <Nav.Link eventKey={1} href="/" onClick={this.props.logUserOut}> <i class="fas fa-sign-out-alt"></i> Log Out</Nav.Link>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>

                {/* Footer */}
                <Navbar fixed="bottom" bg="light">
                    <Nav.Link href="/contactus">Contact Us</Nav.Link>
                    <Nav.Link href="/privacyterms">Privacy & Terms</Nav.Link>
                    <Nav.Link href="/about">About</Nav.Link>
                </Navbar>
            </div>
        )
    }
}
}
export default CustomNavbar

App.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import LoginAndRegister from './LoginAndRegister'
import ContactUs from './Components/ContactUs.js';
import PrivacyTerms from './Components/PrivacyTerms.js';
import CustomNavbar from './Components/CustomNavbar.js';
import About from './Components/About.js';
import Table from './Components/Table.js';

class App extends React.Component {


constructor() {
    super();
    this.state = {
        userID:
    }
}
logUserOut = (e) => {
    e.preventDefault()
    this.setState({userID: null});
}

render() {
    return (
        <Router>
            <div>
                <CustomNavbar userID={this.state.userID} logUserOut={this.logUserOut} />
                <Route exact strict path="/contactus" component={ContactUs} />
                <Route exact strict path="/about" component={About} />
                <Route exact strict path="/privacyterms" component={PrivacyTerms} />
                  {!this.state.userID && <LoginAndRegister userID={this.state.userID}/>}
                <Table />
            </div>
        </Router>
    )
}
}

export default App;

1 个答案:

答案 0 :(得分:0)

到目前为止,您似乎还没有任何代码可以在页面加载时检查用户是否已经登录(通过检查Cookie或询问服务器等类似信息)。这意味着,每次页面加载时,登录状态将与您为初始状态设置的内容相对应。您可以在App构造函数中完成此操作:

this.state = {
  userID: 123 // you mentioned in your comments that this is what you used
}

因此,当页面最初加载时,会发生以下情况:

    调用
  1. App构造函数,并使用userID: 123设置初始状态。因此,该页面已加载有已经登录的用户123。这就是为什么您看到带有“我的帐户”和“注销”的导航栏的原因。

  2. 您单击“注销”。这样可以将userID正确设置为null。您已注销。您在导航栏中不再可以使用“我的帐户”或“注销”。

  3. 您单击其他导航链接之一,例如“联系我们”。 新页面已加载。一切重新开始。

  4. 再次调用
  5. App构造函数,并且初始状态再次设置回userID: 123。您的用户已登录。

要解决此问题,可以从在构造器中设置userID: null开始。这样,每次加载新页面时,用户便开始退出登录。但是,最终,您最终可能需要构建代码来维护(在客户端的浏览器上)某种cookie,该cookie告诉您的站点用户已登录,并保持从一页加载到另一页加载的状态。 >

我创建了一个code sandbox,它使用了您提供的代码,但随后添加了一些修改以帮助证明我在上文中所做的解释。在此沙箱中,用户开始注销。当您单击模拟登录的按钮时,该用户将登录。但是,如果单击导航栏链接将您带到另一个页面,则会看到该用户再次注销。


另外,您应注意,您的某些JSX代码(特别是CustomNavbar.js中的<i>标记)正在使用道具class-应将其更改为className ,否则为React will complain