Question

我正在处理角度5应用程序并面临我在组件上的情况，我不想让用户切换路由，直到他/她不回答显示在该组件上的问题。回答问题后，用户可以切换路由并享受系统。

Answer 1

您可以在Angular 2 +中使用auth guard实现所需的行为。

Here是一篇很好的文章，它解释了如何根据不同的条件阻止某些路线。

<强>更新

您可以创建如下的路由器配置。

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

export const ROUTES: Routes = [
  { 
    path: 'profile',
    component: ProfileComponent,
    canActivate: [AuthGuard] 
  }
];

然后您的AuthGuardService应如下所示：

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(public auth: AuthService, public router: Router) {}
  canActivate(): boolean {
    if (!this.auth.isAuthenticated()) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }
}

此处需要注意的是，您可以向AuthguardService注入任何服务（将服务注入到其他服务中）并构建您的逻辑。

Answer 2

警卫是很酷的东西，但是如果你只需要在用户回答问题之前禁用链接，你可以提供一个带有三元运算符的空路由来禁用链接。

鉴于您将答案存储在answer变量中：

<a [routerLink]="answer ? ['your', 'path'] : null">Continue</a>

给出空路由会取消应用程序的路由，并且当您想要阻止某些模块上的路由时，防护非常有用，但仅限于一个链接......这样做太过分了。

如何在条件基础上限制角度5应用中的变化路由？

2 个答案: