Question

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

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

Answer 1

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

Answer 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 导入刚刚创建的类</ p>

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，并且在成功注册后，将显示注册成功视图。我想，这也是您想要的。

只能通过router.navigate访问角度路由

2 个答案: