Question

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

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

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

Answer 1

在修复auth.guard.ts文件后，它使用作为参考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 - 使用Observable

1 个答案: