Authorization on Route

Blazor Server provides 2 different approaches to authorize users: AuthorizeRouteView and AuthorizeView. Both authorize users and provide their content according to their privilege.

This guide provides information to help you decide which type of authorization works best for your situation. It introduces how to use the AuthorizeRouteView, if you need information about AuthorizeView, see Authentication and authorization. It also summarizes the key differences between the 2 approaches.

You can download the example code used in this topic on GitHub.

Choosing an approach

AuthorizeRouteView and AuthorizeView authorize user and display content based on the user's privilege. Each approach offers different advantages.

• AuthorizeView performs authorization at the component level, meaning that you will have more control over this. You can display unauthorized and authorizing messages differently for different components.
• AuthorizeRouteView as the name suggested, it performs authorization on the route, meaning that you will have a consistent display unauthorized and authorizing messages on the entire website.

Key differences

The table below summarizes the key differences between AuthorizeRouteView and AuthorizeView.

Setting up the authorization

In order to have the authorization, you need to setup the AuthenticationStateProvider first, see Authentication and authorization. The next step is to replace the RouteView component with AuthorizeRouteView component in App.razor.

<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
            <NotAuthorized>
                You are not authorized.
            </NotAuthorized>
            <Authorizing>
                Authorizing in process...
            </Authorizing>
        </AuthorizeRouteView>
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

To do the authorization for a component, add the @attribute directive to use the Authorize attribute.

@attribute [Authorize]

If you don't specify any parameters then by default, Blazor Server will require the user to complete the authentication. To authorize the users by role or policy, simply pass it to the Authorize attribute like this.

@attribute [Authorize(Roles = "Admin,SuperAdmin", Policy = "CanBuyAlcohol")]