1

AngularFire2 を使用した Angular 2 RC6。認証が機能すると、保護されたルート (「/feed」) にリダイレクトされます。AuthGuard の canActivate メソッドが起動すると、認証は常に null になります。ガードが構築される前に認証が行われるように見えるため、ガードのサブスクライブは何もしません。

login.ts (この認証は機能し、「フィード」にリダイレクトされます)

constructor(public af: AngularFire, private router: Router) {
  this.af.auth.subscribe(auth => console.log(auth));
}
login() {
  this.af.auth.login({
    provider: AuthProviders.Facebook,
    method: AuthMethods.Popup,
  }).then((x: FirebaseAuthState) => {
    console.log(x);
    this.router.navigate(['/feed']);
  }).catch(x => console.log(x));
}

feed.routes.ts

export const feedRoutes: Routes = [
  {
    path: '',
    component: FeedComponent,
    canActivate: [AuthGuard]
  }
];

auth-guard.service.ts

import { Injectable }             from '@angular/core';
import { CanActivate, Router,
        ActivatedRouteSnapshot,
        RouterStateSnapshot }    from '@angular/router';
import { AngularFire, AngularFireAuth, FirebaseAuthState }            from 'angularfire2';
import { Observable } from 'rxjs';

@Injectable()
export class AuthGuard implements CanActivate {
  auth: FirebaseAuthState;

  constructor(private af: AngularFire, private router: Router) {
    console.log('auth guard constructed');
    this.af.auth.subscribe(authState => console.log(authState));
    this.af.auth.subscribe(x => this.auth = x);
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    console.log('can activate ' + this.auth)
    if (this.auth == null){
      // this part always fires
      console.log('no auth!')
      this.router.navigate(['/login']);
      return false;
    } 
      console.log('authenticated');
    return true;
  }
}

コンソールに出力される内容は次のとおりです。

Object {auth: W, uid: "xYFs8kMDpKdYKxDw4AL21FtnSWn1", provider: 2, facebook: Of}
auth-guard.service.ts:13 auth guard constructed
auth-guard.service.ts:19 can activate undefined
auth-guard.service.ts:21 no auth!

.subscribe 内のアクションが発生しないことに注意してください。

4

1 に答える 1

1

おそらく次のようなものが必要です。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    console.log("canActivate");
    return this.af.auth.take(1).map(auth => {
      console.log("auth:" + auth);
      if (!auth) {
        this.router.navigateByUrl('/login');
        return true;
      }
      return !!auth;
    });
  }

しかし、auth observable も私にとって発火していません。

于 2016-09-10T05:06:51.303 に答える