制作自定义Blazor组件

Question

我从一些Blazor的乐趣开始，我尝试的第一件事是将菜单项包装成自定义组件，以使导航更具可读性。

我尝试了一些类似的东西：

文件：Components\MenuItem.razor

<AuthorizeView Roles="@Roles">
<li class="nav-item px-3">
<NavLink class="nav-link" href="@Link">
<span class="oi oi-task" aria-hidden="true"></span> @Text
</NavLink>
</li>
</AuthorizeView>
@code {
public string Link { get; set; }
public string Text { get; set; }
public string Roles { get; set; }
}

但是，如果我在导航中使用组件而不是相同的内容，则在运行应用程序时不会加载任何内容。

在我的导航菜单中，添加以下

<VM.Web.Components.MenuItem Text="Approve user requests" Link="/users/pending-approval" Roles="ADMIN, CREW" />

停止加载页面(我没有看到任何错误(但是以下直接在导航菜单工作

<AuthorizeView Roles="ADMIN, CREW">
<li class="nav-item px-3">
<NavLink class="nav-link" href="/users/pending-approval">
<span class="oi oi-task" aria-hidden="true"></span> Approve user requests
</NavLink>
</li>
</AuthorizeView>

更新，问题是我错过了[参数]装饰，之后它就工作了

最终的组件代码看起来像这个

<AuthorizeView Roles="@Roles">
<li class="nav-item px-3">
<NavLink class="nav-link" href="@Link">
<span class="@SpanClasses" aria-hidden="true"></span> @Text
</NavLink>
</li>
</AuthorizeView>
@code {
[Parameter]
public string Link { get; set; }
[Parameter]
public string Text { get; set; }
[Parameter]
public string Roles { get; set; }
[Parameter]
public string SpanClasses { get; set; }
}

作为参考，身份验证模块由另一位程序员实现，其工作原理如下：(，其配置如下

builder.Services
.AddOidcAuthentication(options =>
{
builder.Configuration.Bind("oidc", options.ProviderOptions);
options.UserOptions.RoleClaim = "role";
options.AuthenticationPaths.LogInFailedPath = "/";
options.AuthenticationPaths.LogOutSucceededPath = "/";
options.AuthenticationPaths.LogOutCallbackPath = "/authentication/logout-callback";
})
.AddAccountClaimsPrincipalFactory<ArrayClaimsPrincipalFactory<RemoteUserAccount>>();
AuthorityConnection = builder.Configuration.GetSection("oidc:Authority").Value;

Answer 1

直接在导航菜单中工作

<AuthorizeView Roles="ADMIN, CREW">

告诉我您的角色正在传递给WebAssembly

我发现这在将菜单项作为数据传递时很有用。我需要迎合未经授权的人，我增加了角色。

如果任何用户以逗号分隔的格式到达时有多个角色，则也需要Enet提供的索赔工厂。

OptionalRolesAuthorizeView.razor

@if (string.IsNullOrWhiteSpace(Roles) && RequireAuthentication == false)
{
@ChildContent
}
else
{
<AuthorizeView Roles="@Roles">
@ChildContent
</AuthorizeView>
}
@code {
[Parameter]
public bool RequireAuthentication { get; set; }
[Parameter]
public string Roles { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
}

MenuItemView.razor

<OptionalRolesAuthorizeView RequireAuthentication="@Model.RequireAuthentication" Roles="@Model.Roles">
<li class="nav-item px-3">
<NavLink class="nav-link" href="@Model.Href" Match="@Model.Match">
<span class="@Model.IconClass" aria-hidden="true"></span> @Model.Label
</NavLink>
</li>
</OptionalRolesAuthorizeView>
@code {
[Parameter]
public MenuItem Model { get; set; }
}

MenuItem.cs

using Microsoft.AspNetCore.Components.Routing;
public class MenuItem
{
public string Label { get; set; }
public string Href { get; set; }
public string IconClass { get; set; }
public bool RequireAuthentication { get; set; }
public NavLinkMatch Match { get; set; }
public string Roles { get; set; }
}

你还应该看看政策。