react antd退出登录之后其他页签会被关闭清空 再次登录时展示首页,实例
时间: 2023-08-21 17:07:48 浏览: 48
好的,这里给你一个简单的示例来说明如何实现这个功能。
首先,我们需要使用React Router来管理路由。在App.js中,我们可以这样定义路由:
```javascript
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./pages/HomePage";
import LoginPage from "./pages/LoginPage";
import ProfilePage from "./pages/ProfilePage";
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/login" component={LoginPage} />
<Route path="/profile" component={ProfilePage} />
</Switch>
</Router>
);
}
export default App;
```
这里定义了三个路由,分别对应首页、登录页和个人资料页。
然后,我们可以使用Redux来管理全局状态。在store.js中,我们可以这样定义store:
```javascript
import { createStore } from "redux";
const initialState = {
isAuthenticated: false,
currentUser: null,
};
function reducer(state = initialState, action) {
switch (action.type) {
case "LOGIN":
return {
...state,
isAuthenticated: true,
currentUser: action.payload,
};
case "LOGOUT":
return {
...state,
isAuthenticated: false,
currentUser: null,
};
default:
return state;
}
}
const store = createStore(reducer);
export default store;
```
这里定义了一个简单的reducer,用来处理登录和退出登录的操作。初始状态为未认证,当前用户为null。
在LoginPage.js中,我们可以这样实现登录逻辑:
```javascript
import { useDispatch } from "react-redux";
import { useHistory } from "react-router-dom";
import { Form, Input, Button } from "antd";
import store from "../store";
function LoginPage() {
const dispatch = useDispatch();
const history = useHistory();
const handleLogin = (values) => {
// 这里可以发起登录请求,获取用户的token等信息
// 然后将用户信息存入全局状态中,标记为已认证
dispatch({ type: "LOGIN", payload: { username: values.username } });
history.push("/");
};
return (
<div>
<Form onFinish={handleLogin}>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: "Please input your username!" }]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true, message: "Please input your password!" }]}
>
<Input.Password />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Login
</Button>
</Form.Item>
</Form>
</div>
);
}
export default LoginPage;
```
这里使用了Redux的dispatch方法将用户信息存入全局状态中,并使用history.push方法重定向到首页。
在HomePage.js中,我们可以这样实现退出登录逻辑:
```javascript
import { useDispatch } from "react-redux";
import { useHistory } from "react-router-dom";
import { Button } from "antd";
import store from "../store";
function HomePage() {
const dispatch = useDispatch();
const history = useHistory();
const handleLogout = () => {
// 这里可以发起退出登录请求,清空用户的token等信息
// 然后将用户信息从全局状态中清除,标记为未认证
dispatch({ type: "LOGOUT" });
history.push("/login");
};
return (
<div>
<h1>Welcome to HomePage</h1>
<Button onClick={handleLogout}>Logout</Button>
</div>
);
}
export default HomePage;
```
这里同样使用了Redux的dispatch方法将用户信息从全局状态中清除,并使用history.push方法重定向到登录页。
最后,在App.js中我们需要使用Redux的Provider组件将store传递给应用程序:
```javascript
import { Provider } from "react-redux";
import store from "./store";
function App() {
return (
<Provider store={store}>
<Router>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/login" component={LoginPage} />
<Route path="/profile" component={ProfilePage} />
</Switch>
</Router>
</Provider>
);
}
export default App;
```
这样,当用户退出登录后,其他页签不会被关闭清空,再次登录时展示首页。
相关推荐
![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)