javascript - 如何将 FastAPI 身份验证与简单的前端（无框架）结合起来？

Question

几个小时以来，我一直在努力解决这个问题。YouTube 上的教程只涵盖了后端，他们使用 /docs 页面来展示它的工作原理，但我不知道如何将它翻译成前端......（前端/后端工作对我来说相对较新）。

FastAPI 有文档，他们在其中创建用于身份验证的后端：

https://fastapi.tiangolo.com/tutorial/security/simple-oauth2/

但是，如何使用 vanilla JS 或 Jquery 为它制作一个简单的前端？

只是听到一些关于这方面的想法会非常有帮助，因为我真的很想了解如何做到这一点，以便了解幕后发生的事情。

我的目标：

• 具有安全的路径（未经身份验证无法访问）
• 让用户在主页上输入用户名/密码（不安全）
• 然后在此之后，允许该用户可以访问其余页面。

伪代码

@app.get("/", response_class=HTMLResponse)
def form():
    return """
           <input type=password>
           <button onClick="submit()">       
           <script>
               request = xhr.setRequestHeader("Authorization", "Bearer MYTOKEN")
               // Here load secured page with these headers and access it.
           </script>    
           """

标签： javascriptauthenticationfrontendbackendfastapi