How to change my NavMenu after user Login?-CodePudding

Hello I am stuck on this problem today.

I have a web interface where you can log in.

See picture:

On the left side I have my navmenu with the different choices. After the user has logged in I want the navmenu to change and show other menu items (change password, change email).

The problem is that with blazor the navmenu is always applied to all pages.

Here is my NavMenu.razor

<div  @onclick="ToggleNavMenu">
<nav >
    <div >
        <NavLink  href="" Match="NavLinkMatch.All">
            <span  aria-hidden="true"></span> Home
        </NavLink>
    </div>
    <div >
        <NavLink  href="login">
            <span  aria-hidden="true"></span> Login
        </NavLink>
    </div>
    <div >
        <NavLink  href="register">
            <span  aria-hidden="true"></span> Registrieren
        </NavLink>
    </div>
    <div >
        <NavLink  href="fetchdata">
            <span  aria-hidden="true"></span> Email Prüfen
        </NavLink>
    </div>
    <div >
        <NavLink  href="fetchdata">
            <span  aria-hidden="true"></span> Passwort Vergessen
        </NavLink>
    </div>
</nav>

How do I make it so that my page gets its own navmenu after login and the existing one does not change?

Here is my html part of my login page

<html>
<h1 >Login</h1>
<br/>
<div >
    <RadzenCard >
        <div >
            <div  style="">
                <h3 style="margin-top:3%; margin-left:30px;">Benutzername</h3>
            </div>
            <div >
                <RadzenTextBox @bind-Value=@_username ></RadzenTextBox>
                <p [email protected] >Ungültige Email Adresse</p>
                <p [email protected] >Bitte Email Adresse eingeben</p>
            </div>
        </div>
        <br/>
        <div >
            <div >
                <h3 style="margin-top:3%; margin-left:30px; ">Passwort</h3>
            </div>
            <div >
                <RadzenPassword  @bind-Value=@_password ></RadzenPassword>
                <p [email protected] >Bitte Passwort eingeben</p>
                <p [email protected] >Benutzername oder Passwort falsch</p>
                <p [email protected]  >Zu viele Anfragen mit einem falschen Passwort</p>
                <br/>
                 <p >@_loginErrorMessages</p>
                <p hidden=@_logInFailed >Erfolgreich</p>
            </div>
        </div>
    </RadzenCard>
    <RadzenButton Click=@OnLogin  ButtonType="ButtonType.Submit" Text="Login"></RadzenButton>
</div>

Thanks for all Answers If you need any more infos just let me Know ;P

CodePudding user response：

You use <AuthorizeView> to display differing content depending on the user's authorization status. This is called authorization.

For authenticated users, you can display content specific to them inside the <Authorized>.
If user is not logged in and you want to show content only of unathorized users, place the content inside <NotAuthorized> element.

To enable authorization in your pages you need to enable authentication state in App.razor

App.razor:

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView 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>

Then you need to update your NavMenu to show links accordingly, for example when a user is not logged in, show the login and registration menu but not email or password menu because those last 2 menus I assume are for authenticated users only.

NavMenu.razor

<div >
    <div >
        <a  href="">BlazorApp1</a>
        <button title="Navigation menu"  @onclick="ToggleNavMenu">
            <span ></span>
        </button>
    </div>
</div>

<div  @onclick="ToggleNavMenu">
    <nav >
        <div >
            <NavLink  href="" Match="NavLinkMatch.All">
                <span  aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <AuthorizeView>
            <NotAuthorized>
                <div >
                    <NavLink  href="login">
                        <span  aria-hidden="true"></span> Login
                    </NavLink>
                </div>
                <div >
                    <NavLink  href="register">
                        <span  aria-hidden="true"></span> Registrieren
                    </NavLink>
                </div>
            </NotAuthorized>
        </AuthorizeView>
        <AuthorizeView>
            <Authorized>
                <div >
                    <NavLink  href="fetchdata">
                        <span  aria-hidden="true"></span> Email Prüfen
                    </NavLink>
                </div>
                <div >
                    <NavLink  href="fetchdata">
                        <span  aria-hidden="true"></span> Passwort Vergessen
                    </NavLink>
                </div>
            </Authorized>
        </AuthorizeView>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

Output:

CodePudding user response：

You are looking for AuthorizeView Component. For details see documentation.

Basically you can have NavMenu.razor like this:

<AuthorizeView>
    <Authorized>
        <AuthorizedMenu />
    </Authorized>
    <NotAuthorized>
        <NotAuthorizedMenu />
    </NotAuthorized>
</AuthorizeView>

with your current code being moved to the new NotAuthorizedMenu.razor component.

This should work, but I'm not at my VS atm to test it fully. So some changes might be needed.

Please note (from documentation):

The AuthorizeView component can be used in the NavMenu component (Shared/NavMenu.razor) to display a NavLink component (NavLink), but note that this approach only removes the list item from the rendered output. It doesn't prevent the user from navigating to the component.