在blazor菜单中更改导航项的可见性 [英] Change visibility of nav item in blazor menu

问题描述

我将Blazor与.NET Core 3.0结合使用. 当用户尚未登录时，我想在菜单中显示登录名.当他登录时，登录导航项应被隐藏.我该怎么办?

I'm using Blazor with .NET Core 3.0. I want to show a login in my menu, when the user isn't logged in yet. When he is logged in, then the login nav item should be hidden. How can I do this?

我通过使用异步任务更改了OnInitializedAsync方法，但这不是问题.对于第一次加载，它可以正常工作.但是然后我进入登录页面，登录并通过NavigationManager导航到主页，菜单将不会刷新".我该如何解决?

I changed the OnInitializedAsync method by using async Task, but this is not the problem. For the first load, it works correctly. But then i go to the login page, log me in and Navigate to the home page via NavigationManager, the menu will not be "refreshed". How can I solve this?

以下代码不起作用...

Following code is not working...

<div>
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        @if (!_isLoggedIn)
        {
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="login">
                    <span class="oi oi-person" aria-hidden="true"></span> <LocalizedString Key="NavMenuLogin" />
                </NavLink>
            </li>
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="licenseedit">
                    <span class="oi oi-spreadsheet" aria-hidden="true"></span> <LocalizedString Key="NavMenuRegistration" />
                </NavLink>
            </li>
        }
    </ul>
</div>

@code{

    private bool _isLoggedIn;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        await TokenExistAsync();
    }

    private async Task TokenExistAsync()
    {
        var retVal = await Http.GetStringAsync("api/Login/ExistToken");
        _isLoggedIn = retVal == "yes";
    }

}

推荐答案

我在上面更改了代码，但仍然无法正常工作

I changed my code above, but still not working

我想我了解您想要的...只要我是对的，以下是实现该目标的代码...您想刷新嵌入在MainLayout组件中的NavMenu组件的内容，从登录页面开始，对吧?

I think I understand what you want... The following is the code to achieve that, provided that I'm right... You want to refresh the content of the NavMenu component, which is embedded in the MainLayout component, from the login page, right?

您可以使用多种方法来实现此目的.以下解决方案基于应用程序状态模式.

You can use various methods to achieve this. The following solution is based on the App State Pattern.

首先，我们必须创建一个可以从NavMenu组件和Login组件访问的服务类.这是课程:

First off, we have to create a service class that can be accessed from both, the NavMenu component and the Login component. Here's the class:

public class AppState
{
    private bool _loggedIn;
    public event Action OnChange;
    public bool LoggedIn
    {
        get { return _loggedIn; }
        set {
            if (_loggedIn != value)
            {
                _loggedIn = value;
                NotifyStateChanged();
            }
        }
    }

    private void NotifyStateChanged() => OnChange?.Invoke();
}

此类定义了一个名为OnChange的事件委托，该委托应该封装将刷新NavMenu的方法.布尔属性LoggedIn的值更改时，将调用此委托.当用户登录后，LoggedIn属性的值可能会在登录"页面中更改，因此，将将此通知给该委托的任何订阅者(在我们的情况下为NavMenu).

This class defines an event delegate, named OnChange, which should encapsulate the method that will refresh the NavMenu. This delegate is invoked when the boolean property LoggedIn's value changes. The LoggedIn property's value may change in the Login page, when the user has been logged in, thus any subscriber to this delegate, in our case, the NavMenu, will be notified of this.

• @inject AppState AppState 注意上面将AppState注入到登录页面.将其放在页面顶部

• @inject AppState AppState Note the above inject the AppState to the Login Page. Put it at the top of the page

AppState.LoggedIn = true;该代码应放置在登录过程的末尾.这将启动OnChange委托的触发.

AppState.LoggedIn = true; that code should be place at the end of the log in procedure. This will initiate the triggering of the OnChange delegate.

• @inject AppState AppState
• @implements IDisposable

• @inject AppState AppState
• @implements IDisposable

*

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

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

现在，无论何时登录，AppState服务都会通知NavMenu组件重新呈现，以便登录链接不可见(不呈现)

Now, whenever you log in, the AppState service notifies the NavMenu component to re-render so that the login link is not visible (not rendered)

services.AddSingleton<AppState>();

这篇关于在blazor菜单中更改导航项的可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！