Blazor 托管 - 在显示应用程序之前立即授权

Posted 2023-03-27

【中文标题】Blazor 托管 - 在显示应用程序之前立即授权

【英文标题】：Blazor hosted - authorize immediately before displaying application

【发布时间】：2020-08-17 07:02:44

【问题描述】：

在最初显示应用程序之前，任何人都可以帮助我让我的托管 Blazor 应用程序（客户端、服务器和共享）立即请求登录。我想要用户在访问应用程序之前必须登录的体验。

我的出发点是带有 Api 授权（个人用户帐户）的 Blazor Webassembly（托管）模板

在用户请求具有Authorize 属性的特定操作/页面之前，在服务器端操作或客户端 Razor 页面上使用 Authorize 属性不会启动身份验证流程。在第一次显示应用程序之前，我将如何首先启动授权流程？

我相信这对于比我更精明的人来说是可能的，甚至是微不足道的。谁能给我一个正确的方向，好吗？

【参考方案1】：

我创建了一个控件 RedirectToLogin.razor

@inject NavigationManager Navigation
@code 
    protected override void OnInitialized()
    
        String thisPage = Navigation.Uri.Replace(Navigation.BaseUri, "~/");
        Navigation.NavigateTo($"Identity/Account/Login?returnUrl=thisPage");
        base.OnInitialized();
    

然后将其插入到mainlayout.razor中

<div class="container-fluid">
 <AuthorizeView>
        <Authorized>
            <NavigationLogger />
            <ContextMenuMouseClick>
                <MenuTopBar />
                <NavMenu />
                <SubPageContainer>
                    @Body
                </SubPageContainer>
            </ContextMenuMouseClick>
        </Authorized>
        <NotAuthorized>
            <RedirectToLogin />
        </NotAuthorized>
</AuthorizeView>
</div>

因此，当布局加载并处于未授权状态时，它将重定向到登录页面，授权后将返回它尝试访问的页面。

希望这会有所帮助。

【讨论】：

谢谢！我得到了这个工作。开箱即用的 Blazor 托管客户端模板已创建 RedirectToLogin.razor 控件。但是，与您的不同，默认 RediriectToLogin 重定向到页面 Authentication.razor，该页面也由模板提供。我想保留它，因此必须添加一个新的空布局以供 Authentication.razor 页面使用。否则身份验证页面将再次加载 MainLayout.razor 和 RedirectToLogin 并关闭它进入一个愚蠢的循环:-) 我在这次冒险中更进一步，感谢您的帮助！

OnInitialized 引发 NavigationException。为了修复它，我使用了 OnAfterRenderedAsync() 方法。

【参考方案2】：

Blazor 客户端从 wwwroot 中的静态 index.html 引导。在 Server 项目中，这被映射到 Startup.cs 中的端点，基本上是 Razor 页面或控制器未使用的所有端点：

app.UseEndpoints(endpoints =>

    endpoints.MapRazorPages();
    endpoints.MapControllers();
    endpoints.MapFallbackToFile("index.html");
);

对于您的场景：

在服务器中创建一个新布局，比如 _LayoutBlazor.cshtml

从客户端重新创建index.html 的内容。请注意，客户端的 _framework 文件会在构建时复制到服务器 wwwroot： ：

<app>Loading...</app>

<script src="@Href("~/_framework/blazor.webassembly.js")"></script>

创建一个新的 Razor 页面并在其上放置“授权”标签并使用 _LayoutBlazor。

从 Startup.cs 中删除 endpoints.MapFallbackToFile("index.html");

Mark Gould 在这里创建了一个概念证明：RazorBlazor