Question

查看Angular 2的解决方案：

state: string = '';
error: any;

constructor(public af: AngularFire,private router: Router) {
this.af.auth.subscribe(auth => { 
  if(auth) {
    this.router.navigateByUrl('/members');
  }
});
}


 onSubmit(formData) {
if(formData.valid) {
  console.log(formData.value);
  this.af.auth.login({
    email: formData.value.email,
    password: formData.value.password
  },
  {
    provider: AuthProviders.Password,
    method: AuthMethods.Password,
  }).then(
    (success) => {
    console.log(success);
    this.router.navigate(['/members']);
  }).catch(
    (err) => {
    console.log(err);
    this.error = err;
  })
}
}

我一直试图在Angular 4中使用相同的功能，但得到

属性'login'在'Observable'
类型上不存在

以下是一些示例代码（不工作）：

import { routing } from './app.routing';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { FirebaseObjectFactoryOpts } from "angularfire2/interfaces";
import { AngularFireDatabaseModule, AngularFireDatabase, 
FirebaseListObservable, FirebaseObjectObservable } from 
'angularfire2/database';
import { AngularFireAuthModule, AngularFireAuth } from 
'angularfire2/auth';
import * as firebase from 'firebase/app';

@Component({
 selector: 'app',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
 export class AppComponent {
  state: string = '';
   error: any;

  constructor(private afAuth: AngularFireAuth, private db: 
   AngularFireDatabase,private router: Router) {
   this.afAuth.authState.subscribe(auth => { 
  if(auth) {
    this.router.navigateByUrl('/members');
    }
   });
 }


onSubmit(formData) {
if(formData.valid) {
  console.log(formData.value);
  this.afAuth.authState.login({
    email: formData.value.email,
    password: formData.value.password
  },
  {
    provider: AuthProviders.Password,
    method: AuthMethods.Password,
  }).then(
    (success) => {
    console.log(success);
    this.router.navigate(['/members']);
  }).catch(
    (err) => {
    console.log(err);
    this.error = err;
    })
  }
}
}

Answer 1

似乎有一半的代码是AF2 2.0而另一半是4.0，see our migration guide on the API changes that we made。

即，AngularFire2不再为Firebase Javascript SDK提供包装器。 You need to use that SDK to login：

import * as firebase from 'firebase/app';
...
this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
...
this.afAuth.auth.signOut();

如果您对我们决定不包装JS SDK的原因感到好奇，you can check out the proposal in the AngularFire2 Github Issues。

如何使用登录名和密码验证用户？

1 个答案: