How to show log in pages if not authenticated?

Viewed 124

I am using ASP.NET Core 5 Blazor server-side. Assume port was 5011, as you know, log in page is

https://localhost:5011/Identity/Account/Login

When run app, or press F5 for debugging, entry point is

https://localhost:5011

For checking authentication in web-app, I use something like these

File MainLayout.razor

@inherits LayoutComponentBase
@implements IDisposable

@inject Microsoft.AspNetCore.Components.NavigationManager NavigationManager
@inject IJSRuntime JSRuntime

@using Microsoft.JSInterop;
<AuthorizeView>
    <Authorized>


<div class="sidebar">
    <div class="top-row logo-container pl-4 navbar-dark bg-light text-body">
        <button class="navbar-toggler" @onclick="@ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <span class="logo-image" />
        @*<div class="@($"bg-light text-dark d-inline-block theme-settings { ThemeSwitcherShown }")">
                <a class="nav-item nav-link" @onclick="@ToggleThemeSwitcherPanel" href="javascript:void(0);">
                    <span class="demo-theme-icon"></span>
                </a>
            </div>*@
    </div>
    <div class="@NavMenuCssClass">
        <NavMenu />
    </div>
</div>

<div class="main">
    <div class="top-row bg-light text-body px-4" id="navbar">
        <div class="logo">
            <h5 class="caption">NumBooks</h5>
        </div>
        <div class="@($"theme-settings { ThemeSwitcherShown }")">
            <a class="nav-item nav-link" @onclick="@ToggleThemeSwitcherPanel" href="javascript:void(0);">
                <span class="demo-theme-icon"></span>
            </a>
        </div>
    </div>
    <div class="content px-4">
        @Body
    </div>
</div>


<ThemeSwitcher @bind-Shown="@ThemeSwitcherShown"></ThemeSwitcher>
    </Authorized>
        <NotAuthorized>
             <a href="/Identity/Account/Login">Log in</a>
        </NotAuthorized>

</AuthorizeView>

@*@if(!Context.User.Identity.IsAuthenticated) 
{
    <a href="/Identity/Account/Login">Log in</a>
}*@


@code {
    string NavMenuCssClass { get; set; } = "";

    void ToggleNavMenu()
    {
        NavMenuCssClass = string.IsNullOrEmpty(NavMenuCssClass) || NavMenuCssClass.Contains("d-none") ? "d-block d-xl-none" : "d-none d-xl-flex";
        ThemeSwitcherShown = false;
    }

    bool themeSwitcherShown = false;
    bool ThemeSwitcherShown
    {
        get => themeSwitcherShown;
        set
        {
            themeSwitcherShown = value;
            InvokeAsync(StateHasChanged);
        }
    }

    void ToggleThemeSwitcherPanel()
    {
        ThemeSwitcherShown = !ThemeSwitcherShown;
    }

    string UriFragment { get; set; } = "";

    void OnLocationChanged(object sender, LocationChangedEventArgs args)
    {
        if (!string.IsNullOrEmpty(NavMenuCssClass))
        {
            NavMenuCssClass = "";
            InvokeAsync(StateHasChanged);
        }
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        NavigationManager.LocationChanged += OnLocationChanged;
    }

    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            JSRuntime.InvokeAsync<string>("ScrollToTarget");
        }
        return base.OnAfterRenderAsync(firstRender);
    }

    void IDisposable.Dispose()
    {
        NavigationManager.LocationChanged -= OnLocationChanged;
    }
}

Let's focus at these lines

<AuthorizeView>

    <Authorized>
        @* web-app for authenticated user(s). *@
    </Authorized>

    <NotAuthorized>
         @* Press text link to go to log-in page. *@
        <a href="/Identity/Account/Login">Log in</a>
    </NotAuthorized>
</AuthorizeView>

Then, when web-app run, I press button Log in to go to https://localhost:5011/Identity/Account/Login if not authenticated. This solution is really not good. I want show Login page when user not authenticated, how to archive that?

enter image description here

enter image description here

0 Answers
Related