Angular маршрутизация: параметр в середине строки или после префикса - PullRequest
Новая
       14

Angular маршрутизация: параметр в середине строки или после префикса

1 голос
/ 06 марта 2020

Используя Angular 9 со встроенной маршрутизацией, у меня будет определение маршрута ниже: 

{ path: '/mysubfolder/:param', component: MyAwesomeComponent },

Параметр всегда имеет форму 'foo_123'. 'foo_' - это жестко закодированная константа, которая никогда не меняется. Затем в компоненте я делю на '_', далее обрабатываю '123' и забываю о 'foo _'.

Это работает довольно хорошо. Проблема в том, что должна быть страница ошибки, которая обрабатывает все несуществующие страницы. Он определен примерно так: 

{ path: '**', pathMatch: 'full', component: ErrorPageComponent }

Это также работает для ванильных URL-адресов, таких как / barbarbar. Однако для '/ mysubfolder / blablabla' это не работает. Конечно, я вернусь к MyAwesomeComponent вместо страницы с ошибкой (что здесь не так).

Итак, поскольку param всегда начинается с 'foo_', я бы хотел определите что-то вроде 

{ path: '/mysubfolder/foo_:param', component: MyAwesomeComponent },

в маршрутизации. Но это не работает. Это вообще невозможно в Angular 9 или я что-то здесь не так делаю? Есть ли альтернатива для решения этой проблемы? (Требование: URL-адрес может не изменяться, поэтому «/ mysubfolder / foo /: param» не является опцией.)

Конечно, я мог бы перенаправить в MyAwesomeComponent все запросы с параметром, который не начинается с ' foo 'на страницу ошибки. Но это кажется уродливым и хакерским. И это не сработает, если в будущем я добавлю больше подобных случаев.

1 Ответ

1 голос
/ 06 марта 2020

Попробуйте создать аутентификацию защиты 

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

@Injectable()

export class RouteGuard implements CanActivate {
  constructor(private router: Router) { }

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    const encryptedParams = next.params.id
    if(<check condition>){
      // proceed to the component
      return true
    }else{
      this.router.navigate(['/error']);
      return false;
    }
  }
}

и добавить ее в маршрут 

{ path: '/mysubfolder/:param', component: MyAwesomeComponent, canActivate:[RouteGuard] },

Проверка подлинности выполнит проверки до загрузки MyAwesomeComponent, и вы сможете добавить дополнительные проверки позже по мере необходимости.

...