Angular2相对路线在守卫中导航

Question

我们在此处提供了儿童路线定义,其中我们使用警卫来检查用户在使用我们的服务之前是否接受了条款.

帐户/秘密/ secret.routes.ts:

import { Routes } from '@angular/router';
import { SecretFormComponent } from './secret-form.component';
import { SecretTermsComponent } from './secret-terms.component';
import { TermsGuard } from './services/terms-guard.service';

export const secretRoutes: Routes = [
  {
    path: '',
    redirectTo: 'form'
  },
  {
    path: 'form',
    component: SecretFormComponent,
    canActivate: [TermsGuard]
  },
  { path: 'terms', component: SecretTermsComponent }

  // otherwise redirect to form
  { path: '**',  redirectTo: 'form' }
];

在我们的术语守护中,我们定义了以下代码:

this.router.navigate(['/account/secret/terms']);
return false;

有没有办法在"路由组"中使用相对路由导航重定向？因为如果有一天我们的帐户网站仪表板被重命名为my-account等其他任何东西,那么定义绝对路径可能会中断.我们希望我们的秘密模块可以重复使用.

我希望能够['./terms']在我的后卫中导航,但它不起作用,就像守卫不知道"从哪里"开始相对导航.

Answer 1

你想要使用的是守卫方法的RouterStateSnapshot参数canActivate.

在RouterStateSnapshot有电流通路你是在路由到的过程,而Router.url你是从路由的电流路径(这就是为什么@君特Zöchbauer的回答确实在这种情况下不太工作).

为了完全适用于您的用例而没有其他代码,您将需要更改您的路由

/account/secret/form 和 /account/secret/form/terms

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

@Injectable()
export class ChildRouteGuard implements CanActivate {
    constructor(private router: Router) { }

    canActivate(_route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        if (// user can view the specific route) {
            return true;
        }

        // else route them to a variation of the route
        this.router.navigate([state.url, 'terms']);

        return false;
    }
}

编辑1

你可以利用ActivatedRouteSnapshot下面所示的优势来保持你当前的网址结构

假设像account/secret/form和的路线account/secret/terms

route.url是一个url段的数组,我们想要最后一个,因为那将是form.我们发现,在当前路径索引,我们试图去account/secret/form和slice它.在这一点上,我们有我们试图导航到当前路线的"父" account/secret,我们可以到兄弟加form是terms.

注意:当您form在网址中重复出现此模式时,此模式会中断

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

@Injectable()
export class ChildRouteGuard implements CanActivate {
    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        if (// user can view the specific route) {
            return true;
        }

        let parentUrl = state.url
            .slice(0, state.url.indexOf(route.url[route.url.length - 1].path));

        this.router.navigate([parentUrl, 'terms']);

        return false;
    }
}