neroniaky
canActivate always blocks the routes (even after signIn)
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: '[email protected]',
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?
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.
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.
@neroniaky, can you share the code of the demo site (https://angular2-token.herokuapp.com)? I didn't found here in this repo.
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!
Hi everyone, i'm getting this same issue, has anyone found any solution to this already ? Thnks.
For me, the solution was to expose the headers as suggested here, due to i'm running the backend and front as separated apps.
@rafaelss95 use .map instead of using subscribe and return it, something like this:
return this.tokenService.signIn({ email: '[email protected]', password: 'secretPassword' }).map(data => { console.log(data); // your if conditions inside this });
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
