Question

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

这是canActivate()文件中的AuthGuard函数：

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)。这给了我正确的价值。现在我需要将它传递给我的app-routing文件。

为了澄清，目前，在重新登录时，最后一个活动组件已加载 - 但它显示为背景选项卡，默认的“重定向”组件加载为活动组件组件（即，它显示为活动选项卡）。

app-routing文件的简化版本如下所示：

import { HomeComponent } ...

export const routes: Routes = [

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

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

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

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

];

如上所示，在初始加载时，我目前默认将用户重定向到“home组件”。我想做的是将它们重定向到RouterStateSnapshot中存储在“state.url”中的值。但是，我不清楚如何做到这一点。关于如何将我的AuthGuard文件中的值传递到app-routing文件的任何想法？我可以简单地将RouterStateSnapshot注入我的app-routing文件中以直接获得所需的值吗？或者我可以在这里使用“resolve”以及路由中的路径吗？处理这种情况的推荐方法是什么？

Answer 1

我通过将我的AuthGuard

中的url存储在共享服务中来实现此目的

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

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

// 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注入我的app-routing文件中以直接获得所需的值吗？

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

您可以做的另一个选择是将重定向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。

将值从RouterStateSnapshot传递到Angular 2 App中的根路由文件

1 个答案: