将 Blazor WebAssembly 应用程序隐藏在登录墙后面的最佳方法

Question

我需要构建一个 ASP.NET Core 托管的 Blazor Web assembly 应用程序 (.NET 6)，其中所有应用程序功能都隐藏在登录墙后面，但我不确定如何最好地实现这一点。对于身份验证/授权，我使用 ASP.NET Identity 和 IdentityServer。

到目前为止，我已经创建了一个名为的新 Razor 组件Login.razor，它仅包含一个触发内置身份验证过程的链接：

<a href="authentication/login">Log in</a>

该组件具有该@page指令"/"，因此它是用户访问应用程序时登陆的第一个“页面”。

这工作得很好，但是一旦用户成功登录，他们就会被重定向到返回 URL，作为 .NET 身份过程的一部分，在本例中，这是一个现在无用的登录页面。

我不想只替换身份页面中的返回 URL 并将用户重定向到另一个特定页面，因为我认为返回 URL 在向用户发送指向特定页面的链接的情况下非常有用。例如，如果我尝试在不先登录的情况下导航到 mywebsite.com/fetchdata 等受保护资源，它会触发 Blazor 附带的任何身份验证魔法，让用户登录，然后在用户登录后将其重定向到 /fetchdata成功地做到了。我想保留这个功能。

"/index"如果用户来自 Login.razor 组件，我需要做什么才能让服务器重定向到另一个页面（例如）？或者我只是以完全错误的方式处理这一切？非常感谢任何建议。

Answer 1

创建一个名为的新组件RedirectToLogin并添加以下代码：

@inject NavigationManager Navigation

@code {
    protected override void OnInitialized()
    {
        Navigation.NavigateTo($"authentication/login?returnUrl={Uri.EscapeDataString(Navigation.Uri)}");
    }
}

然后将你的更改App.razor为这样：

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    @if (context.User.Identity?.IsAuthenticated != true)
                    {
                        <RedirectToLogin />
                    }
                    else
                    {
                        <p role="alert">You are not authorized to access this resource.</p>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
            <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>

现在，当未经身份验证的用户尝试访问受保护的页面时，他将被自动重定向到authentication/login?returnUrl=....

文档