title: Angular 2 routing: Route guard validation fails when accessing the protected url directly
body: <h1>Issue</h1>
  
  <p>Hello. I'm having a issue trying to implement route guards for my angular 2.2.0 application.</p>
  
  <p>I've implemented a simple auth verification with a http get request and, while it works perfectly when I navigate to a guarded route in the application itself, it fails when I access the same route by the Url.</p>
  
  <h1>Example</h1>
  
  <p>I have a route to the profile, where the logged user can access, and the unlogged user will be redirected to the route <code>/login</code></p>
  
  <p>When I access the route by the following methods:</p>
  
  <pre class="lang-js prettyprint-override"><code>// Acessing the route by using Angular's navigate function:
  &lt;div [routerLink]="['profile']"&gt; Profile &lt;/div&gt;
  
  // or
  // html 
  &lt;div (click)="goToProfile()"&gt; Profile &lt;/div&gt;
  
  // ts
  click(){
     this._router.navigate(["profile"]);
  }
  </code></pre>
  
  <p>It works perfectly. The logged user will normally access the <code>/profile</code> route, and the unlogged user will be redirected to <code>/login</code>.</p>
  
  <p>But, when I access the direct route to the component:</p>
  
  <pre><code>http://localhost/profile
  </code></pre>
  
  <p>The validation always return false, and any user (logged or unlogged) will be redirected to <code>/login</code>.</p>
  
  <h1>Relevant snippets</h1>
  
  <pre class="lang-js prettyprint-override"><code>// auth-guard.service.ts
  export class AuthGuard implements CanActivate {
    constructor(
            private _authService: AuthService,
            private _router: Router 
     ) { }
  
     canActivate(){
            if (this._authService.checkAuth()){
                  return true;
            }
            this._router.navigate(['/login']);
            return false;   
     }
  }
  
  // auth.service.ts
  export class AuthService {
     private _isLoggedIn:boolean;
     private _userdata:any;
  
     constructor(@Inject(Http) private _http: Http){
         this._isLoggedIn = false;
         this._userdata = {};
         this.getProfile();
     }
  
     profileRequest():Observable&lt;any&gt;{
        return this._http.get("..").map(res =&gt; res.json());
     }
  
     getProfile(){
        this.profileRequest().subscribe(
           success =&gt; { 
               this._isLoggedIn = true;
               this._userdata = success.data;
           },
           error =&gt; {
               this._isLoggedIn = false;                 
           }
       );
     }
  
     checkAuth():boolean{
        return this._isLoggedIn;
     }
  }
  
  // app.routing.ts
  export const routing = RouterModule.forRoot([
      { path: '', component: AppComponent }
  ]);
  
  // profile.routing.ts
  export const profileRouting = RouterModule.forChild([
     { 
      path: 'profile', 
      component: ProfileContainerComponent,
      canActivate: [ AuthGuard ] 
     }
  ]);
  </code></pre>
  
  <p>I'm not sure, but maybe this is related to the http request which is made to check if the user has an valid session, since the described issue happnes on <strong>any</strong> guarded route. </p>
  
  <p>Anyway, I'm currently stucked on this. Any help will be appreciated.
  Thanks.</p>
  
  <h1>EDIT: Cause</h1>
  
  <p>After tracing my authentication class, I was able to figure it out what was causing this.</p>
  
  <p>When I accessed the route directly through its Url, then the <code>checkAuth</code> function, at route guard, was being runned before the <code>getProfile</code>function ends. 
  Since this function uses an http request, and the flow would work only if the response was received before the <code>checkAuth</code> function was called, then the process wasn't working as expected.</p>
  
  <p>In other hand, when I accessed the route through the application, then the initial getProfile function was already finished, allowing to setup the variables which are used at the route guard.</p>
  
  <h1>Fix</h1>
  
  <p>The fix (or workaround) was based on the Wuno's method for checking the authenticated user by localStorage.</p>
  
  <p>After the user logged in/out, I've setted/removed the localStorage key.</p>
  
  <p>This key was checked before the class variable.</p>
  
  <pre class="lang-js prettyprint-override"><code>// auth.service.ts
  checkAuth(){
      if (localStorage.getItem("USER_SESSION")){
          return true;
      }
      return this.isLoggedIn;
  }
  </code></pre>
  
  <p>If you have a better approach, please send an comment and I'll update the post.
  Thanks.</p>