Blazor's AuthorizeRouteView should allow for setting a different layout on the NotAuthorized content

[craigbrown]

Is your feature request related to a problem? Please describe.

• I want my app to use the default layout when the user is logged in, and a different layout when they are not logged in.
• (This is because my default layout contains sidebar and nav bar options which are only relevant for logged in users).
• However, the AuthorizeRouteView component only allows setting a DefaultLayout parameter. Using <LayoutView> inside the NotAuthorized parameter doesn't override this. (<LayoutView> does work if no DefaultLayout is set, but manually setting the layout on every page isn't ideal).
• This can be currently be worked around by building a custom RouteView, as described in this previous issue.
• However, this seems like a common problem. As well as the issue mentioned above, here's another issue requiring the same thing, but where the developer was having trouble with the custom RouteView solution. A similar thing is being asked in this recent StackOverflow post.

Describe the solution you'd like

I'd like to be able to manually specify the layout for the NotAuthorized content in an <AuthorizeRouteView>, possibly using a NotAuthorizedLayout parameter. e.g.

<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" NotAuthorizedLayout="@typeof(CustomLayout)">
    <NotAuthorized>
        <StartPage />
    </NotAuthorized>
</AuthorizeRouteView>

If there was also a AuthorizedLayout parameter, this could allow for more advanced customisation of the layout in the NotAuthorized content. e.g.

<!-- Use MainLayout when the user is authorized to view the page -->
<AuthorizeRouteView RouteData="@routeData" AuthorizedLayout="@typeof(MainLayout)">
    <NotAuthorized>
        @if (context.User.Identity?.IsAuthenticated != true)
        {
            <!-- Use CustomLayout if the user isn't logged in -->
            <LayoutView Layout="@typeof(CustomLayout)">
                <StartPage />
            </LayoutView>
        }
        else
        {
            <!-- Use ErrorLayout if the user is logged in, but not authorized -->
            <LayoutView Layout="@typeof(ErrorLayout)">
                <p role="alert">You are not authorized to access this resource.</p>
            </LayoutView>
        }
    </NotAuthorized>
</AuthorizeRouteView>

(This currently doesn't work, because the LayoutView doesn't override the DefaultLayout parameter.)

Additional context

Many apps will want to use a different layout before the user is logged in. I think this is a common enough scenario that it would be worth adding this functionality to make it easier. The custom RouteView workaround described in the issue above didn't quite work for me; I needed to copy the entire source code for AuthorizeRouteView and change the part which forces the DefaultLayout for the NotAuthorized routes. This solution works fine, although achieving this does seem more complicated than it needs to be.

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[SteveSandersonMS]

@craigbrown Is it possible that the behavior you're looking for could be achieved by putting an AuthorizeView around this logic to control this?

1. You could either use the AuthorizeView inside your layout to vary its output (e.g., sidebar menus) based on whether the user is logged in
2. Or you could wrap an AuthorizeView around the whole Router to set a completely different default layout based on the auth state. Example:

@* This file is App.razor *@

<CascadingAuthenticationState>
    <AuthorizeView>
        <Authorized>
            @RouterWithLayout(typeof(LoggedInLayout))
        </Authorized>
        <NotAuthorized>
            @RouterWithLayout(typeof(LoggedOutLayout))
        </NotAuthorized>
    </AuthorizeView>
</CascadingAuthenticationState>

@code {
    RenderFragment RouterWithLayout(Type layoutType) => __builder =>
    {
        <Router AppAssembly="@typeof(Program).Assembly">
            <Found Context="routeData">
                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@layoutType" />
                <FocusOnNavigate RouteData="@routeData" Selector="h1" />
            </Found>
            <NotFound>
                <PageTitle>Not found</PageTitle>
                <LayoutView Layout="@layoutType">
                    <p>Sorry, there's nothing at this address.</p>
                </LayoutView>
            </NotFound>
        </Router>
    };
}

Hi @craigbrown. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[craigbrown]

Thank you @SteveSandersonMS. I tried both suggestions - they both work great and do exactly what I need. I will go with the first suggestion as that seems a bit simpler. Much appreciated. I'll close this issue now.