Ich versuche, einen Weg zu finden, um eine Angular2 Typescript-Route (mit dem 3.0.0-alpha.8-Router) einzurichten, die Routen behandelt, die mit Hash-Fragmenten beginnen.

Die App, an der ich arbeite, verwaltet alle Anmeldungen extern (etwas, über das ich keine Kontrolle habe) über ein Rails-Backend mit oauth2. Das Umleiten von Benutzern auf die externe Anmeldeseite funktioniert einwandfrei, aber wenn die URL umgeleitet wird, ist immer eine Form vonhttp://localhost:4200#access_token=TOKEN (wobei TOKEN eine Reihe von Zahlen und Buchstaben ist) wird zurückgesendet, aber ich kann nicht herausfinden, wie eine Route eingerichtet wird, die mit dem @ umgehen kan# -Zeichen, damit ich es abfangen und zur entsprechenden Komponente umleiten kann.

In einer früheren Angular1-App wurde dasui-router konnte in einer Route verwenden von:

.state('accessToken', {
  url: '/access_token=:token',
  controller: 'LoginController',
  params: { token: null }
})

und dies hatte kein Problem damit, die zurückgesendete Weiterleitungs-URL zu akzeptieren und alles an den LoginController weiterzuleiten, um den Rest des Authentifizierungs- / Token-Geschäfts auf dem Front-End abzuwickeln.

Diese App ist jedoch Angular2 und Typescript und die Router-Abfrageparameter scheinen viel weniger flexibel zu sein, und ich habe Probleme, eine ähnliche Lösung zu implementieren. Ich bin gegangen basierend aufdiese Abteilun in den Dokumenten, aber alle Beispiele bauen auf etwas anderem auf, ex/heroes bevor wir zum komplizierten Teil der Abfrageparameter kommen, ex/heroes/:id. Ich habe auch Stackoverflow durchsucht und konnte nichts finden, was mit Angular2 und Typescript und dem aktuellen Router funktioniert.

Dies ist meine aktuelle (nicht funktionierende) Lösung:

import { provideRouter, RouterConfig } from '@angular/router';

import { HomeComponent } from './components/home/home.component';
import { TestComponent } from './components/test/test.component';


export const appRoutes: RouterConfig = [
  {
    path: '',
    component: HomeComponent,
    terminal: true
  },
  {
    path: 'access_token',
    component: TestComponent
  }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(appRoutes)
];

Wenn ich die zurückgesendete Weiterleitungs-URL verwende und sie (nur zu Testzwecken) in so etwas wie @ ändehttp://localhost:4200/access_token=TOKEN es funktioniert gut. Leider habe ich im wirklichen Leben keine Kontrolle über das Format der Weiterleitungs-URL, und ich kann keine Lösung finden, die die Tatsache berücksichtigt, dass sie mit einem Hash-Fragment und nicht mit einem @ beginn/ und dann meine Abfrageparameter. Alle Beispiele für das Routing mit komplizierten Symbolen oder Zeichen, die ich finden kann, beginnen mit einem/.

Ich habe versucht, meine obige Lösung so zu ändern, dass sie @ is:access_token, was nicht funktioniert hat, und es als untergeordnete Route unter der Basisroute wie folgt aufzulisten:

{
  path: '',
  component: HomeComponent,
  terminal: true,
  children: [
    { path: 'access_token',  component: TestComponent },
  ]
}

was zu folgendem Konsolenfehler führte:platform-browser.umd.js:2312 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''

Ich glaube, es muss unbedingt eine saubere Lösung dafür geben, zumal so viele APIs ihre Authentifizierung über eine Redirect-URL wie diese abwickeln, aber egal, wie viel ich in den Dokumenten stöbere, kann ich sie anscheinend nicht finden. Jeder Rat, wie man dies umsetzt, wäre sehr dankbar.