Angular 2 RC5 - Redirecting the route with Observable

Question

I'm not managing to make the protected component HeaderComponent be redirected to the LoginComponent component if the value is false the function canActivate.

The HeaderComponent component and their children are protected, only accessing the URL http://localhost:3000/#/header/index the screen goes blank, and I wanted it to be directed to http://localhost:3000/#/auth that is the login screen

Anyone know how to help me?

auth.guard.ts

import {Injectable} from '@angular/core';
import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from '@angular/router';
import {Observable, BehaviorSubject} from 'rxjs/Rx';
import 'rxjs/operator/take';
import {LoginService} from './login/login.service';

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private loginService: LoginService, private router: Router) {}

    canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean> | boolean {
        this.loginService.logado()
            .subscribe(
                data => { 
                    return data //true
                },
                error => {
                    this.loginService.redirectUrl = state.url;
                    this.router.navigate(['/auth']);
                    return error //false
                }
        )
        return this.loginService.logado().take(1);
    }
}

routes.component.ts

import {Routes, RouterModule} from '@angular/router';
import {LoginComponent} from './login/login.component';
import {HeaderComponent} from './header/header.component';
import {AuthGuard} from './auth.guard';
import {UserComponent} from './user/user.component';
import {IndexComponent} from './index/index.component';
import {UserPasswordComponent} from './user/user.password.component';

export const appRoutes: Routes = [
    {path: 'auth', component: LoginComponent},
    {path: 'user', component: UserPasswordComponent},
    {path: 'header', component: HeaderComponent, canActivate: [AuthGuard],
        children: [
          {path: 'index', component: IndexComponent},
          {path: 'user', component: UserComponent}
        ]
    },
    {path: '', redirectTo: 'auth', pathMatch: 'full'},
];

export const routing = RouterModule.forRoot(appRoutes);

score 6 · Accepted Answer · edited May 23 '17 at 11:46

It works after the repair auth.guard.ts file, using as reference Angular2 - Extending router and Observable

auth.guard.ts

import {Injectable} from '@angular/core';
import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from '@angular/router';
import {Observable} from 'rxjs/Rx';
import {LoginService} from './login/login.service';

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private loginService: LoginService, private router: Router) {}

    canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean> | boolean {
        return this.loginService.logado()
            .map(
                data => {
                    if (data == false) {
                        this.router.navigate(['/auth']);
                        return data;
                    };

                    if (data == true) {
                        return data;
                    }
                },
                error => {
                    this.router.navigate(['/auth']);
                    return error
                }
            )
        }
}

Angular 2 RC5 - Redirecting the route with Observable

1 Answers1