javascript - 将值从 RouterStateSnapshot 传递到 Angular 2 应用程序中的根路由文件

Question

我想弄清楚如何将值从我的 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)。这给了我正确的值(value)。现在我需要将它传递到我的应用程序路由文件。

为了澄清，目前，在重新登录时，最后一个事件组件被加载——但它显示为背景选项卡，默认的“重定向”组件是作为事件组件加载的组件(即，它显示为事件选项卡)。

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

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 注入(inject)我的应用程序路由文件以直接获取所需的值吗？或者我可以在这里使用“解决”以及路由中的路径吗？处理这种情况的推荐方法是什么？

Answer 1

我通过将 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 并导航到它

// 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' 
  }
];

---

Can I simply inject RouterStateSnapshot into my app-routing file to get that desired value directly?

app-routing 仅用于将路由映射到组件，因此不会将路由快照注入(inject)其中。

您可以做的另一个选择是将重定向 url 作为登录页面的查询参数传递给 auth guard。 (我认为这就是您的目标)

// 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;
  }
}

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