2017-02-25 10 views
0

私はanglefire 2を使用してアプリケーションを作成しようとしています。メンバーエリアを限定して認証されたメンバーだけがそのエリアにアクセスできることを意味する完璧な方法は見つかりません。ここに私の「login.component.ts」ファイルAngular Fire 2で制限されたメンバーエリアを作成する

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は、私は私のコードはダム1のように見えることも知っているが、実際に私がしようとしています

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() { 
} 

} 

を提出これを勉強してください。しかし、私の推測する問題を解決するための十分な文書はありません。前もって感謝します。

答えて

関連する問題