Angular 路由只能通过 router.navigate 访问答案

【问题标题】：Angular route accessible only through router.navigateAngular 路由只能通过 router.navigate 访问
【发布时间】：2020-02-28 14:12:35
【问题描述】：

是否可以创建一个 Angular CanActivate Guard，仅当我通过 router.navigate 导航到该路由时才允许用户访问该路由？

示例：用户创建一个帐户，可以显示 2 个组件：RegistrationForm 和 ConfirmationForm。他们都有自己的特定路线配置'registrationForm'，'confirmationForm'。我希望仅当用户通过 RegistrationForm 并成功注册时才能访问 ConfirmationForm，我使用router.navigate('confirmationForm')。当用户将 www.someURL.com/confirmationForm 放在浏览器地址栏中时，我希望它被阻止。

【问题讨论】：

您是否考虑过使用服务来存储标志，即canShowConfirmationForm？然后你可以在 RegistrationForm 中设置它并在 Guard 中使用。
好吧，我想我会这样做，因为这是迄今为止我找到的最佳解决方案

标签： angular

【解决方案1】：

为什么不将两个表单合并为一个组件，并根据注册结果使用*ngIf 隐藏/显示部分

【讨论】：

我需要为这两个组件使用不同的路由。

【解决方案2】：

受到 jacekbj 对原始问题的评论的启发，我就是这样做的：

首先我创建了 CanShowConfirmationForm 类：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } 
from '@angular/router';

@Injectable({
    providedIn: 'root'
})
export class CanShowConfirmationForm implements CanActivate {

    constructor(private router: Router) { }

    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): boolean {
        const url: string = state.url;
        alert("current url" + this.router.url);

        return this.checkLogin(url);
    }

    checkLogin(url: string): boolean {
        if (this.router.url === "/register") { return true; }

        this.router.navigate(['/login']);
    return false;
    }
}

然后我修改了应用路由模块 app-routing.module.ts 通过导入刚刚创建的类

import { CanShowConfirmationForm } from './can.show.confirmation.form';

然后我通过添加属性修改了组件 RegistrationSuccessComponent 的路由（在您的示例中，此组件被命名为 ConfirmationForm） CanActivate 带值 [CanShowConfirmationForm]：

{
 path: 'registration-success',
 canActivate: [ CanShowConfirmationForm],
 component: RegistrationSuccessComponent,
 data: { title: 'RegistrationSucess' }
}

（在您的示例中，成功的注册被重定向到 url /confirmationForm，在我的示例中，重定向到 url /registration-success。）

现在，如果我尝试直接访问 url http://localhost:4200/registration-success 浏览器会直接访问 url http://localhost:4200/login 并在成功注册后显示注册成功视图。我想，这也是你想要的。

【讨论】：