异步认证

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

我们将利用htmx:confirm事件可以延迟请求的特性。

首先我们有一个按钮，在获取认证令牌前不应发出请求：

  <button hx-post="/example" hx-target="next output">
    支持htmx的按钮
  </button>
  <output>
    --
  </output>

接下来我们将添加一些脚本与auth promise(由库返回)配合工作：

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

  // 等待auth令牌并将其存储在某个地方
  let authToken = null;
  auth.then((token) => {
    authToken = token
  })
  
  // 根据auth令牌控制htmx请求
  htmx.on("htmx:confirm", (e)=> {
    // 如果没有auth令牌
    if(authToken == null) {
      // 阻止常规请求发出
      e.preventDefault() 
      // 只在auth promise解析后发出请求
      auth.then(() => e.detail.issueRequest()) 
    }
  })

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

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

有了这段代码，htmx在auth promise解析前不会发出请求。