关于托管 Blazor WASM 的建议 - 当应用程序隐藏在登录页面后面时，初始加载前出现空白屏幕

Question

我已经使用 Blazor WASM (.net 6) 创建了一个应用程序，它是 ASP.NET 核心托管与身份验证。 首次访问应用程序时，用户会看到一个登录页面，并且在登录之前无法访问应用程序的 rest。

我有一个小问题，当应用程序最初加载时，它会短暂显示加载消息，然后显示空白屏幕几秒钟，然后最后显示登录页面。 我想摆脱出现在“加载...”和登录之间的空白屏幕，并怀疑这与我调整样板代码以在访问前强制登录的方式有关。

这是我的索引。html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>TimesheetExpense</title>
    <base href="/" />
    [various links/scripts]
</head>

<body>
    <div id="app">
        <div class="gradient">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <center><p class="text-white">Loading...</p></center>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
    <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>

</html>

这是我的 App.razor：

<CascadingAuthenticationState>
    <LoadingScreen>
        <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>
    </LoadingScreen>
</CascadingAuthenticationState>

这是我的 Index.razor：

@page "/"

@using TimesheetExpense.Client.Features.Dashboard

<PageTitle>Timesheet Expense</PageTitle>

<AuthorizeView>
    <Authorized>
        <Dashboard />
    </Authorized>
    <NotAuthorized>
        <Login />
    </NotAuthorized>
</AuthorizeView>

我已经尝试设置预渲染（这本身就是一项任务，因为我正在使用身份验证和其他需要设置服务器端的服务才能使其不会出错）但这只是切断了“正在加载...”屏幕. 登录页面立即出现，然后消失几秒钟（返回空白屏幕），然后重新出现。

我还尝试在我的 App.razor 和 Index.razor 文件中添加带有自定义消息的<Authorizing></Authorizing> ，以查看是否显示该消息而不是空白屏幕，但没有任何反应。

Answer 1

试试这个App.razor代码：

<Router AppAssembly="typeof(App).Assembly">
<Found Context="routeData">
    <AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
</Found>
<NotFound>
    <LayoutView Layout="typeof(MainLayout)">
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </LayoutView>
</NotFound>

关于托管 Blazor WASM 的建议 - 当应用程序隐藏在登录页面后面时，初始加载前出现空白屏幕

问题描述

1 个解决方案

解决方案1
0 2022-08-22 16:36:53

关于托管 Blazor WASM 的建议 - 当应用程序隐藏在登录页面后面时，初始加载前出现空白屏幕

问题描述

1 个解决方案

解决方案1 0 2022-08-22 16:36:53

解决方案1
0 2022-08-22 16:36:53