Angular 2 Route Guard 逻辑答案

【问题标题】：Angular 2 Route Guard logicAngular 2 Route Guard 逻辑
【发布时间】：2017-06-11 18:15:23
【问题描述】：

服务：

import { Injectable }     from '@angular/core';
import { CanActivate }    from '@angular/router';
import { Router } from '@angular/router';
import { AngularFireAuth } from 'angularfire2/auth';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private router: Router, public af: AngularFireAuth) { }

  canActivate() {
    this.af.authState.subscribe(res => {
      if (res && res.uid) {
        this.router.navigate(['/dashboard']);
      } else {
        // Prevent user from accessing any route other than /login or /register.
      }
    });
    return true;
  }
}

路由器模块：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AuthGuard } from './auth-guard.service';

import { LoginComponent } from 'app/login/login.component';
import { RegisterComponent } from 'app/register/register.component';
import { DashboardComponent } from 'app/dashboard/dashboard.component';

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent, canActivate:[AuthGuard] },
  { path: 'register', component: RegisterComponent, canActivate:[AuthGuard] },
  { path: 'dashboard', component: DashboardComponent, canActivate:[AuthGuard] },
  { path: '',   redirectTo: '/login', pathMatch: 'full' },
  { path: '**', redirectTo: '/login', pathMatch: 'full' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

canActivate 函数的作用是重定向用户是否登录。我在路由器模块中的路由上附加了警卫，但我无法确定下一步的正确逻辑：

如果用户没有登录，他们应该不能访问除 /login 或 /register 之外的任何路由。当然，我可以在 else 语句中添加 this.router.navigate(['/login'])，但这会使 /register 无法访问。

感谢您的任何见解。

【问题讨论】：

标签： angular routes angular2-routing

【解决方案1】：

您应该只将 AuthGuard 用于需要保护的路由，在您的情况下，这似乎只是仪表板。 canActivate 读起来像：“这个给定的 AuthGuard 可以激活这个路由，如果它返回 true。”而不是“这条路线可以激活另一条路线”。所以你可以这样做：

路线

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate:[AuthGuard] },
  { path: '',   redirectTo: '/dashboard', pathMatch: 'full' },  
  { path: '**', redirectTo: '/dashboard', pathMatch: 'full' }
];

AuthGuard

@Injectable()
export class AuthGuard implements CanActivate {
  private isLoggedIn = false;

  constructor(private router: Router, public af: AngularFireAuth) {
    af.authState.subscribe(res => this.isLoggedIn = res && res.uid); 
  }

  canActivate() {
    if (!this.isLoggedIn) {
      this.router.navigate(['/login']);
      return false;
    } else {
      return true;
    }
  }
}

这样，仪表板将无法访问并在未登录时重定向到 /login。您可以拥有从 LoginComponent 到 RegisterComponent 的链接，因此它变得可访问。

我想你有一个 LoginService？登录成功后，服务可以重定向到仪表板路由。

更多信息可以在这里找到：https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

【讨论】：