c# - 如何将 returnUrl 传递到 Blazor Server 应用程序中的登录页面？

Question

我有一个简单的 Blazor 服务器应用程序，其身份使用个人身份验证。我根据 VS 2019 标准 dotnet new 创建了应用程序模板。

在应用程序的某些部分，我想将用户引导到登录页面，同时传递 returnUrl范围。我尝试了以下代码变体来传递此参数( 计数器 是我要返回的页面):

NavigationManager.NavigateTo("Identity/Account/Login?returnUrl=counter", forceLoad: true);

NavigationManager.NavigateTo("Identity/Account/Login?returnUrl='/counter'", forceLoad: true);

NavigationManager.NavigateTo("Identity/Account/Login?returnUrl='./counter'", forceLoad: true);

NavigationManager.NavigateTo("Identity/Account/Login?returnUrl='~/counter'", forceLoad: true);

但是，通过所有这些，我收到一条错误消息，指出“URI 不是本地的”。错误信息是:

"InvalidOperationException: The supplied URL is not local. A URL with an absolute path is considered local if it does not have a host/authority part. URLs using virtual paths ('~/') are also local."

在这种情况下，谁能建议 returnUrl 参数的正确格式？有关更多背景信息，我在他的 blog post 中遵循 @iambacon 的建议(感谢 Colin!)。关于重定向到 Blazor 应用程序的登录页面。这是一篇很棒的文章，完成了我想要的部分内容:当用户未通过身份验证时重定向到登录。我只想添加在身份验证完成后返回该 URL 的额外功能。

Answer 1

"URI is not local".

为了解决这个...
请执行下列操作:

在 Pages 文件夹中创建一个名为 RedirectToLogin 的组件，代码如下:

RedirectToLogin.razor

@inject NavigationManager NavigationManager

@code{
  [Parameter]
  public string ReturnUrl {get; set;}
  protected override  void OnInitialized()
  {
        ReturnUrl = "~/" + ReturnUrl;
        NavigationManager.NavigateTo($"Identity/Account/Login?returnUrl={ReturnUrl}", 
           forceLoad:true);
  }
}

打开 App.razor 并将以下代码添加到 AuthorizeRouteView.NotAuthorized

<NotAuthorized>
@{
    var returnUrl = 
    NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
    <RedirectToLogin ReturnUrl="@returnUrl"/>
    
 }
</NotAuthorized>

还要在 App 组件的顶部注入(inject) NavigationManager，如下所示:

@inject NavigationManager NavigationManager

为了测试这一点，在 Fetchdata(或 Counter，如果你喜欢)组件页面的顶部添加 Authorize 属性的 @attribute 指令，如下所示: @attribute [Authorize]当未经身份验证的用户尝试访问 Fetchdata 页面时，将执行 AuthorizeRouteView.NotAuthorized 委托(delegate)属性，并呈现 RedirectToLogin 组件，并将其参数属性设置为当前 url。
更新
以下添加是为您的应用添加登录和注销按钮...

在 Shared 文件夹中创建一个名为 LoginDisplay.razor 的组件，并在其中添加以下代码:

     <AuthorizeView>
      <Authorized>
        <a href="Identity/Account/Manage">Hello, 
        @context.User.Identity.Name!</a>
        <form method="post" action="Identity/Account/LogOut">
            <button type="submit" class="nav-link btn btn-link">Log 
        out</button>
        </form>
      </Authorized>
         <NotAuthorized>
            <a href="Identity/Account/Register">Register</a>
            <a href="Identity/Account/Login">Log in</a>
         </NotAuthorized>
      </AuthorizeView>

在 MainLayout 组件中添加 LoginDisplay 元素，如下所示:

<div class="top-row px-4 auth">
    <LoginDisplay />
    <a href="https://docs.microsoft.com/aspnet/" 
         target="_blank">About</a>
</div>

运行您的应用程序并测试登录和注销按钮...