Angular: обработка обновления браузера в AuthGuard - PullRequest
Новая
       14

Angular: обработка обновления браузера в AuthGuard

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

Я пытался правильно реализовать AuthGuard в моем веб-приложении. В настоящее время, когда я перемещаюсь в приложении, оно работает нормально. Но когда я обновляюсь, authService.loggedIn обрабатывается как ложное, прежде чем AuthService завершит выполнение.

Вот мой код:

auth.guard.ts 



    import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
    import {Injectable} from '@angular/core';
    import {AuthService} from './auth.service';

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

      canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (state.url === '/login') {
          if (this.authService.loggedIn) {
            this.router.navigate(['/']).then().catch();
          } else {
            return true;
          }
        } else {
          if (this.authService.loggedIn) {
            return true;
          } else {
            this.router.navigate(['/login']).then().catch();
          }
        }
      }
    }

auth.service 



    import {Injectable, OnInit} from '@angular/core';
    import {AngularFireAuth} from '@angular/fire/auth';
    import {auth} from 'firebase';
    import {Router} from '@angular/router';
    import {Subject} from 'rxjs';

    @Injectable({
      providedIn: 'root'
    })
    export class AuthService implements OnInit {
      loggedIn = false;

      constructor(public afAuth: AngularFireAuth, private router: Router) {
        this.afAuth.authState.subscribe((user) => {
          if (user) {
            this.loggedIn = true;
          }
        });
      }

      ngOnInit() {
      }

      ...
    }

Я исследую онлайн, и они упомянули другой подход (например, https://gist.github.com/codediodeio/3e28887e5d1ab50755a32c1540cfd121), но не могу заставить его работать в моем приложении.

Одна ошибка, с которой я сталкиваюсь при попытке такого подхода, это «ОШИБКА в src / app / auth.guard.ts (20,8): ошибка TS2339: свойство« take »не существует для типа« Observable ».» Я использую 

import {AngularFireAuth} from '@angular/fire/auth';

а не 

import { AngularFireAuth } from 'angularfire2/auth';

Любая помощь / предложение приветствуется.

Спасибо всем.

1 Ответ

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

Я смог заставить AuthGuard работать с обновлением браузера.

Эта ссылка очень помогла: https://gist.github.com/codediodeio/3e28887e5d1ab50755a32c1540cfd121

Я просто использовал pipe () для цепочки операторов и использовал tap () вместо этогоиз do (), так как я использую более новую версию rxjs.

Вот код: 



    ...
    import {Observable} from 'rxjs';

    import {take, map, tap} from 'rxjs/operators';

    @Injectable()
    export class AuthGuard implements CanActivate {
      constructor(private router: Router, private afAuth: AngularFireAuth) {
      }

      canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
        return this.afAuth.authState
          .pipe(
            take(1),
            map(user => !!user),
            tap(
              loggedIn => {
                if (!loggedIn) {
                  this.router.navigate(['/login']);
                }
              }
            )
          );
      }
    }

Спасибо.

...