如何将ReturnUrl传递到Blazor Server应用程序的“登录"页面? [英] How do I pass returnUrl to Login page in Blazor Server application?

问题描述

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

I have a simple Blazor server application, with Identity using Individual Authentication. I created the app from the VS 2019 standard dotnet new template.

在应用程序的某些部分中，我希望在传递returnUrl参数的同时将用户定向到登录页面.我尝试了以下代码的变体来传递此参数(计数器是我要返回的页面):

In some parts of the app I would like to direct the user to the login page, while passing along a returnUrl parameter. I've tried the following variations of code to pass this parameter (counter is the page I want to return to):

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不在本地".错误消息是:

However, with all of these, I get an error message that the "URI is not local". Error message is:

"InvalidOperationException:提供的URL不是本地的.URL带有 如果绝对路径不包含绝对路径，则将其视为本地路径 主机/授权部分.使用虚拟路径('〜/')的URL也是本地的."

"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参数的正确格式吗?对于进一步的背景，我在他的

Can anyone suggest the proper formatting of the returnUrl parameter in this situation? For further background, I am following suggestions from @iambacon (thanks to Colin!), in his blog post about redirecting to the login page for Blazor apps. It's a great article and accomplishes part of what I want: redirect to login when the user is not authenticated. I would just like to add the extra feature of returning back to that URL after the auth is complete.

推荐答案

"URI不在本地".

"URI is not local".

要解决此问题...

执行以下操作:

1. 在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

Open App.razor and add the following code to AuthorizeRouteView.NotAuthorized

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

 }
</NotAuthorized>

也将如下所示的NavigationManager注入到App组件的顶部:

Also inject the NavigationManager at the top of the App component like this:

@inject NavigationManager NavigationManager

要对此进行测试，请在Fetchdata(或计数器"，如果您喜欢)组件页面的顶部，为Authorize属性添加@attribute指令，如下所示:@attribute [Authorize]当未经身份验证的用户尝试访问Fetchdata页面时，执行AuthorizeRouteView.NotAuthorized委托属性，并使用参数属性设置为当前url呈现RedirectToLogin组件.

To test this, at the top of the Fetchdata (or Counter if you like) component page add the @attribute directive for the Authorize attribute, like this: @attribute [Authorize] When an unauthenticated user tries to access the Fetchdata page, the AuthorizeRouteView.NotAuthorized delegate property is executed, and the RedirectToLogin component is rendered with its parameter attribute set to the current url.

更新

以下添加内容是向您的应用添加登录和注销按钮...

The following addition is to add a login and logout buttons to your App...

1. 在共享"文件夹中创建一个名为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元素，如下所示:

In the MainLayout component add the LoginDisplay element as follows:

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

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

Run your app and test the login and logout button...

这篇关于如何将ReturnUrl传递到Blazor Server应用程序的“登录"页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！