CODEWITHSUNDEEP
reactjsauthenticationnavigationlogout
Vinay DS
Vinay DS

Reputation: 43

ReactJS navigation menu

I am new to react JS. Below is the code for our MainMenu navigation. I would like to display the "Logout" only if the user is already signed in (We use Google Signin API in another JS file). How do I achieve this?

import React from 'react';
import { Link } from 'react-router';
import { IndexLink } from 'react-router';
import { LinkContainer, IndexLinkContainer } from 'react-router-bootstrap';
import { Button } from 'react-bootstrap';
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import UserStore from '../store/UserStore';
import cookie from 'react-cookie';
import { browserHistory } from 'react-router';

class MainMenu extends React.Component {


logout() {
    UserStore.logout();
    cookie.remove('userId', { path: '/' });
    cookie.remove('pic', { path: '/' });
    cookie.remove('email', { path: '/' });
    cookie.remove('profile', { path: '/' });
    browserHistory.push('/login');
}

viewDB() {
    browserHistory.push('/testDashboard');
}

render() {
    console.log("****************************************************");
    return (
    <Navbar collapseOnSelect>
<Navbar.Header>
  <Navbar.Brand>
    <a href="#">
                <img src={require('../images/logo.jpg')}/>
    </a>
  </Navbar.Brand>
  <Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
  <Nav pullRight>
    <NavItem eventKey={1} href="http://www.test.com/howitworks">How it works</NavItem>
    <NavItem eventKey={2} href="#">Why Test</NavItem>
    <NavItem eventKey={2} href="#">Blog</NavItem>
    <NavItem eventKey={2} href="#" onClick={this.viewDB}>My Energy Dashboard</NavItem>
    <NavItem eventKey={2} href="#">{"Hi " + localStorage.name}</NavItem>
    <NavItem eventKey={2} href="#" className="last" onClick={this.logout}>Logout</NavItem>
  </Nav>
    </Navbar.Collapse>
  </Navbar>

        );
    }
}

export default MainMenu;

Upvotes: 1

Views: 2092

Answers (1)

Facundo La Rocca
Facundo La Rocca

Reputation: 3866

In the code above, you will see how to render (or not) your logout, but you still need to write the code needed to determine if the user is logged in or not.

import React from 'react';
import { Link } from 'react-router';
import { IndexLink } from 'react-router';
import { LinkContainer, IndexLinkContainer } from 'react-router-bootstrap';
import { Button } from 'react-bootstrap';
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import UserStore from '../store/UserStore';
import cookie from 'react-cookie';
import { browserHistory } from 'react-router';

class MainMenu extends React.Component {
  constructor(props){
    super(props);

    this.renderLogout = this.renderLogout.bind(this);

    this.state = {
      mustShowLogout: false;
    }
  }

logout() {
    UserStore.logout();
    cookie.remove('userId', { path: '/' });
    cookie.remove('pic', { path: '/' });
    cookie.remove('email', { path: '/' });
    cookie.remove('profile', { path: '/' });
    browserHistory.push('/login');
}

viewDB() {
    browserHistory.push('/testDashboard');
}

renderLogout(){
    if(this.state.mustShowLogout)
        return (<NavItem eventKey={2} href="#" className="last" onClick={this.logout}>Logout</NavItem>);

    return null;
}

render() {
    console.log("****************************************************");
    return (
    <Navbar collapseOnSelect>
<Navbar.Header>
  <Navbar.Brand>
    <a href="#">
                <img src={require('../images/logo.jpg')}/>
    </a>
  </Navbar.Brand>
  <Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
  <Nav pullRight>
    <NavItem eventKey={1} href="http://www.test.com/howitworks">How it works</NavItem>
    <NavItem eventKey={2} href="#">Why Test</NavItem>
    <NavItem eventKey={2} href="#">Blog</NavItem>
    <NavItem eventKey={2} href="#" onClick={this.viewDB}>My Energy Dashboard</NavItem>
    <NavItem eventKey={2} href="#">{"Hi " + localStorage.name}</NavItem>
    {this.renderLogout()}
  </Nav>
    </Navbar.Collapse>
  </Navbar>

        );
    }
}

export default MainMenu;

Upvotes: 1

Related Questions