在 Angular Fire 2 中创建受限成员区域答案

【问题标题】：Creating restricted members area in Angular Fire 2在 Angular Fire 2 中创建受限成员区域
【发布时间】：2017-07-16 12:46:54
【问题描述】：

我正在尝试使用 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() {
}

}

我知道我的代码可能看起来很愚蠢，但实际上我正在努力研究这一点。但是我猜没有足够的文档来解决我的问题。提前致谢。

【问题讨论】：

标签： authentication typescript firebase angularfire2

【解决方案1】：

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

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

【讨论】：