Javascript 在Angular 2应用程序中将值从RouterStateSnashot传递到我的根路由文件

我正在尝试找出如何将auth.guard文件中的RouterStateSnapshot值传递到Angular 2应用程序中的路由文件。我之所以想这样做，是因为我不想先加载硬编码的默认组件，而是希望在重新登录后加载最后一个活动组件/页面。我在AuthGuard文件中的canActivate（）函数中有这个值，因为我可以通过RouterStateSnapshot将其控制台输出。所以现在我需要弄清楚如何将这个值传递到我的根路由文件，以便在登录/重新登录时加载该组件

这是我的

AuthGuard

文件中的

canActivate（）

函数：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
{
    // Get route content id
    let contentId = Object.getPropertyValueAtPath(route, 'data.contentId');

    console.log(state.url);

    // If route does not have session id, don’t load in tab view
    if (!String.isNotNullOrEmpty(contentId))
    {
        console.error(`Route (${route.routeConfig.path}) does not have a content id.`);
        this.router.navigateByUrl(''); // Forward to default page.
        this.router.navigate([state.url]);
        return false;
    }

    if (this.disabled) return true;

    if (sessionStorage.getItem('currentUser'))
    {
        // logged in so return true
        return true;
    }

    // not logged in so redirect to login page with the return url
    this.router.navigate(['/login', {returnUrl: state.url}]);
    return false;
}

请注意，我是在该函数中执行此操作的：

console.log（state.url）

。这给了我正确的值。现在我需要将其传递到我的应用程序路由文件

为了澄清，当前，在重新登录时，加载了最后一个活动组件——但它显示为后台选项卡，默认的“重定向”组件是加载为活动组件的组件（即，它显示为活动选项卡）

应用程序路由文件的简化版本如下所示：

import { HomeComponent } ...

export const routes: Routes = [

{ path: 'login', component: LoginComponent },

{ path: 'home', component: HomeComponent },

{ path: 'about', component: AboutComponent },

{ path: '**', redirectTo: 'home' }

];

---

如上所述，在初始加载时，默认情况下，我当前将用户重定向到“主组件”。我想做的是将它们重新定向到RouterStateSnapshot中存储在“state.url”中的值。然而，我不清楚如何做到这一点。关于如何将该值从AuthGuard文件传递到应用程序路由文件，有什么想法吗？我可以简单地将RouterStateSnapshot插入我的应用程序路由文件中，直接获得所需的值吗？或者我可以在路由中使用“resolve”和路径吗？处理这种情况的推荐方法是什么？

我通过将url存储在来自AuthGuard的共享服务中来实现这一点

// auth-guard.ts
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  let isLoggedIn = this.authService.isUserLoggedIn();

  if(isLoggedIn){
    return true;
  }else{
    this.someService.storeRedirectUrl(state.url);
    this.router.navigateByUrl('/login');
    return false;
  }
}

然后，当用户登录时，检查是否存储了重定向url并导航到该url

// login method within login page
login(){
  this.authService.login(email, password).subscribe(
    res => {
      // successful user login, so determine where to route user
      if(this.someService.redirectUrl){
        // redirect url found, navigate to that url
        this.router.navigateByUrl(this.someService.redirectUrl);
      }else{
        // if no redirect url found, navigate to normal landing page
        this.router.navigateByUrl('/home');
      }
  });
}

路由文件

// routes
export const routes: Routes = [
  {
    path: 'login', 
    component: LoginComponent 
  },
  { 
    path: 'home', 
    component: HomeComponent,
    canActivate: [AuthGuard]
  },
  { 
    path: 'about', 
    component: AboutComponent,
    canActivate: [AuthGuard]
  },
  { 
    path: '**', 
    redirectTo: 'home' 
  }
];

---

我可以简单地将RouterStateSnapshot插入我的应用程序路由文件中，直接获得所需的值吗

应用程序路由只是用于将路由映射到组件，因此不需要将路由快照注入其中

您可以做的另一个选择是将重定向url作为登录页面的查询参数传递给auth-guard。（我想这就是你想要的）

---

用户成功登录后的过程与此相同，只是这次从url参数而不是服务获取重定向url。

感谢您的反馈。关于你的最后一点，如果你看一下我的代码，我实际上就是这样做的。我的canActivate函数中有这样一个函数：this.router.navigate（['/login'，{returnUrl:state.url}]）；然而，虽然state.url在登录时会重新加载，但它不是活动选项卡。活动选项卡在我的路由文件中定义为重定向：路径：'**'，重定向到：'home'，所以问题是，我如何不仅在注销前加载组件，而且作为活动选项卡/组件导航到它？我确实认为共享服务可能是最好的方法。我现在将尝试实现它。@Muirik-hmm我想我不明白你所说的活动选项卡/组件是什么意思。你们能给出一个你们在例子中所说的路由路径的例子吗？（用户导航到

/about

，用户未登录，因此用户被踢到

/login

，用户登录并重定向到

/home

？

/about

？）成功重新登录后，用户被重新定向到主页-因为路由文件REDirect。现在，如果一个用户在注销之前打开了几个组件（这些组件在我们的应用程序中表示为页面选项卡），那么当他们重新登录时，所有这些选项卡都将加载—因为状态是在ActivatedRouteSnapshot中捕获的。然而——这是关键——由于路由文件中的重定向逻辑，活动组件（在前景中）将是“主”。我想要的是，在成功重新登录后，使最后一个活动组件再次成为活动组件。@Muirik重新登录后，您试图导航到的url是什么？听起来好像活动选项卡/组件状态没有存储在url中

// auth-guard.ts
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  let isLoggedIn = this.authService.isUserLoggedIn();

  if(isLoggedIn){
    return true;
  }else{
    this.router.navigate(['/login', {redirectUrl: state.url}]);
    return false;
  }
}