[英]Logout update NavBar React.js
我正在嘗試注銷(清除會話)時更新我的NavBar。 這是我寫的代碼:
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:
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:
class Logout extends Component{
componentDidMount(){
sessionStorage.clear();
}
render(){
return(
<div>
Now loggedOut;
</div>
)
}
}
該代碼執行以下操作,登錄后將access_token和id_token存儲在sessionStorage中。 然后通過重定向到主頁來更新NavBar,現在NavBar包含注銷按鈕,因為狀態已更新為loginIn。 現在,當我注銷時,我清除了會話,因此id_token和access_token不再可用。 這應該觸發狀態,以將loginIn更新為false並重新呈現NavBar組件,但是不知道如何。 (當我刷新頁面時,NavBar確實會更新)
有人可以幫我嗎?
我建議在App.js
,將狀態保存為單個事實來源,然后將this.state.loggedIn
傳遞給<NavBar/>
如下所示:
<NavBar loggedIn={this.state.loggedIn} />
除此之外,添加一個函數來切換App.js
中的App.js
狀態,如下所示:
logOut() { this.setState({loggedIn: false}); }
然后像這樣傳遞該函數:
<NavBar loggedIn={this.state.loggedIn} logOut={this.logOut} />
這樣一來,就可以應對this.props.loggedIn
在Navbar.js
在一個地方,讓你的邏輯注銷(並登錄,如果你請) App.js
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.