Blazor サーバー側アプリからプログラムでログアウト

アプリケーションテンプレートのデフォルトログアウトメニュー項目の問題

認証を実装する Blazor サーバー側アプリを作成するとき、既定のアプリケーションテンプレートのサイド メニューには、ユーザーがサインアウトできるようにするログアウト メニュー項目があります。

デフォルトのログアウトのメニュー項目は、サーバー側で適切なサインアウトをさせるため必要な POST リクエストをユーザーが送信できるようにする送信ボタンを備えたフォームで実装されています：

    <form action="Account/Logout" method="post">
        <AntiforgeryToken />
        <input type="hidden" name="ReturnUrl" value="@currentUrl" />
        <button type="submit" class="nav-link">
            <span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true"></span> Logout
        </button>
    </form>

問題

問題のは、UI コンポーネント フレームワークを使用してアプリを構築するとき、ボタンコンポーネントがメニューコンポーネントの中で正常に表示されない(たとえば、メニュー項目の中にボタンが全幅ではなくまたは中央揃えではない)またはまったく表示されません！

プログラムでログアウト

ログアウトをプログラムで実装する解決策は、JavaScript を使用して HTML フォームを送信することです。

1. まず、生成されたページ上の JavaScript と対話できるようにするために、ページに JavaScript ランタイム インターフェイスを挿入する必要があります：

   @inject IJSRuntime JsRuntime
   

2. HTML フォームはそのままでまた使用しますが、ボタンを外します：

   <form action="Account/Logout" method="post" id="logoutForm">
       <AntiforgeryToken />
       <input type="hidden" name="ReturnUrl" value="@currentUrl" />
   </form>
   

3. ログアウトをトリガーするために Blazor コードから呼び出す JavaScript 関数を作成します：

   <script>
       window.triggerLogout = () => document.getElementById('logoutForm').submit();
   </script>
   

4. Razor ページのコード セクションで、ランタイムを使用して JavaScript 関数を呼び出す C# 関数を作成します：

   @code {
       // ...
       private async void TriggerLogout() => await JsRuntime.InvokeAsync<object>("triggerLogout");
   }
   

5. Razor ページから C# 関数を呼び出します。

それだけです。