Angular 2 Router v3 beobachtbarer Wächter mit ngrx

Question

Ich versuche, eine "Auth-App" mit Redux (ngrx) zu erstellen, und ich versuche, meinen App-Status im Geheimdienst zu verwenden. Hier können Sie meine Github sehen: https://github.com/tamasfoldi/ngrx-auth/tree/router Dies ist, wie der Hut wie folgt aussieht:

@Injectable() 
export class SecretGuard implements CanActivate { 
    constructor(private store: Store<AppState>, private router: Router) { 
    } 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { 
    return this.store.let(getLoginState()) 
     .map(state$ => state$.isLoggedIn) 
    } 
} 

Es kehrt mit dem isLoggedIn Attribut, das in Ordnung sein sollte, weil Router Versprechungen und beobachtbaren löst, aber der Router blockieren, wenn ich navigieren Sie zu der geheime Teil. Hier sind meine Routen:

export const appRoutes: Routes = [ 
    { 
    path: '', 
    redirectTo: 'auth', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'auth', 
    children: [ 
     { path: '', redirectTo: 'login', pathMatch: 'full' }, 
     { path: 'login', component: LoginComponent }, 
     { path: 'register', component: RegisterComponent } 
    ] 
    }, 
    { 
    path: 'secret', 
    canActivate: [SecretGuard], 
    children: [ 
     { path: '', redirectTo: 'default', pathMatch: 'full' }, 
     { path: 'default', component: DefaultSecretComponent } 
    ] 
    } 
]; 

In redux Ich erhalte den init Zustand, so auch ich habe versucht, die erste Emission in meiner beobachtbar zu überspringen, aber es weder funktioniert. Hier ist das Überspringen Code:

@Injectable() 
export class SecretGuard implements CanActivate { 
    constructor(private store: Store<AppState>, private router: Router) { 
    } 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { 
    return this.store.let(getLoginState()) 
     .skip(1) 
     .map(state$ => state$.isLoggedIn) 
    } 
} 

Wenn ich meine AuthService der Auth-Funktion verwenden Sie es richtig funktioniert, aber diese Lösung ist nicht „Redux-like“. Kannst du mir dabei helfen, wie es mit ngrx funktioniert? Oder ich kann mein Appstate nicht in Wächtern verwenden?

Answer 1

Sie können synchron Wert von Speicher erhalten, müssen nicht „alles streamen“ (:

https://github.com/ngrx/store#getstate-getvalue-and-value

import 'rxjs/add/operator/take'; 

function getState(store: Store<State>): State { 
    let state: State; 
    store.take(1).subscribe(s => state = s); 
    return state; 
} 

@Injectable() 
export class SecretGuard implements CanActivate { 
    constructor(private store: Store<AppState>, private router: Router) { } 

    canActivate():boolean { 
    return getState(this.store).login.isLoggedIn; 
    } 
}