strange null 'id_token' from localStorage when user is logged in Angular 2

Question

When the user is logged in, he's redirected to the home page and everything works fine. When the user tries to navigate to his profile page (or admin page) then server responds with 401 Unauthorized because the id_token from localStorage is null in console logs. BUT, chrome's localStorage has the correct id_token. Please note that all other components that require the token to work are fine!! (??). If i refresh the page, then everything is working like it should be.

Problem is, why the profile and admin service cannot 'see' the localStorage id_token?

here's my github repo: https://github.com/predatorkill/ng2-form-demo

and here are the two components that the problem occurs:

admin service: https://github.com/predatorkill/ng2-form-demo/blob/master/src/app/client/admin/services/admin.service.ts

profile service: https://github.com/predatorkill/ng2-form-demo/blob/master/src/app/client/user/profile/profile.service.ts

can someone explain why this behavior? I'm trying since yesterday to find the problem but no luck...

Also, why the user's email is not shown in the navbar immediatly after the user is logged in?

here's the navbar component: https://github.com/predatorkill/ng2-form-demo/blob/master/src/app/client/navbar/navbar.component.ts

my guess on navbar not showing the email is because for the same reason it cannot see the 'id_token' it cannot see the userId.

Answer 1

You should use AuthHttp instead of http. It will take care of everything. Check this example and service file for the details.

https://github.com/darpanpathak/MEAN2-MarvelApp/blob/master/development/services/authentication.service.ts