[Blazor] AuthorizeRouteView should support separate layouts for NotAuthorized state

[tossnet]

Problem Description

When using <AuthorizeRouteView /> with authentication in Blazor Server, there's a significant limitation: we cannot specify a different layout for the NotAuthorized state.

I use <AuthorizeView> in my pages and two layouts:

• <LoginLayout> for the login/logout pages.
• <MainLayout> for all pages in the application

The Issue: Unauthorized users briefly see the authorized layout

During authentication verification, the DefaultLayout (usually MainLayout) is displayed momentarily. It is the AuthorizeRouteView / Authorizing call that displays “Authorizing...”.

[Router.razor]

<Router AppAssembly="typeof(Program).Assembly">
	<Found Context="routeData">
		<AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)">
			<Authorizing>
				<span>Checking authorization...</span> @* hit during the login process *@
			</Authorizing>
			<NotAuthorized>
				<span>Here is your wonderful component</span>
			</NotAuthorized>
		</AuthorizeRouteView>
		<FocusOnNavigate RouteData="routeData" Selector="h1" />
	</Found>
</Router>

[LoginPage.razor]

@page "/"
@layout LoginLayout
...

This creates:

• A visual "flash" of the wrong layout during login
• If a have a code in OnAfterRender in MainLayout , it is executed once during the login process
• Poor user experience with layout switching

Proposed Solution

Add a NotAuthorizedLayout parameter to AuthorizeRouteView:

<Router AppAssembly="typeof(Program).Assembly">
	<Found Context="routeData">
		<AuthorizeRouteView RouteData="@routeData" 
						DefaultLayout="@typeof(MainLayout)"
						NotAuthorizedLayout="@typeof(LoginLayout)">
			<Authorizing>
				<span>Checking authorization...</span>
			</Authorizing>
			<NotAuthorized>
				<LoginPage />
			</NotAuthorized>
		</AuthorizeRouteView>
	<FocusOnNavigate RouteData="routeData" Selector="h1" />
	</Found>
</Router>

This would allow:

• Clean separation between authenticated and unauthenticated layouts
• No flash of wrong layout during authentication
• No need to add @layout directive to every page
• Better user experience

Related Issues

This problem was raised years ago in #39456 but only partial workarounds were suggested.

Current Workaround (Not Ideal)

The only "solution" currently is to:

1. Set LoginLayout as the default in <Router>
2. Add @layout MainLayout to every single page in the application

This is particularly problematic because:

• Most pages in the application use MainLayout (authenticated pages)
• Only a few pages use LoginLayout (login, register, forgot password)
• We're forced to add @layout MainLayout to the majority of pages instead of just specifying @layout LoginLayout on the few login-related pages
• This violates the DRY principle and makes maintenance harder