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

Question

I am trying to figure out how to pass the value from the RouterStateSnapshot in my auth.guard file to my routing file in my Angular 2 app. I want to do this because, rather than loading a hard-coded default component first, I want, after re-login, for the last active component/page to load up. I have this value in my canActivate() function in my AuthGuard file, because I can console out it out via RouterStateSnapshot. So now I need to figure out how to pass this value on to my root routing file so it, on login/re-login, that component gets loaded.

This is the canActivate() function in my AuthGuard file:

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

Notice that I am doing this within that function: console.log(state.url) . This gives me the correct value. Now I need to pass it to my app-routing file.

To clarify, currently, on re-login, the last active component is loaded -- but it displays as a background tab, and the default 'redirect' component is what loads up as the active component (ie, it shows as the active tab).

A simplified version of the app-routing file looks like this:

import { HomeComponent } ...

export const routes: Routes = [

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

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

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

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

];

As you can see above, on initial load I currently redirect the user to the 'home component' by default. What I'd like to do is re-direct them to the value that is stored in "state.url" from RouterStateSnapshot. I'm not clear how to do this, however. Any ideas as to how I'd pass that value from my AuthGuard file down to my app-routing file? Can I simply inject RouterStateSnapshot into my app-routing file to get that desired value directly? Or can I use "resolve" here along with the path in routing? What's the recommended way to handle this kind of scenario?

Answer 1

I accomplish this by storing the url in a shared service from my 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;
  }
}

Then when the user logs in, check if that redirect url was stored and navigate to it

// 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 File

// 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 is just for mapping routes to components, so there is no injecting the route snapshot into it.

Another option you could do is to pass the redirect url as a query parameter of the login page within the auth guard. (I think this was what you were heading towards)

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

Then the process is the same after a user logs in successfully, except this time you fetch the redirect url from the url parameters instead of the service.