我有一个关于注销功能实现的问题。
正如您在codesandbox中看到的,我的应用程序已变成这样的外观:https://sit9d.csb.app/login
这是 Logout.js 代码,我想我可能会编辑它:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { setAuthedUser } from '../actions/authedUser'
class Logout extends Component {
componentDidMount() {
this.props.setAuthedUser(null)
}
render() {
return<div>Logging out...</div>
}
}
export default connect(
null,
{ setAuthedUser }
)(Logout)
这是导航栏,Menu.js:
import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import { connect } from 'react-redux'
import { Image } from 'semantic-ui-react'
class Menu extends Component {
render() {
const { users, authedUser } = this.props
const { name, avatarURL } = users[authedUser]
return (
<div className='ui fixed inverted menu'>
<div className='ui container'>
<div className='item' />
<NavLink
to='/'
exact
className='header item'
activeClassName='active'
>
<Image
src='/would-you-rather.png'
style={{ width: '50px', marginRight: '5px' }}
/>
Home
</NavLink>
<NavLink to='/add' exact className='item' activeClassName='active'>
New Question
</NavLink>
<NavLink
to='/leaderboard'
exact
className='item'
activeClassName='active'
>
Leader Board
</NavLink>
<div className='ui right floated item'>
<span style={{ marginRight: '10px' }}>Hello, {name}</span>
<img className='ui avatar image' src={avatarURL} alt='' />
</div>
<NavLink to='/logout' exact className='item' activeClassName='active'>
Logout
</NavLink>
</div>
</div>
)
}
}
const mapStateToProps = (state) => {
return { authedUser: state.authedUser, users: state.users }
}
export default connect(mapStateToProps)(Menu)
我想知道如何实现注销返回登录认证页面的功能?
请提供任何帮助,我将不胜感激。
问候。
最佳答案
最简单的方法是在 componentDidMount
中重置用户后立即使用 this.props.history.push('/login')
。
history
由 react-router-dom
提供给 Logout.js
,因为它是一个路由组件。
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { setAuthedUser } from '../actions/authedUser'
class Logout extends Component {
componentDidMount() {
this.props.setAuthedUser(null)
this.props.history.push('/login')
}
render() {
return<div>Logging out...</div>
}
}
export default connect(
null,
{ setAuthedUser }
)(Logout)
关于javascript - 如何实现注销返回登录页面的功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59867533/