Angular 2 RC5-使用Observable重定向路线

拉斐尔

如果函数canActivate的值为false，则我不会设法将受保护的组件HeaderComponent重定向到该LoginComponent组件。

该HeaderComponent组件及其子组件受到保护，仅访问URL时http://localhost:3000/#/header/index该屏幕变为空白，我希望将其定向到http://localhost:3000/#/auth登录屏幕

有人知道如何帮助我吗？

认证卫士

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

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

拉斐尔

它在修复auth.guard.ts文件之后工作，用作参考Angular2-扩展路由器和Observable

认证卫士

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。