概要

Blazorで未ログイン時にログインページにリダイレクトする方法のメモ。
試しているのはClident-side版ですが、恐らくServer-side版でも動くと思われます。

背景等

Blazorではログイン時、未ログイン時に表示するページの認証制御機能などが標準機能として提供されています。(参照)

これらの機能を組み合わせて、認証時にのみアクセス可能なページを作成可能です。
良く紹介されている例として、認証が必要なページに未認証な状態でアクセスした場合に、下記のような未認証状態と表示させる例があります。

App.razor

<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
  <AuthorizeRouteView RouteData="@routeData" 
            DefaultLayout="@typeof(MainLayout)">
    <NotAuthorized>
    　<h1>未ログインのため表示できません。</h1>
    </NotAuthorized> 
 </AuthorizeRouteView >
</Found>
</Router>

Counter.razor

@page "/counter"
@attribute [Authorize]
@inherits CounterModel

<h1>Counter</h1>

<p>Current count: @CurrentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

App.razor内でAuthorizeRouteViewを定義し、未認証状態の場合にはNotAuthorized属性の内容を表示するようにします。

各ページのコンポーネントにAuthorize属性を付与することで、そのページは認証状態でしかアクセス不能になり、未認証時には上記のNotAuthorized属性の内容が表示されます。

しかしながら実際のウェブサイトでは、アクセス不可のページを表示するのではなく、ログインページにリダイレクトすることが多いと思います。
今回はその実現方法に関する紹介です。

実装方法

コンポーネントの作成

ログインページにリダイレクトするrazorコンポーネントを作成します。

RidirectToLogin.razor


@inject NavigationManager Navigation
@code {
    protected override void OnInitialized()
    {
        Navigation.NavigateTo("/Login", false);
    }
}

このコンポーネントはUI要素は持たず、コンポーネントの初期化処理(OnInitialized)でログインページへの遷移を行うだけの機能となります。

コンポーネントの配置

作成したRedirectToLoginコンポーネントをApp.razorに配置します。

App.razor

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
            <NotAuthorized>
                <RedirectToLogin />
            </NotAuthorized>
        </AuthorizeRouteView>
    </Found>
</Router>

これで、未認証時にはRidirectToLoginコンポーネントが実行され、ログインページにリダイレクトされます。

参考資料

https://docs.microsoft.com/ja-jp/aspnet/core/security/blazor/?view=aspnetcore-3.0&tabs=visual-studio
https://github.com/aspnet/AspNetCore/issues/13709
https://visualstudiomagazine.com/articles/2019/10/25/authorizing-users-in-blazor.aspx