授权需要类型为 Task<AuthenticationState> 的级联参数。考虑使用 CascadingAuthenticationState 来提供此

Question

我有一个使用个人帐户设置的 Blazor 服务器端项目。我搭建了 AspNet.Core.Identity 页面，并希望通过使用<component>标签助手在其中一个 razor 页面中使用 Blazor 组件。

我的剃刀页面：

@page
@using SenseNet.Pages
@model WalletModel
@{
    ViewData["Title"] = "Wallet Data";
    ViewData["ActivePage"] = "WalletData";
}
@{
    Layout = "_Layout.cshtml";
}
<h3>@ViewData["Title"]</h3>
<component type="typeof(Counter)" render-mode="ServerPrerendered" />

我的 Counter Blazor 组件：

@page "/counter"

<PageTitle>Counter</PageTitle>
<h1>Counter</h1>

<AuthorizeView Policy="TwoFactorEnabled">
    <h1>Hello, @context.User.Identity.Name!</h1>
    <p>You can only see this content if you're authenticated.</p>
</AuthorizeView>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    [CascadingParameter]
    private Task<AuthenticationState> authenticationStateTask { get; set; }

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

我在 App.razor 中的 CascadingAuthenticationState 设置：

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

当我加载页面时，我得到InvalidOperationException: Authorization requires a cascading parameter of type Task<AuthenticationState>. Consider using CascadingAuthenticationState to supply this.

我已尝试实施此处所述的故障排除解决方案：https://learn.microsoft.com/en-us/aspnet/core/blazor/security/ ?view=aspnetcore-6.0#expose-the-authentication-state-as- a-cascading-parameter但我不知所措，因为即使我遵循了上面代码中所示的级联参数建议，它也不会更改错误消息。当我从 Blazor 组件中删除标签时，它就起作用了。

我在这里做事的顺序是错误的吗？<AuthorizeView>如果组件要在 Razor 页面上呈现，是否可以使用标签？

Answer 1

它的工作原理是简单地包装<AuthorizeView>我的Counter.razor标签<CascadingAuthenticationState>

<CascadingAuthenticationState>
    <AuthorizeView Policy="TwoFactorEnabled">
        <h1>Hello, @context.User.Identity.Name!</h1>
        <p>You can only see this content if you're authenticated.</p>
    </AuthorizeView>
</CascadingAuthenticationState>

我仍然不明白为什么我必须在那里执行此操作，因为它已经在文件中完成App.razor，并且故障排除步骤特别指出：

该项目可能不是使用启用了身份验证的 Blazor 服务器模板创建的。包裹<CascadingAuthenticationState>UI 树的某些部分，例如在 App 组件中 ( App.razor)

因此，我认为这是因为我将其渲染为 Identity Razor 页面中的一个组件，并且App.razor在那里不使用/触发它，因此它永远无法传递它。

我也删除了，[CascadingParameter] private Task<AuthenticationState> authenticationStateTask { get; set; }因为它根本没有必要。