У меня есть приложение 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
, даже если я больше не использую этот возврат.
Знаете ли вы лучший способ достичь того, что мне нужно?