javascript - Uncaught (in promise): TypeError: this.auth.user$.map is not a function
问题描述
我是 Angular 的新手,在进行开发时,下面的代码工作正常(我使用 Visual Studio Code 作为代码编辑器)
当我单击下面的菜单链接时,控制台窗口中发生错误
ng-版本="6.0.9"
npm list --depth=0
+-- rxjs@6.2.2
+-- rxjs-compat@6.2.2
ERROR Error: Uncaught (in promise): TypeError: this.auth.user$.map is not a function
TypeError: this.auth.user$.map is not a function
at AuthGuard.push../src/app/auth-guard.service.ts.AuthGuard.canActivate (auth-guard.service.ts:22)
at MapSubscriber.project (router.js:2768)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at Observable._subscribe (subscribeToArray.js:5)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28)
at MapOperator.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call (map.js:18)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:23)
at MergeMapOperator.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call (mergeMap.js:28)
at AuthGuard.push../src/app/auth-guard.service.ts.AuthGuard.canActivate (auth-guard.service.ts:22)
at MapSubscriber.project (router.js:2768)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at Observable._subscribe (subscribeToArray.js:5)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28)
at MapOperator.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call (map.js:18)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:23)
at MergeMapOperator.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call (mergeMap.js:28)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3751)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1540)
代码出现错误:auth-guard.service.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
import { Observable } from "rxjs/Rx";
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService, private router: Router) { }
canActivate(route, state: RouterStateSnapshot) {
return this.auth.user$.map(user => {
if (user) return true;
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
return false;
});
}
}
auth.service.ts 代码
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase';
import { Observable } from 'rxjs';
import { ActivatedRoute } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class AuthService {
user$: Observable<firebase.User>;
constructor(private afFireAuth: AngularFireAuth,private route: ActivatedRoute) {
this.user$ = afFireAuth.authState;
}
login(){
let returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/';
localStorage.setItem('returnUrl', returnUrl);
this.afFireAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider);
}
logout() {
this.afFireAuth.auth.signOut();
}
}
我期待所有专家的解决方案
解决方案
该问题是由于 Angular 6 上地图语法的较新版本造成的。您需要更改导入语句并将.pipe与 Angular 6 版本中的地图一起使用。
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { map } from 'rxjs/operators';
@Injectable()
export class AuthGuard implements CanActivate{
constructor(private auth: AuthService, private router: Router) { }
canActivate() {
return this.auth.user$.pipe(map (
user => {
if ( user ) return true;
this.router.navigate(['/login']);
return false;
}
));
}
}
推荐阅读
- flutter - 在小部件树中检测到 Flutter Duplicate GlobalKeys
- r - R - 如何在不使用函数的情况下根据一组条件执行某些代码块?
- android - 在项目或库中找不到布局文件中引用的类 `androidx.constraintlayout.widget`
- android - 以编程方式下载 Playstore 统计信息 - 控制对 Google Cloud Storage 的访问
- amazon-web-services - aws macOS 实例更新用户密码
- sql - 提高用于查询 GraphQL 连接的 SQL 代码的性能
- android - 是否可以在本地服务器中设置受信任的 TLS 证书?
- amazon-web-services - 如何在 RDS 数据库升级时处理销售网站中的并发保存?
- chef-infra - Chef Infra Server:将依赖项添加到 metadata.rb 和 policyfile.rb 文件时出错
- angular - 单击一次以角度获取所有表格数据