Angular 5 Route - Специальные символы не работают в пользовательском маршруте - PullRequest
Новая
       8

Angular 5 Route - Специальные символы не работают в пользовательском маршруте

0 голосов
/ 03 сентября 2018

Когда я пытаюсь получить доступ к типу URL:

http://10.0.6.11/MyApp/AppConArchV2/recovery-password/4%2FtHJjji%2FKmXJulT%2BdRcNdgL%2FCTC1kDszQ93q8jpheYXYgD8u1ZCZFyOgW1z3OzVQmTebDHYxAYckV0urYTsKJxPNRZFvkflz7jv6OsTHCABMmW2yjAhnrZKOQHSQJbZ3vNSFOHeJXXKqTU0ylwjMD%2FE0aRWbqvG5vG%2FubJeA1GFA21%2FYUsuXT2pFkulKQHHZNeFkQ%3D%3D-conarchadmin@consiliumdcs.com

Я получаю ошибку 404

enter image description here

Но когда этот URL проверяется с помощью localhost (через ng-serve), если он работает

Когда я пытаюсь удалить символы, закодированные браузером % 2 URL, если он работает

Как я могу позволить angular принять эти параметры 

const appRoutes: Routes = [
//this route
  { path: 'recovery-password/:token', component: RecoveryPasswordComponent, pathMatch: 'full', runGuardsAndResolvers: 'always', canActivate: [AnonymousGuard]},
  { path: 'main', component: MainComponent, pathMatch: 'full', runGuardsAndResolvers: 'always', canActivate: [AuthGuard] },
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: '**', redirectTo: '/login' },
];

export const routing = RouterModule.forRoot(appRoutes, { onSameUrlNavigation: 'reload' });

1 Ответ

0 голосов
/ 03 сентября 2018

Вы можете переопределить Angular's DefaultUrlSerializer.

Я создал демо на Stackblitz , нажмите на меню входа и увидите URL

UrlSerializerService 

import { Injectable } from '@angular/core';
import {DefaultUrlSerializer, RouterModule, Routes, UrlSegment, UrlSerializer, UrlTree} from '@angular/router';
@Injectable()
export class UrlSerializerService {


  private defaultSerializer: DefaultUrlSerializer = new DefaultUrlSerializer();

  parse(url: string): UrlTree {

    // This is the custom patch where you'll collect segment containing '='
    const lastSlashIndex = url.lastIndexOf('/'), equalSignIndex = url.indexOf('=', lastSlashIndex);
    if (equalSignIndex > -1) { // url contians '=', apply patch
      const keyValArr = url.substr(lastSlashIndex + 1).split('=');
      const urlTree = this.defaultSerializer.parse(url);

      // Once you have serialized urlTree, you have two options to capture '=' part
      // Method 1. replace desired segment with whole "key=val" as segment
      urlTree.root.children['primary'].segments.forEach((segment: UrlSegment) => {
        if (segment.path === keyValArr[0]) {
          segment.path = keyValArr.join('='); // Suggestion: you can use other unique set of characters here too e.g. '$$$'
        }
      });

      return urlTree;
    } else {
      return this.defaultSerializer.parse(url);
    }
  }

  serialize(tree: UrlTree): string {
    return this.defaultSerializer.serialize(tree);
  }

}

app.module.ts 

import { UrlSerializerService } from './url-serializer.service';
import {UrlSegment, UrlSerializer} from '@angular/router';

@NgModule({
  providers: [
    {
      provide: UrlSerializer,
      useClass: CustomUrlSerializer
    }
  ],
...