當用戶在 Blazor 中未授權時，我想顯示多個帶有路由的頁面

Question

我有 App.razor 文件，如下所示：

@using MyFirstServerSideBlazor.Pages

<CascadingAuthenticationState>
   <Router AppAssembly="@typeof(App).Assembly">
      <Found Context="routeData">
         <AuthorizeView>
            <Authorized>
               <RouteView DefaultLayout="@typeof(MainHeaderLayout)" RouteData="@routeData" />
            </Authorized>
            <NotAuthorized>               
               <RouteView DefaultLayout="@typeof(LoginBody)" RouteData="@routeData" />
            </NotAuthorized>
         </AuthorizeView>        
      </Found>
      <NotFound>
         <PageTitle>Not found</PageTitle>
         <p role="alert">Sorry, there's nothing at this address.</p>
      </NotFound>
   </Router>
</CascadingAuthenticationState>

有什么方法可以為未經身份驗證的用戶指定要顯示的路線嗎？

假設我想讓未經身份驗證的用戶導航到 /Login 和 /SignUp 頁面。 我可能會在頁面上使用屬性或其他內容來指定只有經過身份驗證的用戶才能查看它們，但這似乎不方便。 我想知道有沒有更好的解決方案？

我也可以制作顯示不同頁面的組件，但我無法以這種方式更改 URI 路由，例如：

<NotAuthorized>               
   <ComponentForUnauthorizedUsers/>
</NotAuthorized>

然后在那個組件中有一些這樣的邏輯：

@using MyFirstServerSideBlazor.Componenets.Forms

@inject NavigationManager navigation

@{
   if (ShowLogin)
   {
      <PageTitle>Login</PageTitle>
   }
   else
   {
      <PageTitle>Sign Up</PageTitle>
   } 
}

@{
   if (ShowLogin)
   {
      <LoginForm ChangePageCallback="ChangeToSignUp"/>
   }
   else
   {
      <SignUpComponent ChangePageCallback="ChangeToLogin"/>
   }
}

@code{
   public bool ShowLogin { get; set; } = true;

   public void ChangeToSignUp()
   {
      ShowLogin = false;
      StateHasChanged();
   }    

   public void ChangeToLogin()
   {
      ShowLogin = true;
      StateHasChanged();
   }    
}

這似乎也是錯誤的，這樣我就不能使用路由。

Answer 1

這里有一些選擇，我希望我自己知道最好的一個。 這是我目前在我的應用程序中所做的：

App.Razor

@inject NavigationManager nav

<CascadingAuthenticationState>
    <AuthorizeView>
        <NotAuthorized>
            @{
                /* THE IMPORTANT PART TO REDIRECT AWAY FROM UNAUTHORIZED PAGES */
                if (new Uri(nav.Uri).AbsolutePath.StartsWith("/login") == false)
                    nav.NavigateTo($"/login/{System.Web.HttpUtility.UrlEncode(new Uri(nav.Uri).PathAndQuery)}");
            }
        </NotAuthorized>
    </AuthorizeView>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <Authorizing>
                    <RequestCardTemplate Title="Loading...">
                        <Body>
                            Loading...
                        </Body>
                    </RequestCardTemplate>
                </Authorizing>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <h1 class="text-center">Sorry, there's nothing at this address.</h1>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

確定哪些頁面需要身份驗證

如果頁面不需要授權，那么我就照常寫頁面。 如果確實需要授權，那么我將 Authorize 屬性放入MyPage.razor文件中。

@page "/mypage"
@attribute [Authorize]

@* Rest of page stuff *@

不同的組件

正如您所提到的，您可以根據用戶是否登錄（授權？）來顯示不同的鏈接或其他內容。

@* page stuff... *@

<AuthorizeView>
    <Authorized>
        <a href="/myaccount">My Account</a>
        <a href="/myposts">My Posts</a>
    </Authorized>
    <NotAuthorized>
        <a href="/login">Login</a>
        <a href="/signup">Signup</a>
    </NotAuthorized>
</AuthorizeView

@* more page stuff...

Answer 2

好的，在我的 App.Razor 中，通過一些調整，我設法讓它工作：

<CascadingAuthenticationState>
  <Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
      <AuthorizeView>
        <Authorized>
          <RouteView DefaultLayout="@typeof(MainHeaderLayout)" RouteData="@routeData" />
        </Authorized>
        <NotAuthorized>
          <UnauthorizedLayout/>
        </NotAuthorized>
      </AuthorizeView>        
    </Found>
    <NotFound>
      <PageTitle>Not found</PageTitle>
      <p role="alert">Sorry, there's nothing at this address.</p>
    </NotFound>
  </Router>
</CascadingAuthenticationState>

然后在 UnauthorizedLayout 我有這個：

@inherits LayoutComponentBase

<div class="MainBody">
  <UnauthorizedViewControler/>
</div>

在 UnauthorizedViewControler 組件中，我有這個邏輯：

@inject NavigationManager navigation

@{
  if (ShowLogin)
  {
    <LoginPage/>
  }
  else
  {
    <SignUpPage/>
  }
}

@code{
  public bool ShowLogin { get; set; } = true;

  protected override void OnInitialized()
  {
    LocationChanged(null,null);
    navigation.LocationChanged += LocationChanged;
    base.OnInitialized();
  }

  void LocationChanged(object sender, LocationChangedEventArgs e)
  {       
    if (navigation.Uri.Contains("/signup"))
    {
      ShowLogin = false;
    }
    else
    {
      ShowLogin = true;
    }

    StateHasChanged();
  }   
}

對於頁面本身：

// injects & usings...

@layout UnauthorizedLayout
@page "/Login" 

// HTML & Code...

,

// injects & usings...

@layout UnauthorizedLayout
@page "/SignUp" 

// HTML & Code...

這很有效，我有 /Login 和 /SignUp 的路由。

代碼，可以使用一些清理，但原則上這是可行的。

當用戶在 Blazor 中未授權時，我想顯示多個帶有路由的頁面

問題描述

有什么方法可以為未經身份驗證的用戶指定要顯示的路線嗎？

2 個解決方案

解決方案1
2 2022-08-04 16:58:18

解決方案2
0 2022-08-04 17:48:32

當用戶在 Blazor 中未授權時，我想顯示多個帶有路由的頁面

問題描述

有什么方法可以為未經身份驗證的用戶指定要顯示的路線嗎？

2 個解決方案

解決方案1 2 2022-08-04 16:58:18

解決方案2 0 2022-08-04 17:48:32

解決方案1
2 2022-08-04 16:58:18

解決方案2
0 2022-08-04 17:48:32