异步身份验证

此示例展示如何为 htmx 实现异步身份验证令牌流。

我们将在这里使用 htmx:confirm 事件实现延迟请求。

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

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

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

<script>
  // auth is a promise returned by our authentication system

  // await the auth token and store it somewhere
  let authToken = null;
  auth.then((token) => {
    authToken = token
  })

  // gate htmx requests on the auth token
  htmx.on("htmx:confirm", (e)=> {
    // if there is no auth token
    if(authToken == null) {
      // stop the regular request from being issued
      e.preventDefault() 
      // only issue it once the auth promise has resolved
      auth.then(() => e.detail.issueRequest()) 
    }
  })

  // add the auth token to the request as a header
  htmx.on("htmx:configRequest", (e)=> {
    e.detail.headers["AUTH"] = authToken
  })
</script>

这里我们使用一个全局变量，但你可以使用 localStorage 或者任何你想要的首选机制将身份验证令牌传达给 htmx:configRequest 事件。

有了此代码，htmx 将不会发出请求，直到 auth promise 得到正确解析。