代码实现react登录并保存cookie,下次发送请求自动带上cookie
时间: 2023-08-29 16:07:16 浏览: 34
可以使用 axios 库和 js-cookie 库来实现此功能,具体代码实现可以参考以下示例:
```javascript
import axios from 'axios';
import Cookies from 'js-cookie';
// 登录函数,通过向服务器发送请求来验证用户名和密码,并将登录信息保存在 cookie 中
function login(username, password) {
return axios.post('/api/login', { username, password })
.then(response => {
const { token } = response.data; // 假设服务器返回登录 token
Cookies.set('token', token); // 将 token 保存在 cookie 中
return true;
}).catch(() => {
return false;
});
}
// 发送请求函数,每次请求自动带上 cookie 中保存的 token
function sendRequest(url, method, data) {
const token = Cookies.get('token');
return axios({
method,
url,
data,
headers: { Authorization: `Bearer ${token}` } // 在请求头中带上 token
}).then(response => response.data);
}
```
在登录时,首先向服务器发送验证请求,并将返回的登录 token 保存在 cookie 中。之后每次发送请求时,在请求头中带上 cookie 中保存的 token。这样可以实现登录后自动携带 token 的功能。