AngularFire 2でログインしていない場合、ログインページにリダイレクトする

Question

Angular2/AngularFire2で認証されていないユーザーをログインページにリダイレクトするにはどうすればよいですか？

たとえば、 /ダッシュボードページを認証されていないユーザーから保護したいと考えています。ユーザーは即座に

私は

• angular2バージョン2.0.0-rc.1
• angular2 /ルータバージョン2.0を使用しています、/ログインページにリダイレクトされるはずです。 0-rc.1
• firebaseバージョン3.0.5
• angularfi re2バージョン2.0.0-beta.1

Answer 1

からtodo-angular-2へ

ありがとうございます角度2のUIルータガード条件を使用してURLを保護することができます。 firebase

ガードコンポーネント

を使用して https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

例おそらく認証サービスで、ここでのAFを参照して交換する方が良いだろうに注意してください。

import { Injectable } from '@angular/core'; 
import { CanActivate, Router } from '@angular/router'; 
import { AngularFire } from 'angularfire2'; 

@Injectable() 
export class CanActivateViaAuthGuard implements CanActivate { 
    user; 
    constructor(private af: AngularFire, private router: Router) { 
     this.af.auth.subscribe(user => { 
      if (user) { 
       this.user = user; 
      } else { 
       this.user = undefined; 
      } 
     }); 
    } 

    canActivate() { 
     if (this.user) { 
      return true; 
     } 
     this.router.navigate(['/login']); 
     return false; 
    } 
} 

アプリケーションルート

import { CanActivateViaAuthGuard} from './CanActivateViaAuthGuard'; 

const routes: Routes = [ 
    {path: '/Login', component: LoginComponent}, 
    {path: '/dashboard', component: DashboardComponent, canActivate: [CanActivateViaAuthGuard]} 
]; 

export const routing = RouterModule.forRoot(routes); 

最後にログインコード

onSubmit() { 
    this.af.auth.login({ 
     email: this.email, 
     password: this.password, 
    }).then(() => { 
     this.submitted = true; 
     this.router.navigate(['/dashboard', this.dashboard]); 
    }); 
    } 

Answer 2

ここでAuthメソッドを使用できます。

if ($scope.auth === null) { 
    $state.go('login'); 
} 

、その真か偽

Answer 3

の場合は、チェックが解決策を見つけてみましょう、あなたの$ firebaseAuthを注入し、$ scope.authに割り当てます。 R-公園

import { ReflectiveInjector } from '@angular/core'; 
import { Router } from '@angular/router-deprecated'; 
import { AuthService } from './auth-service'; 


let appInjector: ReflectiveInjector; 

/** 
* This is a workaround until `CanActivate` supports DI 
* @see https://github.com/angular/angular/issues/4112 
*/ 

export class AuthRouteHelper { 
    static dependencies(): {auth: AuthService, router: Router} { 
    const injector: ReflectiveInjector = AuthRouteHelper.injector(); 
    const auth: AuthService = injector.get(AuthService); 
    const router: Router = injector.get(Router); 
    return {auth, router}; 
    } 

    static injector(injector?: ReflectiveInjector): ReflectiveInjector { 
    if (injector) appInjector = injector; 
    return appInjector; 
    } 

    static requireAuth(): boolean { 
    const { auth, router } = AuthRouteHelper.dependencies(); 
    if (!auth.authenticated) router.navigate(['/SignIn']); 
    return auth.authenticated; 
    } 

    static requireUnauth(): boolean { 
    const { auth, router } = AuthRouteHelper.dependencies(); 
    if (auth.authenticated) router.navigate(['/Tasks']); 
    return !auth.authenticated; 
    } 
}