【问题标题】：how to handle Angular 2 CanActivate Route Guards如何处理 Angular 2 CanActivate Route Guards
【发布时间】：2017-10-21 07:23:23
【问题描述】：

我已经在我的应用程序中实现了 Route Guards。在用户访问仪表板路由之前，我检查了用户是否已登录。

登录后用户访问仪表板可以正常工作，但如果用户尝试在未登录的情况下访问路由仪表板，则会出现空白页面。 CanActivate Guard 被执行并返回 false。

但是，如果 CanActivate 失败，我想将用户重定向到日志记录页面。

如果 Route Guard 失败，我如何将用户重定向到另一个 Route？

这就是我所关注的

import { Routes, RouterModule } from '@angular/router';
import { AccountPage } from './account-page';
import { LoginRouteGuard } from './login-route-guard';
import { SaveFormsGuard } from './save-forms-guard';
const routes: Routes = [
{ path: 'home', component: HomePage },
{
path: 'accounts',
component: AccountPage,
canActivate: [LoginRouteGuard],
canDeactivate: [SaveFormsGuard]
}
];
export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(routes);

import { CanActivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { LoginService } from './login-service';
@Injectable()
export class LoginRouteGuard implements CanActivate {
constructor(private loginService: LoginService) {}
canActivate() {
return this.loginService.isLoggedIn();
}
}

【问题讨论】：

标签： angular angular2-routing angular2-services

【解决方案1】：

您可以在AuthGuardService 中注入Router 并在this.loginService.isLoggedIn() 返回false 时重定向到logging 页面。

import { CanActivate, Router } from '@angular/router';
import { Injectable } from '@angular/core';
import { LoginService } from './login-service';

@Injectable()
export class LoginRouteGuard implements CanActivate {
  constructor(private loginService: LoginService, private router: Router) {}
  canActivate() {
    if(this.loginService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);    // redirect to login page for example
      return false;
    }
  }
}

【讨论】：

【解决方案2】：

您可以通过将路由器注入警卫并调用navigate()来在警卫内部重定向

import { Router, CanActivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { LoginService } from './login-service';

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

    canActivate() {
        if(this.loginService.isLoggedIn()) {
            return true;
        }

        this.router.navigate(['/route/to/wherever/you/want']);
        return false;
}

这取自official docs。

【讨论】：

【解决方案3】：

在您的 Guard 中，您可以使用路由器重定向到登录页面：

import { CanActivate, Router } from '@angular/router';
import { Injectable } from '@angular/core';
import { LoginService } from './login-service';
@Injectable()
export class LoginRouteGuard implements CanActivate {
    constructor(private loginService: LoginService, private router: Router) {}
    canActivate() {
        let result = this.loginService.isLoggedIn();
        // Case not logged
        if(!result) {
            this.router.navigate(['/login']);
        }
        return result;
    }
}

【讨论】：

【解决方案4】：

1。创建一个实现路由模块CanActivate的类

    import {Injectable} from '@angular/core';
    import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
    import { Observable } from 'rxjs/Observable';
    import { LoginService } from './login/login.service';
    // Here LoginService is a custom service to check the user authentication.
    @Injectable()
    export class CanActivateAuthGuard implements CanActivate  {
        constructor(private router: Router, private loginService: LoginService) { };
        canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
            if (this.loginService.GetAuthStatus()) {
                return true;
            } else {
            this.router.navigate(['/login']);
            return false;
            }
        };
    }

2。在 app.module.ts 文件中的 NgModule 中添加类到 provider 数组

       import { CanActivateAuthGuard } from './auth.guard';

     @MgModule({
        providers: [
        ...
        CanActivateAuthGuard,
        ...
        ],
     })

3。在路由器常量中使用 canActivate（由 Angular 路由器提供）属性中的服务

    { path: 'dashboard' , component: DashBoardComponent, canActivate: [CanActivateAuthGuard] }

【讨论】：