canActivate always blocks the routes (even after signIn)

[rafaelss95]

Hello, I'm trying to use the canActivate as below:

import { Angular2TokenService } from 'angular2-token';

const routes: Routes = [
  {
    path: 'login',
    loadChildren: () => System.import('./login/login.module')
  },
  {
    path: 'register',
    loadChildren: () => System.import('./register/register.module')
  },
  {
    path: 'pages',
    component: PagesComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: () => System.import('./dashboard/dashboard.module') },
      ... // Some other paths
    ],
    canActivate: [Angular2TokenService]
  }
];

Actually it works to not activate the routes, but even after call signIn() method, the routes can't be accessed. It always show me blanks page. So as a test I decided to check what's the response after call signIn() method and it always return false. I also tried to use the validateToken() to check something and it always return the following:

http://localhost:4200/auth/validate_token 401 (Unauthorized)

Example:

this.tokenService.init({
  apiPath: 'http://localhost:4200'
});

this.tokenService.signIn({
  email:    'example@example.org',
  password: 'secretPassword'
}).subscribe(data => {
  console.log(data); // It works. The log says that the token is updated and all is fine. Why does it still says false to canActivate?
});

console.log(this.tokenService.userSignedIn()); // false
console.log(this.tokenService.validateToken()); // 401

How can I fix it? Or is it a known issue?

[neroniaky]

If something like this happens its usually an timing issue. The CanActivate method checks if AuthData is set.

userSignedIn(): boolean {
        return !!this._currentAuthData;
}

In your second example your console.log() methods are outside the subscribe method, so they get run before .signIn() finishes.

console.log(this.tokenService.userSignedIn()); // false
console.log(this.tokenService.validateToken()); // 401

You should check where you redirect and if it triggers before the backend has a chance to answer your signIn call.

[rafaelss95]

Well, so how can I solve this timing issue?

In fact, this 2nd example is just to check why the canActivate isn't working... I also tested this inside the subscribe method and it gives the same response.

Thanks for your quick response.

[rafaelss95]

@neroniaky, do you have any solution for this?

[chaskas]

I have the same problem, is there any news?

[neroniaky]

@rafaelss95 @chaskas are you using SystemJS?

[rafaelss95]

No, I'm using webpack.

[chaskas]

@neroniaky Yes I am.

[rafaelss95]

@neroniaky, can you share the code of the demo site (https://angular2-token.herokuapp.com)? I didn't found here in this repo.

[neroniaky]

@rafaelss95 README, paragraph 3. 😉

[tomfloresa]

Hi! Is someone still having this issue? I'm working on a RoR BackEnd and it is generating the token. Angular (or A2T) is also setting it in the local storage as I'm capable of seeing it in the Application tab on DevTools. Thing is that userSignedIn always returns false. Thanks!

[jefree]

Hi everyone, i'm getting this same issue, has anyone found any solution to this already ? Thnks.

[jefree]

For me, the solution was to expose the headers as suggested here, due to i'm running the backend and front as separated apps.

[saransh944]

@rafaelss95 use .map instead of using subscribe and return it, something like this:

return this.tokenService.signIn({
email: 'example@example.org',
password: 'secretPassword'
}).map(data => {
console.log(data);
// your if conditions inside this
});

[matheuschvs]

In case anyone is struggling with that like me

I noticed that when calling the sign_in method the headers were not being returned and that's why I couldn't authenticate the user.

what solved for me was to expose the headers at the back-end.
something like that:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'

    resource '*',
      headers: :any,
      expose: ['access-token', 'expiry', 'token-type', 'uid', 'client'],
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end