如何处理 Angular 2 CanActivate Route Guards

Question

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

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

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

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

这就是我所遵循的

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

Answer 1

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

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