在Angular Fire 2

Question

我正在尝试使用angularfire 2创建应用程序。无法找到使成员区域受限制的完美方式，这意味着只有经过身份验证的成员才能访问该区域。这是我的'login.component.ts'文件

import { Component, OnInit, HostBinding } from '@angular/core';
import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})

export class LoginComponent {

    state: string = '';
    error: any;
    login: FormGroup;

    constructor(
        public af: AngularFire,
        private router: Router
        ) {
        //official angfire 2 app example
        //this.af.auth.subscribe(auth => console.log(auth));
        }

ngOnInit() {
this.login = new FormGroup({
  username: new FormControl('', Validators.required),
  password: new FormControl('', Validators.required)
});

}

onSubmit() {
    //console.log(this.login.value, this.login.valid);
    var value = this.login.value;
    //console.log(value.username);
    //console.log(value.password);
      this.af.auth.login({
      email: value.username,
      password: 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;
    })
  }

}

和members.component.ts文件

import { Component, OnInit } from '@angular/core';
import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2';
import { Router } from '@angular/router';

@Component({
selector: 'app-other',
templateUrl: './members.component.html',
styleUrls: ['./members.component.css']
})

export class MembersComponent implements OnInit {
//name: "";
//state: string = '';

constructor(
  public af: AngularFire,
  private router: Router
  ) {

  this.af.auth.subscribe(auth => {
    if(auth) {
      console.log(auth);
    }
  });

}

logout() {
   this.af.auth.logout();
   console.log('logged out');
   this.router.navigate(['/login']);
}


ngOnInit() {
}

}

我知道我的代码可能看起来像一个愚蠢的但实际上我正试图研究这个。但是我没有足够的文档来解决我的问题。提前谢谢。

Answer 1

https://coursetro.com/posts/code/32/Create-a-Full-Angular-Authentication-System-with-Firebase

这是一个很好的教程，可以解决您的问题