Question

我有一个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。第二个是因为我无法声明没有组件的路径，也无法重定向到诸如此类的东西。

所以我尝试了以下方法：

路由文件：

{
  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。

您知道一种更好的方式来满足我的需求吗？

角路由：成功解决后如何重定向到其他路径？

0 个答案: