Angular 2存储承载令牌作为路由传递Param最佳实践

Question

I have a web app (let's call it app1 ) which is redirecting a user to another app ( app2 ) which leverages angular2. A Bearer Token is being passed from app1 to app2 as a route param which will then be stored in local storage and used across app2 . At first I added the logic to save the token on app2 in my login.component, but I noticed my login page as flashing for a few seconds while the user was authenticated. Then I decided to move my logic to my LoginGuard Class which implements CanActivate and looks like this:

canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot) {
    var myToken = route.queryParams['app1Token'] || '';

    if (myToken !== "") {
      localStorage.setItem('app2Token', myToken)

    }

    if (!localStorage.getItem('app2Token')) {
      // not logged in so return true
      return true;
    }

    this.router.navigate(['/home']);
    return false;
}

My question is, what is best practice when it comes to storing a token before the page loads? I've been googling around and I've seen that canActivate should only be used to 'Decide if a route can be activated'. I also read about Resolve , but I noticed that this is used to fetch data and have it available before the component loads.

Answer 1

This is a good question, I went here to see what they've done in these scenarios:

https://angular.io/docs/ts/latest/guide/router.html#!#guards

It looks like you're doing pretty much what they recommend -- use the CanActivate to make decisions regarding authentication, and take actions to resolve that if necessary.

The only recommendation for improvement would probably be to move your logged-in/localStorage logic into a service and then inject it.