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

Question

I've created an app with Blazor WASM (.net 6) which is ASP.NET Core hosted with authentication.我已经使用 Blazor WASM (.net 6) 创建了一个应用程序，它是 ASP.NET 核心托管与身份验证。 When first accessing the app the user is presented with a login page and cannot get to the rest of the app until signed in.首次访问应用程序时，用户会看到一个登录页面，并且在登录之前无法访问应用程序的 rest。

I'm having a slight issue where when the app initially loads, it briefly shows the loading message before displaying a blank screen for a couple of seconds and then finally the login page.我有一个小问题，当应用程序最初加载时，它会短暂显示加载消息，然后显示空白屏幕几秒钟，然后最后显示登录页面。 I want to get rid of that blank screen that appears inbetween the 'loading...' and login and suspect it's something to do with the way I've adjusted the boilerplate code to force login before access.我想摆脱出现在“加载...”和登录之间的空白屏幕，并怀疑这与我调整样板代码以在访问前强制登录的方式有关。

This is my index.html:这是我的索引。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>

This is my App.razor:这是我的 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>

This is my Index.razor:这是我的 Index.razor：

@page "/"

@using TimesheetExpense.Client.Features.Dashboard

<PageTitle>Timesheet Expense</PageTitle>

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

I've tried setting up prerendering (which was a mission in itself because I'm using authentication and other services that needed setting up server side in order for it not to error) but this just cuts out the 'loading...' screen.我已经尝试设置预渲染（这本身就是一项任务，因为我正在使用身份验证和其他需要设置服务器端的服务才能使其不会出错）但这只是切断了“正在加载...”屏幕. The login page appears instantly, but then disappears for a couple of seconds (the blank screen returning) and then reappears.登录页面立即出现，然后消失几秒钟（返回空白屏幕），然后重新出现。

I've also tried adding <Authorizing></Authorizing> with a custom message in both my App.razor and Index.razor files to see if that displays instead of the blank screen but nothing happens.我还尝试在我的 App.razor 和 Index.razor 文件中添加带有自定义消息的<Authorizing></Authorizing> ，以查看是否显示该消息而不是空白屏幕，但没有任何反应。

Answer 1

Try with this App.razor code:试试这个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