如何在条件基础上限制角度 5 应用程序中的路由更改?

Question

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

Answer 1

守卫很酷，但是如果您只需要在用户回答问题之前禁用链接，则可以使用三元运算符提供空路由来禁用链接。

假设您将答案存储在answer变量中：

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

提供空路由会取消应用程序的路由，当您想要阻止某些模块上的路由但仅适用于一个链路时，防护很有用......这是矫枉过正。

Answer 2

您可以在 Angular 2+ 中使用身份验证保护来实现所需的行为。

这是一篇不错的文章，解释了如何根据不同的条件阻止某些路由。

更新：

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

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(将服务注入到另一个服务(并构造您的逻辑。