Blazor - 在不同布局之间使用级联身份验证状态答案

【问题标题】：Blazor - Using Cascading Authentication State Between Different LayoutsBlazor - 在不同布局之间使用级联身份验证状态
【发布时间】：2020-07-18 23:31:03
【问题描述】：

我有一个 .NET Core 3.1 Blazor 项目，其中应用程序中有 3 个子文件夹，它们提供一个页面，每个页面的内容将使用 Three.JS 驱动 WebGL。

在我测试的第一个文件夹中，我创建了两个项目。第一个名为“_TestPage.cshtml”，另一个名为“Index.razor”。两个页面都包含以下@page 指令：

@page "/Applications/TestFolder1/Index"

_TestPage.cshtml 页面包含以下内容：

<!DOCTYPE html>
<html lang="en">
    <body>
        <app>
            <component type="typeof(App)" render-mode="Server" />
        </app>
    </body>
    <head>
        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>My Blazor App</title>

        <base href="/" />

        <script src="_framework/blazor.server.js"></script>
        <style type="text/css">
            body {
                background-color: red;
            }
        </style>
    </head>
</html>

Index.razor 页面还包含以下内容：

@layout EmptyLayout
@page "/Applications/Monitor/Index"

<AuthorizeView>
    <Authorized>
        <p style="color: black;">***I can not see this text either...***</p>
    </Authorized>
    <NotAuthorized>
        <RedirectNotAuthorizedAccess />
    </NotAuthorized>
</AuthorizeView>

但是，当应用程序启动时，我可以直接进入子文件夹中的索引页面，而无需登录。我的背景是纯红色，但没有看到任何呈现的文本，也没有被重定向到登录页面，因为我还没有登录。

当我不使用由 Visual Studio 创建的默认“MainLayout”组件并使用 @layout 指令覆盖剃须刀页面内的布局时，我需要做一些不同的事情来让级联身份验证状态工作吗?

【问题讨论】：

标签： authentication razor layout blazor

【解决方案1】：

我相信我可能已经解决了我的问题。似乎有两件事设置不正确。首先是我的“EmptyLayout”组件没有在其中定义“AuthroizeView”组件来处理未经身份验证的用户。第二个是我的“RedirectNotAuthorizedAccess”组件在使用“NavigationManager”重定向到登录页面时没有执行“forceLoad = true”。这会阻止登录页面显示并仍然显示来自我在原始帖子中的示例中的嵌套 CSTHML 布局的纯红色背景。

上面的 CSHTML 页面的代码保持不变，现在我的另外两个组件的代码如下：

Index.razor

@page "/Application/TestFolder1/Index"
@layout EmptyLayout

@code {

}

EmptyLayout.razor

@inherits LayoutComponentBase;

<AuthorizeView>
    <Authorized>
        <p style="color: green;">I can now see this text...</p>
    </Authorized>
    <NotAuthorized>
        <RedirectNotAuthorizedAccess />
    </NotAuthorized>
</AuthorizeView>

【讨论】：

【解决方案2】：

我已经解决了这个问题的示例方法，并且为我完美地工作，

使用Blazor authentication and authorization 来检测用户是否通过使用 JWT 或授权用户的任何流程来检测用户是否授权

更改用户身份验证或不使用GetAuthenticationStateAsync覆盖方法

我正在使用 JWT 检测用户登录是否成功

string token = await TokenAsync();
        ClaimsIdentity identity = await IsAuthenticated(token)
            ? new ClaimsIdentity(new[] { new Claim(ClaimTypes.Name, "mrfibuli"), "Fake authentication type") // true, auth
            : new ClaimsIdentity(); // false, no auth
        return new AuthenticationState(new ClaimsPrincipal(identity));

你可以使用link 总是正确的

那你可以更改 App.razor 以响应 AuthenticationStateProvider 服务

App.razor

    <CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeView>
                <Authorized>
                    <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
                </Authorized>
                <NotAuthorized>
                    <CascadingAuthenticationState>
                        <RedirectToLogin />
                    </CascadingAuthenticationState>
                </NotAuthorized>
            </AuthorizeView>
        </Found>
        <NotFound>
            <CascadingAuthenticationState>
                <LayoutView Layout="@typeof(EmptyLayout)">
                    <p>No Found</p>
                </LayoutView>
            </CascadingAuthenticationState>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

<RedirectToLogin />如果用户过期或没有身份验证，则为重定向登录创建一个

RedirectToLogin.razor

    @page "/NotAuthorized/RedirectToLogin"
    <iServicePayroll.Pages.Home.Login />

iServicePayroll.Pages.Home.Login我的登录页面

【讨论】：