Маршрут к другой странице, основанной на охраннике в угловом 6, асинхронном запросе rxjx 6 - PullRequest
Новая
       14

Маршрут к другой странице, основанной на охраннике в угловом 6, асинхронном запросе rxjx 6

0 голосов
/ 28 ноября 2018

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

public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.authSer.isAuthenticated().pipe(map((response) => {
            console.log('I ma here');
            if (response.status === 200) {
                return true;
            } else {
                console.log('Error getting data');
                return false;
            }
        }), catchError((error) => of(false))
    );
}

Как мне проложить маршрут к странице входа отсюда?Я использую угловой 6

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

Вот пример охраны с редиректом на URL.Может быть, это поможет: 

export class AuthGuard implements CanActivate {    
constructor(private router: Router, private authService: AuthenticationService) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.authService.isAuth) {
        return true;
    }
    else {
        this.router.navigate([state.url]); // or some other url
    }
}}
0 голосов
/ 28 ноября 2018

Я знаю, что этот вопрос конкретно гласит Angular 6, я просто хочу упомянуть, что начиная с Angle 7.1 Вы можете вернуть UrlTree вместо логического от вашей охраны - а также Promise и Observable эквивалента -, и это будет служить автоматическим перенаправлением.Так что в вашем случае: 

public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  return this.authSer.isAuthenticated().pipe(
    map((response) => {
      console.log('I ma here');
      if (response.status === 200) {
        return true;
      } else {
        console.log('Error getting data');
        return false;
      }
    }),
    catchError((error) => of(false)),
    map(responseOk => {
      // Isolate dealing with true/false results since they can come from different opperators
      if (!responseOk) {
        return this.router.createUrlTree(['path', 'to', 'redirect'])
      }
      // alternatively, return a different UrlTree if you feel like it would be a good idea
      return responseOk
    })
  );
}

Я также настоятельно рекомендую перейти на Angular 7, используя их Guide .Это довольно безболезненно и даст вам новые возможности, а также принесет кучу исправлений.

...