Угловой путь 7 маршрутизаторов с параметром GET

Question

Я искал часы, но не могу найти работающее решение для моей проблемы ...

Мое угловое приложение перенаправляет пользователя к API oAuth2, который возвращает jwt через параметры GET.Я узнал, как читать GET-параметры с помощью angular, но моя проблема в другом:

{path: 'authenticate', component: AuthenticationComponent}

Это маршрут, который я настроил для своего AuthenticationComponent.Он работает, как и ожидалось, без каких-либо дополнительных параметров, но с одним параметром get («/ authenticate? Jwt = 123» вместо «/ authenticate») он больше не работает, и мой маршрут «**» активирован.

Одним из обходных путей может стать другой сайт (не написанный на угловом языке), который перенаправляет пользователя на угловую страницу и преобразует параметр GET в параметр URL ('/ authenticate? Jwt = 123' => '/ authenticate / 123')и измените мой путь маршрута на «authenticate /: jwt», но я хочу сделать это с моим угловым приложением.

Пожалуйста, помогите мне

Answer 1

Если вы ввели в качестве зависимости Router, вам нужно navigate следующим образом:

this.router.navigate( ['authenticate'], { queryParams: { jwt: '123'}});

Или, если вы используете routerLink, используйте его следующим образом:

<a [routerLink]="['/authenticate']" [queryParams]="{ jwt: '123'}">Authenticate</a>

---

Вот Рабочий образец StackBlitz для вашей ссылки.

Answer 2

установите роутер следующим образом

{path: 'authenticate/:jwt', component: AuthenticationComponent}

и получите значение jwt в компоненте

// top component
import { Router, ActivatedRoute } from '@angular/router';
// constructor arg
constructor(private route: ActivatedRoute) {}
// user method or ngOnInit inside
this.route.params['value'].jwt

следующий модуль импорта маршрута в вашем модуле

// top module
import { RouterModule } from '@angular/router';
// import object
imports: [RouterModule.forRoot([])]

Это работа

Answer 3

Попробуйте использовать сопоставление в маршрутах, подобных этому { component: AuthenticateComponent, matcher: authenticate}, и authenticate - это функция, подобная этой

function authenticate(url: UrlSegment[]) {
    return url[0].path=="authenticate"?{consumed: url}: null;
}

, это будет соответствовать маршруту к AuthenticateComponent, и в компоненте вы можете получить jwt, подобный этому this.route.snapshot.queryParams['jwt'].Надеюсь, это поможет.