Blazor WebAssembly. Add Authorize attribute at layout level

Question

I started from a visual studio template, a new Blazor WebAssembly with authentication and web API as the server-side.

My problem there is to protect all the pages and not just some pages. I tried to add :

@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]

to the MainLayout instead of all pages but without any luck. I wanted to do that because I'm writing an admin and I don't want people to see the layout at all if there are not connected

score 14 · Accepted Answer · answered Aug 13 '20 at 03:29

I wanted to do that because I'm writing an admin and I don't want people to see the layout at all if there are not connected

It can be understood that when the user is not logged in, they cannot enter any page, so we can jump to the login page at this time,right?

If so, you can achieve it by the following steps:

First create a RedirectToLogin.razor page in the current blazor project.

In the OnInitializedAsync method of this page, by judging whether there is currently a user logged in, and if not, redirect to the Login page.

RedirectToLogin.razor:

@inject NavigationManager Navigation
@code {
    [CascadingParameter]
    private Task<AuthenticationState> AuthenticationStateTask { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var authenticationState = await AuthenticationStateTask;

        if (authenticationState?.User?.Identity is null || !authenticationState.User.Identity.IsAuthenticated)
        {
            Navigation.NavigateTo("Identity/Account/Login", true);
        }
    }
}

Then add the following code in App.razor to ensure that NotAuthorized will enter the RedirectToLogin.razor page:

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <RedirectToLogin />
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

Finally, in the MainLayout.razor page, a distinction is made between Authorized and NotAuthorized：

@inherits LayoutComponentBase
<AuthorizeView>
    <Authorized>
        <div class="sidebar">
            <NavMenu />
        </div>

        <div class="main">
            <div class="top-row px-4 auth">
                <LoginDisplay />
                <a href="https://learn.microsoft.com/aspnet/" target="_blank">About</a>
            </div>

            <div class="content px-4">
                @Body
            </div>
        </div>
    </Authorized>
    <NotAuthorized>
        <RedirectToLogin />
    </NotAuthorized>
</AuthorizeView>

Here is the test result:

Great, thanks a lot. I was not able to achieve it correctly, and I ended by wrapping inside a . It was quite working correctly, but I felt it was not the correct way. Moreover, it appends multiple time the returnUrl value — Dragouf, Aug 13 '20 at 20:57
I see that you used directly Identity/Account/Login. Why not create an intermediate view with like it's done in the default template? I notice it's the reason why it was failing on my side. If I use this intermediate page I get a blank page — Dragouf, Aug 14 '20 at 09:23
@Dragouf, In fact, when user are not logged in, you can define any page you want to jump to. The path I provided is the login page under identity. — LouraQ, Aug 14 '20 at 09:29
sure but since MainLayout is the default layout all pages will no be secured. I guess it's the reason why I get a blank page when I use a new page with component inside as it is in the example template of Visual Studio? — Dragouf, Aug 14 '20 at 10:49
For future devs taking this approach, create a dummy layout for the `Authentication` page and leave the default `RedirectToLogin` component, so you can use the IdentityServer config instead of hardcoding a login URL. — HMZ, Feb 09 '22 at 19:30

synergetic · Answer 2 · 2021-04-16T04:59:03.647

5

Putting @attribute [Authorize] in _Imports.razor seem to work. See this answer. The accepted answer may not work correctly, in case route is not found. You can use different public layout (not MainLayout) though.

edited Apr 16 '21 at 04:59

answered Apr 16 '21 at 04:34

synergetic

7,756
8
65
106

I have different issues with @attribute [Authorize] in _Imports.razor. I can't seem to set different layouts / pages for NotFound route, based on Authorized property. How did you solve your case in that regard? – That Marc Jul 23 '21 at 22:40

Blazor WebAssembly. Add Authorize attribute at layout level

2 Answers2