使用useCookies怎么实现登录和退出登录?
时间: 2024-05-12 12:18:43 浏览: 14
使用useCookies可以轻松地实现登录和退出登录功能。下面是一个示例代码:
```
import { useState, useEffect } from 'react';
import { useCookies } from 'react-cookie';
function Login() {
const [cookies, setCookie, removeCookie] = useCookies(['user']);
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [username, setUsername] = useState('');
useEffect(() => {
if (cookies.user) {
setIsLoggedIn(true);
setUsername(cookies.user.username);
}
}, [cookies]);
function handleLogin() {
setCookie('user', { username: 'user123' });
}
function handleLogout() {
removeCookie('user');
setIsLoggedIn(false);
setUsername('');
}
return (
<div>
{isLoggedIn ? (
<>
<p>Welcome, {username}!</p>
<button onClick={handleLogout}>Logout</button>
</>
) : (
<>
<p>Please login</p>
<button onClick={handleLogin}>Login</button>
</>
)}
</div>
);
}
```
在这个示例中,我们使用useCookies hook来获取和设置cookies。我们使用useState hook来跟踪用户是否已登录和他们的用户名。我们使用useEffect hook来检查是否存在cookies并相应地更新状态。如果cookies存在,我们将用户标记为已登录并设置他们的用户名。如果cookies不存在,我们显示登录按钮。
当用户点击登录按钮时,我们使用setCookie函数来设置一个名为“user”的cookie,该cookie包含用户的用户名。当用户点击注销按钮时,我们使用removeCookie函数来删除名为“user”的cookie,并重置用户状态。
这个示例中使用的cookie名称是“user”,但您可以根据需要更改它。此外,您可以在cookie中存储更多的用户信息,例如他们的电子邮件地址或角色。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)