异步认证

此示例展示了如何为 htmx 实现异步认证令牌流程。

我们将使用的一种技术是利用 htmx:confirm 事件可以延迟请求这一事实。

我们首先有一个按钮，在检索到认证令牌之前不应发出请求：

  <button hx-post="/example" hx-target="next output">
    An htmx-Powered button
  </button>
  <output>
    --
  </output>

接下来，我们将添加一些脚本来处理 auth 承诺（由库返回）：

<script>
  // auth 是我们的认证系统返回的承诺

  // 等待认证令牌并将其存储在某处
  let authToken = null;
  auth.then((token) => {
    authToken = token
  })
  
  // 以认证令牌为条件限制 htmx 请求
  htmx.on("htmx:confirm", (e)=> {
    // 如果没有认证令牌
    if(authToken == null) {
      // 阻止常规请求发出
      e.preventDefault() 
      // 仅在 auth 承诺解析后发出请求
      auth.then(() => e.detail.issueRequest()) 
    }
  })

  // 将认证令牌作为请求头添加到请求中
  htmx.on("htmx:configRequest", (e)=> {
    e.detail.headers["AUTH"] = authToken
  })
</script>

在这里，我们使用了全局变量，但您可以使用 localStorage 或任何您喜欢的机制来将认证令牌传递给 htmx:configRequest 事件。

使用此代码后，htmx 将在 auth 承诺解析之前不会发出请求。