Скрытие ссылок меню после аутентификации Angular

В настоящее время я участвую в проекте, который использует Angular со службой аутентификации IdentityServer4. В настоящее время, когда пользователь впервые попадает на нашу страницу, мы показываем ссылку для входа. Когда пользователь щелкает эту ссылку, он перенаправляется на страницу входа в систему IdentityServer. После успешного входа в систему пользователь перенаправляется обратно в наш сервис, благодаря чему становятся доступными новые ссылки меню.

Проблема в том, что существует задержка, в результате которой используемая библиотека OidcSecurityService может определить, аутентифицированы мы или нет. Во время этой задержки ссылка для входа по-прежнему доступна до тех пор, пока она не исчезнет после подтверждения аутентификации.

Я подумал о том, чтобы скрыть логин по умолчанию и показать только его, однако эта ссылка должна быть доступна, когда мы не вошли в систему, а у OidcSecurityService нет доступных методов, которые, как я вижу, позволяют нам узнать, была ли проверка аутентификации сделанный.

Есть ли рекомендуемый подход к тому, чтобы ссылка для входа вообще была недоступна на начальной странице?

HTML

    <li routerLinkActive="active" class="hide"
        *ngIf="!userIsAuthorized"
        [ngClass]="{'show': showLogin, 'hide': !showLogin }">
      <a style="cursor:pointer;" (click)="onLogin()">Login</a>
    </li>

Эта служба активируется на уровне OidcSecurityService при определении аутентификации.

Пользовательская служба

constructor(private securityService: OidcSecurityService,
          private userApiService: UserApiService,
          private spinnerService: SpinnerService) {

console.log('userService() start');

    //this will allow us to get the user details, needed to get the user permissions
    this.securitySubscription = this.securityService.onUserDataLoaded
      .subscribe(() => {
        console.log('loading user data');

        this.userLoadStarted.next(true);
        this.loadAllUserDetails();
    });

    //We must check the local storage and IF user details saved, use these values and emit event, else make/use empty
    var userAuthorized = this.securityService.isAuthorized;

  if (userAuthorized != undefined && userAuthorized === true) {
    console.log('userService() isw auth');

    this.userPermissions = LocalStorageService.read('userPermissions');
    this.userDetails = LocalStorageService.read('userDetails');

    this.userDetailsAlreadyLoaded = true;
  } else {
    console.log('userService() not auth');

      this.userPermissions = [];
      this.userDetailsAlreadyLoaded = false;
    }

console.log('userService() end');
}

angular identityserver4
person dreza    schedule 22.07.2017    source источник
comment
Киньте нам пример кода. Есть полдюжины способов сделать это, но, используя уже существующий код, мы можем показать вам быстрый чистый способ.   -  person Z. Bagley    schedule 22.07.2017
comment
@Z.Bagley Проблема, которую я обнаружил, заключается в том, что служба Oidbc запускает только событие загрузки пользовательской службы, которая скрывает и показывает, действительно ли она выполняет аутентификацию. Поэтому, когда пользователь не вошел в систему, мое обновление никогда не произойдет. Следовательно, я не могу скрыть логин по умолчанию, потому что я никогда не смогу его показать. ......   -  person dreza    schedule 22.07.2017

Ответы (1)


arrow_upward
0
arrow_downward

Используя текущую настройку, вы захотите добавить переменную loginClicked в свой UserService. Кроме того, лучше придерживаться ngIf ИЛИ ngClass, а ngIf является более надежным методом.

HTML

<li routerLinkActive="active" *ngIf="!userService.userIsAuthorized || !userService.loginClick"> <!-- Only show if the user isn't authorized or login hasn't been clicked -->
  <a style="cursor:pointer;" (click)="onLogin()">Login</a>
</li>

Основные изменения в сервисе будут включать создание переменной loginClicked для управления состоянием процесса входа в систему. Вы захотите включить это в начало вашего API входа в систему. В ваш пример кода был включен только конструктор, но я предполагаю, что ваш компонент onLogin() вызывает функцию в этой службе для инициализации входа в систему.

public userIsAuthorized = false;
public loginClick = false;

login() {
  // Your call to the login service here
  // ...
  // ...
  // This is also the area where you set userIsAuthorized to true on successful subscribe.

  this.loginClick = true;
}

Я создал этот плункер, который показывает, как это работает.

person Z. Bagley    schedule 22.07.2017
comment
Быстрый вопрос. Когда нажимается логин, мы перемещаемся с сайта на страницу входа в сервер идентификации. Когда он вошел в систему, мы перенаправлены обратно на наш сайт. Будет ли этот метод по-прежнему работать в том смысле, что loginClick будет запоминаться, когда он вернется на сайт? - person dreza; 23.07.2017
comment
Я не буду. Вам понадобятся файлы cookie, чтобы это работало или открывалось на новой странице. - person Z. Bagley; 23.07.2017