react antd 退出登录之后其他页签需要被关闭 再次登录时只展示首页,实例
时间: 2023-08-22 13:03:37 浏览: 68
要实现这个功能,可以通过在退出登录时清空浏览器的 session 或者 local storage,然后在主页的 componentDidMount 生命周期中检查用户是否登录,如果未登录则只展示主页,其他页签需要被关闭。
以下是一个简单的实现示例:
```jsx
import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import { Layout, Menu } from 'antd';
const { Header, Content } = Layout;
class App extends Component {
state = {
loggedIn: false,
redirect: false, // 是否需要重定向到主页
};
componentDidMount() {
const loggedIn = localStorage.getItem('loggedIn') === 'true';
this.setState({ loggedIn });
}
handleLogout = () => {
localStorage.clear(); // 清空 local storage
this.setState({ loggedIn: false, redirect: true }); // 设置重定向
};
render() {
const { loggedIn, redirect } = this.state;
if (redirect) {
return <Redirect to="/" />;
}
return (
<Layout>
<Header>
<div className="logo" />
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
<Menu.Item key="1">Home</Menu.Item>
{loggedIn && <Menu.Item key="2">Profile</Menu.Item>}
{loggedIn && <Menu.Item key="3" onClick={this.handleLogout}>Logout</Menu.Item>}
</Menu>
</Header>
<Content>
{/* 在这里根据 loggedIn 显示不同的页面 */}
{loggedIn ? (
<div>Profile Page</div>
) : (
<div>Home Page</div>
)}
</Content>
</Layout>
);
}
}
export default App;
```
在这个示例中,我们通过 `localStorage` 存储用户是否登录的状态,然后在 `componentDidMount` 中读取状态并更新组件的 `state`。在退出登录时,我们通过 `localStorage.clear()` 清空 `localStorage`,然后设置重定向到主页。在主页的 `render` 方法中,根据 `loggedIn` 显示不同的页面。如果用户未登录,则只显示主页,其他页签需要被关闭。如果用户已经登录,则显示一个简单的个人资料页面。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)