Blazor Web程序集在布局级别添加授权属性

问题描述

我从Visual Studio模板开始，这是一个新的Blazor WebAssembly，具有身份验证和Web API作为服务器端。

我的问题是要保护所有页面，而不仅仅是某些页面。我尝试添加：

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

移至MainLayout而不是所有页面，但没有任何运气。 我之所以想这样做，是因为我正在写一个管理员，并且我不希望人们在没有连接的情况下完全看到布局

解决方法

我想这样做是因为我正在写管理员，但我不想 人们在没有连接的情况下完全可以看到布局

可以理解，当用户未登录时，他们无法进入任何页面，因此我们可以jump to the login page，对吗？

如果是这样，则可以通过以下步骤实现它：

• 首先在当前目录中创建一个 RedirectToLogin.razor 页面 项目。

  在此页面的OnInitializedAsync方法中，通过判断是否 当前有一个用户登录，如果没有，则重定向到 Login页。

  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);
          }
      }
  }
  

• 然后在 App.razor 中添加以下代码，以确保 NotAuthorized将进入RedirectToLogin.razor页面：

  <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>
  

• 最后，在 MainLayout.razor 页面中，进行区分 在授权和未授权之间：

  @inherits LayoutComponentBase
  <AuthorizeView>
      <Authorized>
          <div class="sidebar">
              <NavMenu />
          </div>
  
          <div class="main">
              <div class="top-row px-4 auth">
                  <LoginDisplay />
                  <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
              </div>
  
              <div class="content px-4">
                  @Body
              </div>
          </div>
      </Authorized>
      <NotAuthorized>
          <RedirectToLogin />
      </NotAuthorized>
  </AuthorizeView>
  

这是测试结果：

,

将@attribute [Authorize] 放入 _Imports.razor 似乎有效。见this answer。如果找不到路线，接受的答案可能无法正常工作。不过，您可以使用不同的公共布局（不是 MainLayout）。