从 blazor .NET 8 中的子组件更新 MainLayout

Question

我曾经在之前的 Blazor 项目中使用自定义方法来授权用户，如下所示：

主布局

@if(AppState.Me == null)
{
 <LoginView RefreshLayout=this.StateHasChanged />
}
else
{
 @Body
}
@code{
 [Inject]
 private AppStateManager AppState {get;set;}
}

登录查看

<button @onclick=LoginSubmit>Login</button>
@code{
 [Parameter]
 public Action RefreshLayout {get; set;}
 [Inject]
 private AppStateManager AppState {get;set;}
 private void LoginSubmit()
 {
    AppState.Me = GetUserFromStorage(); //Login method
    RefreshLayout();
 }
}

此方法适用于 Blazor .NET 7 及之前的版本。在 .NET 8 中，当我使用全局自动渲染模式时，它不起作用，因为 MainLayout 是静态页面。

我尝试为 LoginView 创建一个路由和另一个空布局，并在用户未经授权时导航到它，但 AppState.Me 在 MainLayout 中始终为 null，因为它又是一个静态页面 那么如何在不使用内置身份验证的情况下实现这个方法

Answer 1

您可以尝试

CascadingValue

传递值，认证逻辑需要更多步骤。

1.在全局自动渲染项目的两个program.cs中

builder.Services.AddScoped<AppStateManager>()

2.主布局

@inherits LayoutComponentBase
@inject AppStateManager AppState
@using BlazorApp3.Client.Pages

<CascadingValue Value="AppState" IsFixed="false">
    @if (AppState.Me == null)
    {
        ...
    }
    else
    {
        ...
    }
</CascadingValue>

@code {
    protected override void OnInitialized()
    {
        AppState.OnChange += StateHasChanged;
    }

    public void Dispose()
    {
        AppState.OnChange -= StateHasChanged;
    }
}

3.登录查看

@page "/loginview"

<PageTitle>LoginView</PageTitle>

<button class="btn btn-primary" @onclick="LoginSubmit">Login</button>

@code {

    [Inject] AppStateManager AppState { get; set; }
    [Inject] NavigationManager NavigationManager { get; set; }

    private void LoginSubmit()
    {
        //Or your auth and login logic, here to simply show
        AppState.Me = "UserPassed";
        AppState.UserState();
        NavigationManager.NavigateTo("/index");
    }
}

4.应用程序状态管理器

public class AppStateManager
{
    public string? Me { get; set; } = null;

    public event Action OnChange;

    public void UserState() => OnChange?.Invoke();
}