Redirect 角度2 RC5-使用可观察到的

我无法将受保护的组件

HeaderComponent

重定向到

LoginComponent

组件。如果该值为false，则函数可以激活

HeaderComponent

组件及其子组件受到保护，仅访问URL

http://localhost:3000/#/header/index

屏幕变为空白，我希望它指向

http://localhost:3000/#/auth

这是登录屏幕

有人知道如何帮助我吗

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);
    }
}

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);

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

---

它在修复auth.guard.ts文件后工作，用作参考

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);
    }
}

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);

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/core'导入{Injectable}；
从'@angular/Router'导入{CanActivate，ActivatedRouteSnapshot，RouterStateSnashot，Router}；
从'rxjs/Rx'导入{Observable}；
从“./login/login.service”导入{LoginService}；
@可注射（）
导出类AuthGuard实现了CanActivate{
构造函数（私有登录服务：登录服务，私有路由器：路由器）{}
激活(
路由：ActivatedRouteSnapshot，
状态：RouterStateSnapshot）：可观察的|布尔值{
返回这个.loginService.logado（）
.地图(
数据=>{
如果（数据==false）{
this.router.navigate（['/auth']）；
返回数据；
};
如果（数据==true）{
返回数据；
}
},
错误=>{
this.router.navigate（['/auth']）；
返回错误
}
)
}
}