Угловая маршрутизация: как перенаправить на другой путь при успешном разрешении? - PullRequest
0 голосов
/ 09 июля 2019

У меня есть приложение Angular, в которое пользователи могут обращаться по прямой ссылке, содержащей токен, такой как:

localhost:3000/token/<alphanumeric string>

Связанный компонент проверяет правильность токена и, в случае успеха, загружает содержимое страницы.

После того, как пользователи получат доступ к приложению, я хотел бы изменить URL-адрес в адресной строке на что-то вроде:

localhost:3000/homepage

Вот часть моего файла маршрутизации:

{
  path: 'token/:token-id',
  component: HomepageComponent,
  resolve: {data: TokenResolver}
}

Вот решатель:

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<UserInfo> {
    const tokenId = route.paramMap.get('token-id');
    const apiURL = `${this.apiRoot}/${tokenId}`;
    return this.http.get<UserInfo>(apiURL)
}

Я попытался изменить маршрут следующим образом:

{
  path: 'token/:token-id',
  resolve: {data: TokenResolver},
  redirectTo: 'homepage'
},
{
  path: 'homepage',
  component: HomepageComponent
}

Я даже пытался удалить redirectTo и использовать resolve: {redirectTo: 'homepage', data: TokenResolver}. Оба способа не работают. Первый, потому что кажется, что он выполняется redirectTo до resolve. Второй, потому что я не могу объявить путь без компонента или redirectTo и т. Д.

Итак, я попробовал следующий способ:

файл маршрутизации:

{
  path: 'token/:token-id',
  component: HomepageComponent,
  resolve: {data: TokenResolver}
},
{
  path: 'homepage',
  component: HomepageComponent
}

файл резолвера:

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<UserInfo> {
  const tokenId = route.paramMap.get('token-id');
  const apiURL = `${this.apiRoot}/${tokenId}`;
  return this.http.get<UserInfo>(apiURL)
    .pipe(map((data) => {
      this.router.navigate(['homepage'], {state: { data: data }});
      return data;
    }));
}

Это работает, но, как вы видите, мне пришлось дважды объявить HomepageComponent в файле маршрутизации. Кроме того, мне пришлось вернуть data в функции resolve, даже если я больше не использую этот возврат.

Знаете ли вы лучший способ достичь того, что мне нужно?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...