如何更改刷新 Blazor PWA 应用程序时出现的“正在授权...”消息？

Posted 2023-03-27

【中文标题】如何更改刷新 Blazor PWA 应用程序时出现的“正在授权...”消息？

【英文标题】：How do I change the "Authorising..." message that appears when a Blazor PWA application is being refreshed?

【发布时间】：2021-05-24 09:47:16

【问题描述】：

当使用浏览器刷新刷新 ASP 网络托管的 BLAZOR 渐进式 Web 应用程序时，PWA 应用程序执行身份验证往返。在此时间跨度内，主要内容 div 显示文本：“授权...”。这个消息是从哪里来的？我的目标是与此消息一起显示微调框，以便用户体验动画。以下是我所知道的：

最初的“正在加载...”消息显示在 wwwroot 的索引页面中。 对于每个AutherizeView，授权部分可用于显示自定义消息。

但我无法找到默认“授权...”消息的来源。

【参考方案1】：

有两个地方需要你的意图。

首先在您的App.razor 中。 AuthorizeRouteView 有一个名为Authorizing 的属性，您可以在其中添加要在授权期间显示的任何RenderFragement。 Here 是设置Authorizing... 的行。

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <Authorizing>
                    <span>Your spinner goes here</span>
                </Authorizing>
                <NotAuthorized>
                    @if (!context.User.Identity.IsAuthenticated)
                    
                        <RedirectToLogin />
                    
                    else
                    
                        <p>You are not authorized to access this resource.</p>
                    
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

如果您使用默认模板创建了应用程序，您应该会看到 AuthenticationPage。此页面有路由@page "/authentication/action"。

这个页面内容看起来像

@page "/authentication/action"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" />

@code
    [Parameter] public string Action  get; set; 

您可以通过添加相应的RenderFragments来更改整个模板，可以找到here

这是一个示例，其中每个片段都有一个非默认值

@page "/authentication/action"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action">
    <LoggingIn>
        <span>LoggingIn</span>
    </LoggingIn>
    <Registering>
        <span>Registering</span>
    </Registering>
    <Registering>
        <span>LoggingIn</span>
    </Registering>
    <UserProfile>
        <span>UserProfile is loaded....</span>
    </UserProfile>
    <CompletingLoggingIn>
        <span>CompletingLoggingIn</span>
    </CompletingLoggingIn>
    <LogInFailed>
        <span>Login failed. Reason: @context</span>
    </LogInFailed>
    <LogOut>
        <span>Logout from the application</span>
    </LogOut>
    <LogOut>
        <span>CompletingLogOut</span>
    </LogOut>
    <LogOutFailed>
        <span>Logout failed. Reason: @context</span>
    </LogOutFailed>
    <LogOut>
        <span>LogOutSucceeded</span>
    </LogOut>
</RemoteAuthenticatorView>

@code
    [Parameter] public string Action  get; set; 

【讨论】：

Authorizing of AuthorizeRouteView in App.razor 工作得很好。谢谢@just-the-benno

这是我的荣幸

我可以删除授权页面吗？因为当我在不需要授权的登录页面时它会飞溅