2017-01-09 145 views
1

我是新来的JS。以下是我们MainMenu导航的代码。只有当用户已经登录时(我们在另一个JS文件中使用Google Signin API),我才想显示“注销”。我如何实现这一目标?ReactJS导航菜单

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; 
+0

你试过了什么?代码如何与您的问题相关? – Rabban

+0

我看到你正在使用商店,那些商店代表商店在助推器模式? –

回答

1

在上面的代码,你将看到如何渲染(或没有)的注销,但你仍然需要编写,以确定用户登录或不需要的代码。

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 { 
    construstor(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; 
+0

非常感谢Facundo。这有助于。我会尽力实现这一点。 –

+0

掩盖它作为接受请!!!谢谢! –

+0

完成!非常感谢。 –