Как передать returnUrl на страницу входа в приложении Blazor Server? - PullRequest
Новая
       27

Как передать returnUrl на страницу входа в приложении Blazor Server?

0 голосов
/ 14 января 2020

У меня есть простое серверное приложение Blazor с идентификацией с использованием индивидуальной аутентификации. Я создал приложение из шаблона dotnet new стандарта VS 2019.

В некоторых частях приложения я хотел бы направить пользователя на страницу входа при передаче параметра returnUrl. Я пробовал следующие варианты кода для передачи этого параметра ( counter - это страница, на которую я хочу вернуться): 

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: предоставленный URL-адрес не является локальным. URL-адрес с абсолютным путем считается локальным, если у него нет части узла / органа. URL-адреса, использующие виртуальные пути ('~ / ') также являются локальными. "

Кто-нибудь может предложить правильное форматирование параметра returnUrl в этой ситуации? Для получения дополнительной информации я следую советам @iambacon (спасибо Колину!) В его сообщении в блоге о перенаправлении на страницу входа для приложений Blazor. Это отличная статья, которая выполняет часть того, что я хочу: перенаправление на страницу входа, когда пользователь не аутентифицирован. Я просто хотел бы добавить дополнительную функцию возврата к этому URL после завершения аутентификации.

1 Ответ

2 голосов
/ 14 января 2020

"URI не является локальным".

Чтобы решить эту проблему ...

Выполните следующие действия:

  1. Создайте в Страницы папки компонента 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>

Также добавьте NavigationManager в верхней части компонента приложения, например: 

@inject NavigationManager NavigationManager

Чтобы проверить это, в верхней части страницы компонента Fetchdata (или Counter, если хотите) добавьте @attribute. директива для атрибута Authorize, например: @attribute [Authorize] Когда пользователь, не прошедший проверку подлинности, пытается получить доступ к странице Fetchdata, выполняется свойство делегата AuthorizeRouteView.NotAuthorized, а компонент RedirectToLogin отображается с атрибутом параметра, установленным на текущий URL.

Обновление

Следующим дополнением является добавление кнопок входа и выхода в ваше приложение ...

  1. Создание композиции nent с именем LoginDisplay.razor в папке Shared и добавьте в него следующий код: 
     <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>

Запустите приложение и проверьте кнопку входа и выхода ...

...