[英]Logout update NavBar React.js
I'm trying to update my NavBar upon logging out (clearing the session). 我正在尝试注销(清除会话)时更新我的NavBar。 This is the code I wrote:
这是我写的代码:
App.js: App.js:
class App extends Component {
constructor(props){
super(props);
this.state = {};
}
componentWillMount(){
if(sessionStorage.getItem('access_token') != null && sessionStorage.getItem('id_token') != null){
this.setState({loggedIn: true});
}
}
render() {
return (
<BrowserRouter>
<div>
<title>Webshop</title>
<NavBar/>
<Switch>
{/*Routes need to be include in App.js otherwise root can't find the paths*/}
<Route exact path='/' component={Home}/>
<Route exact path='/categories' component={Categories}/>
<Route exact path='/login' component={Login}/>
<Route exact path='/register' component={Register}/>
{this.state.loggedIn == true ? <Route exact path='/logout' component={Logout}/> : null}
<Route render={function(){
return (<NotFound/>);
}}/>
</Switch>
<Footer/>
</div>
</BrowserRouter>
);
}
}
NavBar.js: NavBar.js:
class NavBar extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
componentWillMount(){
if(sessionStorage.getItem('access_token') != null && sessionStorage.getItem('id_token') != null){
this.setState({loggedIn: true});
}
else{
this.setState({loggedIn: false});
}
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render(){
return(
<div>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'/>
<Navbar color="faded" light expand="md">
<NavLink className='navbar-brand' exact to='/'>
<img src={logo} alt='Brand' width='35px' height='35px'/>
</NavLink>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink className='nav-link' exact to='/categories'>
Categories
</NavLink>
</NavItem>
</Nav>
<Nav className='mx-auto' navbar>
<Form inline>
<FormGroup>
<Input size='sm' type="text" name="search" placeholder="Search" />
</FormGroup>
<Button size='sm'><i className='fa fa-search'></i></Button>
</Form>
</Nav>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink className='nav-link' exact to='/cart'>
<i className='fa fa-shopping-cart'></i>
</NavLink>
</NavItem>
{(this.state.loggedIn) ?
<NavItem>
<NavLink className='nav-link' exact to='/profile'>
<i className='fa fa-user'></i>
</NavLink>
</NavItem>
: null }
{(this.state.loggedIn == true) ?
<NavItem>
<NavLink className='nav-link' exact to='/logout'>
<i className='fa fa-sign-out'></i>
</NavLink>
</NavItem>
:
<NavItem>
<NavLink className='nav-link' exact to='/login'>
<i className='fa fa-sign-in'></i>
</NavLink>
</NavItem>
}
</Nav>
</Collapse>
</Navbar>
</div>
);
}
}
Logout.js: Logout.js:
class Logout extends Component{
componentDidMount(){
sessionStorage.clear();
}
render(){
return(
<div>
Now loggedOut;
</div>
)
}
}
The code does the following, upon login it stores the access_token & id_token in the sessionStorage. 该代码执行以下操作,登录后将access_token和id_token存储在sessionStorage中。 Then updates the NavBar by redirecting to the homepage, now the NavBar contains the logout button because the state is updated to loggedIn.
然后通过重定向到主页来更新NavBar,现在NavBar包含注销按钮,因为状态已更新为loginIn。 Now when I logout, I clear the session so the id_token & access_token are no longer avaiable.
现在,当我注销时,我清除了会话,因此id_token和access_token不再可用。 This should trigger the state to update loggedIn to false & rerender the NavBar component but somehow it doesn't.
这应该触发状态,以将loginIn更新为false并重新呈现NavBar组件,但是不知道如何。 (When I refresh the page the NavBar does update)
(当我刷新页面时,NavBar确实会更新)
Could anyone help me out? 有人可以帮我吗?
In your App.js
, I recommend you maintain the state there as a single source of truth, then pass along this.state.loggedIn
to <NavBar/>
like so: 我建议在
App.js
,将状态保存为单个事实来源,然后将this.state.loggedIn
传递给<NavBar/>
如下所示:
<NavBar loggedIn={this.state.loggedIn} />
In addition to that, add a function to toggle the loggedIn state in App.js
, like so: 除此之外,添加一个函数来切换
App.js
中的App.js
状态,如下所示:
logOut() { this.setState({loggedIn: false}); }
And pass along that function like so: 然后像这样传递该函数:
<NavBar loggedIn={this.state.loggedIn} logOut={this.logOut} />
This way, you can respond to this.props.loggedIn
in Navbar.js
and keep your logic for logging out (and also logIn if you please) in one place in App.js
这样一来,就可以应对
this.props.loggedIn
在Navbar.js
在一个地方,让你的逻辑注销(并登录,如果你请) App.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.