Blazor stop main layout rendering when not authenticated
How do I go about displaying a spinner on the whole page rather than having the contents of the MainLayout rendering when the page is protected by an [authorised] attribute?
At the moment I get the Authorising text next to the nav menu for 3 seconds, then the app redirects for authenication.
Adding the following to the imports.razor file breaks the entire flow. It fails to auth and shows a white screen
imports.razor file:
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
MainLayout.cs
@inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4 auth">
<LoginDisplay />
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</main>
homepage
@page "/"
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
<div class="alert alert-warning" role="alert">
test
details in <code>Program.cs</code>
</div>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
Solution 1:
Check out your App.razor
. Is it using the AuthorizeRouteView
component?
This is what it should look like.
<CascadingAuthenticationState>
<Router AppAssembly="@typeof(App).Assembly" PreferExactMatches="@true">
<Found Context="routeData">
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
<Authorizing><h3>Trying to authorize you.</h3></Authorizing>
<NotAuthorized><h3>Sorry mate, you can't go here!</h3></NotAuthorized>
</AuthorizeRouteView>
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</CascadingAuthenticationState>