vue.js - Phoenix / Elixir での csrf_token による認証

Question

フロントエンドが Vue.js で管理され、バックエンドが API の elixir/phoenix フレームワークで管理されるプロジェクトを行っています。csrf-token と JWT を使用してユーザーの認証を管理する必要があります。jwt 部分 ( https://hexdocs.pm/guardian/readme.html ) にガーディアン ライブラリを使用しており、現在 csrf_token 部分でブロックしています。

vue.js からログイン フォームを送信するときに jwt に入力し、ユーザーが接続されたときに返される csrf-token を生成したいと考えています。ドキュメントを読みましたが、html ページが phoenix によって生成されていない場合に csrf-token を実装する方法がわかりません。( https://hexdocs.pm/plug/Plug.CSRFProtection.html )

では、vue.js html ページで phoenix を使用して csrf-token の生成を管理するにはどうすればよいでしょうか?

接続に使用するルートは次のとおりです。

scope "/api", AuthTutorialPhoenixWeb do
    pipe_through(:api)

    post("/users/sign_in", SessionController, :new)
  end

そして、これは私のコントローラです:

defmodule AuthTutorialPhoenixWeb.SessionController do
  use AuthTutorialPhoenixWeb, :controller

  alias AuthTutorialPhoenix.Accounts
  alias AuthTutorialPhoenix.Authentication.Guardian

  action_fallback(AuthTutorialPhoenixWeb.FallbackController)

  # new session
  def new(conn, %{"email" => email, "password" => password}) do
    case Accounts.authenticate_user(email, password) do
      {:ok, user} ->
        # Lifetime Token of 15 minutes
        {:ok, access_token, _claims} =
          Guardian.encode_and_sign(user, %{}, token_type: "access", ttl: {15, :minute})

        {:ok, refresh_token, _claims} =
          Guardian.encode_and_sign(user, %{}, token_type: "refresh", ttl: {7, :day})

        conn
        |> put_resp_cookie("ruid", refresh_token)
        |> put_status(:created)
        |> render("token.json", access_token: access_token, user: user)

      {:error, :unauthorized} ->
        body = Jason.encode!(%{error: "unauthorized"})

        conn
        |> send_resp(401, body)
    end
  end
end