为 public 位用户设置单独的布局

Question

在 Blazor WebAssembly 中，如何为登录用户和未登录用户设置不同的布局？

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
               <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                    <Authorizing>
                        <text> Authotizing ...</text>
                    </Authorizing>
                </AuthorizeRouteView>
          
           /*Something like this:*/
             <NotAuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(NotAuthorizedLayout)">
                    <Authorizing>
                        <text> Authotizing ...</text>
                    </Authorizing>
                    <NotAuthorized>
                        <text></text>
                    </NotAuthorized>
                </NotAuthorizeRouteView>
        </Found>
        <NotFound>

            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>

        </NotFound>
        
    </Router>

或者换句话说如何在 Blazor 中的不同布局之间切换？

Answer 1

目前 AuthorizeRouteView 上不存在第二个参数来为 'public' 用户设置特定布局。但是存在一个简单的解决方案，这就是您可以轻松应对这种情况的方法。

假设您有 2 种布局准备申请 auth 和 pub 用户：

AuthL.razor 对于授权用户。
PubL.razor public 个用户。

此时，您可以使用 AuthorizeView component 重写 MainLayout.razor 以设置正确的布局：

@inherits LayoutComponentBase
<AuthorizeView>
    <Authorized>
        <AuthL Body=@Body />            
    </Authorized>
    <NotAuthorized>
        <PubL Body=@Body />            
    </NotAuthorized>
</AuthorizeView>

就这些了。

为 public 位用户设置单独的布局

Set a separate layout for public users

c#

asp.net-core

blazor

blazor-webassembly