2

我有一个 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函数中返回，即使我不再使用该返回。

你知道更好的方法来满足我的需要吗？

4

0 回答 0