如何存储来自 Post-Response 的 JWT 并以 HTML 形式发送？

Posted 2023-03-08

【中文标题】如何存储来自 Post-Response 的 JWT 并以 HTML 形式发送？

【英文标题】：How to store JWT from Post-Response and send it in HTML-forms?

【发布时间】：2021-12-14 13:32:10

【问题描述】：

我想在用户登录后发送一个带有上传数据的 JWT。要获取它，我首先需要使用登录表单。当我单击 loginButton 时，调用函数 login() 以使用 formdata 发出 post 请求并等待响应以检索 JWT，但是在 login-function 的控制台中显示了一个错误，表明 CORS-Header 丢失“const json = 等待 data.json();”。但是，我可以在开发者控制台中看到令牌。

那么在使用上传表单时，需要将JWT作为authorauation header发送，上传的图片作为body。我想用普通的javascript来完成这个。这是我目前所拥有的：

<form id="loginform">
    <input type="text" id="username" name="username" placeholder="Username">
    <input type="password" id="password" name="password" placeholder="Password">
    <input id="loginButton" type="submit">
</form>
    
<form id="uploadform" enctype="multipart/form-data">
    <input type="file" id="images" name="images" multiple data-max="5" accept="image/jpg, image/jpeg, image/png" >
    <input id="sendImagesButton" type="submit">
</form>

<script type="text/javascript">
    
    const loginform = document.getElementById("loginform");
    loginform.addEventListener('submit', login);
    async function login(event)
        event.preventDefault();
        const data = await fetch("http://localhost:8000/api/login", 
            method: "POST",
            body: new FormData(this)
        );
        const json = await data.json();
        alert("test jwt retrieved");
        localStorage.setItem("token", json.access_token);
    
    const pdfform = document.getElementById("uploadform");
    pdfform.addEventListener('submit', convert_to_pdf);
    function convert_to_pdf(event)
        event.preventDefault();
        const res = await fetch("http://localhost:8000/api/convert_to_pdf", 
            method: "POST",
            headers: 
                'Content-Type': 'multipart/form-data',
                'Authorization': ' Bearer ' + localStorage.getItem("token")
            ,
            body: new FormData(this)
        );
    
</script>

【参考方案1】：

据我所见（不多）我可以说JWT的认证过程应该是：

发送 POST 请求，在令牌有效负载中包含您想要的数据 在服务器中创建令牌 发回令牌（应该是单个字符串，检查一下）

现在您可以在客户端访问令牌，您可以将其保存在本地或会话存储中（localStorage 或 sessionStorage）。

另一种选择是通过 cookie 在每个请求上发送令牌。这真的取决于你。

编辑：一旦您从登录请求中取回令牌并将其保存在存储中，您就可以在客户端代码中的任何位置使用它，但是通过更新表单将其发送到服务器的唯一方法（除了使用一个隐藏的输入）将是，在脚本中：

document.querySelector('#uploadform').addEventListener('submit', e => 
 // here you can access and manage your form value and also of course access the token value
 // to send it to client you can use something like axios so you would do
 e.preventDefault(); // that prevent the form to send its request
 // now send you request manually with your data for e.g.
 axios.post('http://localhost:8000/api/convert_to_pdf', /* your data here */)
)

【讨论】：

我已经实现了 JWT 流程，因为我在登录请求的响应消息中得到了它。我想知道如何存储它，并在我执行上传请求时发送它。但是感谢 localStorage 的提示。

刚刚更新我的答案，看看

【参考方案2】：

通过 POST 提交表单的默认浏览器操作是呈现响应内容。如果这不是您想要的行为，您将不得不手动执行来自 JS 的请求，例如通过使用onsubmit 属性。

我在 Mozilla developer site 上找到了相关教程。

此外，您还必须将 JWT 存储在某个地方，也许是 local-storage，当它读回并在下一个请求中将其添加到 Authorization 标头时，也是通过 JS 而不是标准浏览器提交完成的。

【讨论】：

您好，谢谢！我更新了我的问题，因为它不起作用。测试警报也没有显示