接以上提问请修改前端代码
时间: 2024-09-21 17:10:35 浏览: 31
针对上文提到的登录流程,如果你想在前端使用JWT进行身份验证,你需要在`fetch`请求中加入JWT头部。这里是修改后的前端部分:
```javascript
<script>
document.querySelector('.login-form').addEventListener('submit', async (event) => {
event.preventDefault(); // 阻止表单默认提交行为
const inputFields = {
patientid: document.getElementById('patientid'),
username: document.getElementById('username'),
key: document.getElementById('key')
};
let valid = true;
// ...
if (valid) {
const formData = {
patientid: inputFields.patientid.value,
username: inputFields.username.value,
key: inputFields.key.value
};
// 添加JWT到请求头
const accessToken = sessionStorage.getItem('access_token'); // 假设已经存在sessionStorage中
const headers = {
'Content-Type': 'application/json',
Authorization: `Bearer ${accessToken}`, // 使用Bearer前缀加上JWT
};
try {
const response = await fetch('http://192.168.2.106:5000/login', {
method: 'POST',
headers: headers,
body: JSON.stringify(formData),
});
if (response.ok) {
const data = await response.json();
if (data.status === 'success') {
window.location.href = '/login/databasequery';
} else {
throw new Error(data.message);
}
} else {
throw new Error('Login Failed');
}
} catch (error) {
console.error('There was a problem with the fetch operation:', error);
}
}
});
// ...其他验证和处理代码
</script>
```
这里假设你在用户登录后成功获取到JWT并将其保存在`sessionStorage`(可以替换为你实际的存储方式)。然后在每次API请求中,从`sessionStorage`中取出JWT并在请求头中设置。
相关问题:
1. 为什么选择在`sessionStorage`而不是localStorage存储JWT?
2. 如何防止CSRF攻击?
3. 当用户登出时,如何清除sessionStorage中的JWT?