Используйте tap () вместо map () RxJS и Angular

Question

У меня есть защита входа в систему, которая в основном проверяет, вошел ли пользователь в систему. Если он вошел в систему, он пропускает вход в систему и переходит на домашнюю страницу. Я написал этот код, и это работает:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.store.select(fromApp.isAuthenticated)
        .pipe(take(1),
            map(isAuthenticated => {
                if (isAuthenticated) {
                    this.router.navigate(['/home']);
                    return false;
                } else {
                    return true;
                }
            })
        )
}

Теперь, поскольку мне не нужно изменять или редактировать выходные данные (isAuthenticated boolean), я подумал: ну, почему бы не использовать оператор нажатия? Итак, я переписываю свой код:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.store.select(fromApp.isAuthenticated)
        .pipe(take(1),
   HERE------> tap(isAuthenticated => {   <------ HERE
                if (isAuthenticated) {
                    this.router.navigate(['/home']);
                    return false;
                } else {
                    return true;
                }
            })
        )
}

Затем я пошел в Chrome, и увидел черную страницу, и это было так:

• Я открываю приложение
• Я не авторизован
• URL становится http://localhost:4200/#/ вместо http://localhost:4200/#/login, результат: пустая страница
• Если я попытаюсь ввести вручную в http://localhost:4200/#/login,, он остается в эта страница, но я вижу пустую страницу
• Если я пытаюсь пойти домой, вместо этого он перенаправляет на http://localhost:4200/#/ из http://localhost:4200/#/login

В любом случае я вижу пустую страницу. Итак, я вошел в отладку и заметил, что он правильно переходит внутрь блока if / else ... так, почему tap () ломает приложение?

Answer 1

Страж canActivate должен вернуть Observable<boolean>, чтобы угловой механизм защиты заработал.

Использование map позволяет вам определить возврат, который отличается от того, что вы получаете от isAuthenticated, и это, вероятно, объясняет то, что вы видите.

В вашей первой версии canActivate возвращает Observable<boolean> - во втором случае возвращает this.store.select(fromApp.isAuthenticated).pipe(take(1)), и, вероятно, это не то, что вам нужно.

Answer 2

Эта является подписью canActivate:

interface CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean
}

canActivate должен либо вернуть boolean, либо Promise. Поэтому вы должны map это и вернуть boolean или Promise. tap не сработает.