概要
Blazorで未ログイン時にログインページにリダイレクトする方法のメモ。
試しているのはClident-side版ですが、恐らくServer-side版でも動くと思われます。
背景等
Blazorではログイン時、未ログイン時に表示するページの認証制御機能などが標準機能として提供されています。(参照)
これらの機能を組み合わせて、認証時にのみアクセス可能なページを作成可能です。
良く紹介されている例として、認証が必要なページに未認証な状態でアクセスした場合に、下記のような未認証状態と表示させる例があります。
<RouterAppAssembly="@typeof(Program).Assembly"><FoundContext="routeData"><AuthorizeRouteViewRouteData="@routeData"DefaultLayout="@typeof(MainLayout)"><NotAuthorized> <h1>未ログインのため表示できません。</h1></NotAuthorized></AuthorizeRouteView></Found></Router>@page "/counter"
@attribute [Authorize]
@inherits CounterModel
<h1>Counter</h1><p>Current count: @CurrentCount</p><buttonclass="btn btn-primary"@onclick="IncrementCount">Click me</button>App.razor内でAuthorizeRouteViewを定義し、未認証状態の場合にはNotAuthorized属性の内容を表示するようにします。
各ページのコンポーネントにAuthorize属性を付与することで、そのページは認証状態でしかアクセス不能になり、未認証時には上記のNotAuthorized属性の内容が表示されます。
しかしながら実際のウェブサイトでは、アクセス不可のページを表示するのではなく、ログインページにリダイレクトすることが多いと思います。
今回はその実現方法に関する紹介です。
実装方法
コンポーネントの作成
ログインページにリダイレクトするrazorコンポーネントを作成します。
@injectNavigationManagerNavigation@code{protectedoverridevoidOnInitialized(){Navigation.NavigateTo("/Login",false);}}このコンポーネントはUI要素は持たず、コンポーネントの初期化処理(OnInitialized)でログインページへの遷移を行うだけの機能となります。
コンポーネントの配置
作成したRedirectToLoginコンポーネントをApp.razorに配置します。
<RouterAppAssembly="@typeof(Program).Assembly"><FoundContext="routeData"><AuthorizeRouteViewRouteData="@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