關於托管 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