1

我一直在尝试在我的 web 应用程序中正确实现 AuthGuard。目前，当我在应用程序中导航时，它工作正常。但是当我刷新时， authService.loggedIn 在 AuthService 完成执行之前被处理为 false 。

这是我的代码：

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();
          }
        }
      }
    }

身份验证服务



    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';

任何帮助/建议表示赞赏。

感谢大家。

4

2 回答 2

3

我能够使 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']);
                }
              }
            )
          );
      }
    }

谢谢。

于 2018-11-21T03:48:16.327 回答
2

您可以按照以下步骤实现此目的：

1）首先在您的 authService 中，创建用户 EX 的行为主体： 

user = new BehaviorSubject<any>(null);

2)现在在 authService 中创建一个 logIn 函数 

logIn(email: string, password: string) {
  // do some logging in functionality over here 
  // like authenticating the user, then emit the userInfo 
  // and save it to the storage.
  this.user.next(userData);
  localStorage.setItem('userData', userData);
  // also, now here after logging in navigate to your next url which is protected from guard or other some other url.
}

3)现在创建一个自动登录功能

autoLogin() {
 const userData = localStorage.getItem('userData');
 if (!userData) {
    this.user.next(null);
    return;
 }
 this.user.next(userData);
}

4)现在在 auth.guard.ts 中编写以下代码

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


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

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        this.authService.autoLogin();
        return this.authService.user.pipe(take(1), map(user => {
            const isAuth = !!user;
            if (isAuth) {
                return true;
            } else {
                return this.router.createUrlTree(['/auth']);
            }
        }));
    }
}

5)不要忘记在你的路由配置中添加 canActivate 对象，你想在其中应用守卫

例如

{ path : 'root', component: SuperadminComponent, canActivate: [AuthGuard] }

注意 1：如果 {providedIn: 'root'} 未在 AuthGuard 中的可注入中提供，则不要忘记将其添加到 app.module.ts 的提供程序数组或您要使用的任何模块中

注意 2：在注销时清除存储并将用户发送为 null。

希望这会对您或其他人有所帮助！

于 2019-11-21T22:30:12.210 回答