Angular Guard: куда перенаправлять, когда пользователь не авторизован? - PullRequest
Новая
       9

Angular Guard: куда перенаправлять, когда пользователь не авторизован?

0 голосов
/ 11 декабря 2018

Согласно Angular docs, интерфейс CanActivate предоставляет функцию , которая возвращает логическое значение.Официальный пример показывает, что функция похожа на предикат без побочных эффектов.

Мы хотим запретить пользователю доступ к странице напрямую с URL-адреса.В соответствии с примером из этой статьи и многими другими примерами в сети, включая ответы StackOverflow, можно добавить вызов к маршрутизатору Angular из функции canActivate().

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

@Injectable()
export class AdminGuard implements CanActivate {

  constructor(private keycloakService : KeycloakService,
              private router: Router) {

  }

  canActivate(): Observable<boolean> | Promise<boolean> | boolean {
    if (this.keycloakService.isAdmin()) {
      return true;
    }
    this.router.navigate(['/']); // HERE
    return false;
  }
}

Каков рекомендуемый способ перенаправить пользователя с защищенной страницы, если он обращается к ней напрямую с URL-адреса?

1 Ответ

0 голосов
/ 11 декабря 2018

Очень динамичным решением для этого вопроса является использование свойства данных на маршрутах.

Итак, в вашем route-module установите что-то следующее: 

 ...

const appRoutes: Routes = [
    {
      path: 'restricted',
      component: RestrictedComponent,
      canActivate: [AuthGuard],
      data: {
        authGuardRedirect: '/custom-redirect'
      }
    }
  ];

Таким образом, теперь мы можем установить значение перенаправления по умолчанию в нашем AuthGuard, но у нас всегда есть возможность переопределить это с помощью нашего свойства данных.Наш AuthGuard будет выглядеть примерно так: 

...

  canActivate(routeSnapshot: ActivatedRouteSnapshot): Observable<boolean> {
    let customRedirect = routeSnapshot.data['authGuardRedirect'];
    let isUserLoggedIn = this.authService.isUserLoggedIn;

    if (!isUserLoggedIn) {
      let redirect = !!customRedirect ? customRedirect : '/unrestricted';
      this.router.navigate([redirect]); 
    }

    return isUserLoggedIn;
  }

Source @ Kirja.com

...