Arhn - архитектура программирования

Создание пользовательского компонента Blazor

Я начинаю с некоторой забавы 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;

  • Разве ваши общедоступные свойства не нуждаются в аннотации [Parameter]? 22.12.2020
  • Вот в чем проблема. 23.12.2020

Ответы:


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

Вам также следует ознакомиться с политиками .

22.12.2020
  • спасибо, я должен изучить этот aspNetCore MenuItem! 23.12.2020
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..