angular - 如何检查用户是否在 Angular 8 中登录

Question

作为一种实践（遵循 udemy 的视频教程），我正在尝试保护我的链接，但它给了我一些编译错误。这是我的 auth-guard.service.ts：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';
import 'rxjs/add/operator/map';

@Injectable({
  providedIn: 'root'
})
export class AuthGuardService implements CanActivate {

  constructor(private auth: AuthService, private route: Router) { }

  canActivate() {
    return this.auth.user$.map(user => {
      if (user) return true;
      this.route.navigate(['/login']);
      return false;
    })
  }
}

这是我的 auth.service.ts

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import 'firebase/auth';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  user$: Observable<firebase.User>;

  constructor(private afAuth: AngularFireAuth) { 
    this.user$ = afAuth.authState;
   }

  login() {
    this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());
  }

  logout() {
    this.afAuth.auth.signOut();
  }
}

我从 auth-guard.service.ts 得到的编译错误是“‘Observable’类型上不存在属性‘map’。” 难道我做错了什么？

标签： angular

Answer 1

RxJS v5.5.2+已迁移到Pipeable运算符以改进 tree-shaking 并更容易创建自定义运算符。现在operators需要使用Refer This New Importpipe的方法进行组合

import { map} from 'rxjs/operators';

例子

myObservable
  .pipe(filter(data => data > 8),map(data => data * 2),)
  .subscribe(...);

修改后的代码

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

@Injectable({
  providedIn: 'root'
})
export class AuthGuardService implements CanActivate {

  constructor(private auth: AuthService, private route: Router) { }

  canActivate() {
    return this.auth.user$.pipe(map(user => {
      if (user) {return true;
       }else{
      this.route.navigate(['/login']);
      return false;}
    }))
  }
}