Как перенаправить другой компонент, когда canActivate возвращает false? - PullRequest
Новая
       17

Как перенаправить другой компонент, когда canActivate возвращает false?

0 голосов
/ 04 мая 2018

Привет! Я использую маршрутизацию в angular 5, и у меня есть путь входа, который использует свойство canActivate

можно ли перенаправить на другой путь, если canActivate имеет значение false? Я не хочу, чтобы пользователь видел страницу входа, если он / она вошел в систему.

здесь основной сервис возвращает false, если пользователь вошел в систему 

{
    path: 'login',
    component: RegisterLoginComponent,
    canActivate: [MainService]
}

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Я думаю, что лучшим подходом было бы защитить ваш путь по умолчанию с помощью Guard и перенаправить на /login оттуда в случае сбоя аутентификации. 

/* AuthService */
isLoggedIn(): boolean {
  // check if user is logged in
  return isUserLoggedIn;
}

/* AuthGuard */
import { Router } from '@angular/router';
import { AuthService } from './auth.service';
...
constructor(private authService: AuthService, private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  // check if user is logged in
  const loggedIn: boolean = this.authService.isLoggedIn();
  // if not, redirect to /login
  if (!loggedIn) {
    this.router.navigate(['/login']);
  }
  return loggedIn;
}

Примечание : Если вы хотите контролировать, куда вы перенаправляете, у вас есть доступ к URL-адресу, к которому пользователь пытался получить доступ, в route.url. Вы можете проверить его значение и затем перейти к определенному URL-адресу, а не всегда к /login.

.

Вот краткий пример кода, который выполняет это перенаправление с асинхронным кодом. https://stackblitz.com/edit/angular-async-guard-redirect?file=src%2Fapp%2Fauth-with-redirect.guard.ts

0 голосов
/ 05 мая 2018

Перенаправление в службу входа, если учетные данные совпадают 

 this.authService.signin(user)
  .subscribe(
    data => {

      this.router.navigateByUrl('/dashboard');
    },
    error => console.error(error)
  )
...