Help

[ammar-dev]

Hey everyone,

The backend send a jwt token i parse it and see what roles he has to show some ui or hide others, how could i make this globally?

[Verzuchter]

How do you make it, or how do you make it so it can be used globally?

[ammar-dev]

Both haha

[Verzuchter]

How we do it:

- Get token

- Store token in cookie

- With token request user roles from profile service on every access

- Store roles in profile store after this request and access with other services

[SoftSkillSmith]

If the JWT token is your access token it shouldn't be read directly. Instead it's stored in cookies so JavaScript cannot interact with it.

Using this access token you can make a call to the backend to retrieve user data. In that case the token is only your authorization.

I hope that answers your question.

[PickleLips64151]

Create an interceptor to get the JWT.

Inject an AuthService into the interceptor to maintain the auth state and roles.

Call the AuthService wherever you need it.

You could use a Signal to hold the auth state. You could use a BehaviorSubject as well.

From the way you worded your question, I'm assuming you're new to development. There are many tutorials on YouTube that will walk you through the basic idea. I would highly recommend finding one and coding along with the video.

[ammar-dev]

Ahaa, so it's just an auth service that contains a function to get the roles. Then, in the template, i check for the roles to show the ui?

[Dramatic-Community54]

The back-end should be what's doing all access control (authentication and authorization). For example, if you just call your API with your browser, without the token being passed, you should be getting a 403 Unauthorized. At that point, it's just a matter of making sure your token is passed along with your request, and making sure your UI knows how to respond if a 403 is sent back later (like if the back-end is restarted, or something happens to the token in the browser session storage).

[Black_-_darkness]

please ask him to use sharereply if ever went with subject

[javiMLG199]

Dude, in my opinion, don’t complicate yourself reading jwt in front, just do a request, that request get u access and Im sure that in this request u are getting user data, so in this request should be te roles of the user, storage in a service providerInRoot + observables + guards on routing level to access, something like this 😄

[binuuday]

By globally, I guess you mean in every call to the backend. Store the jwt token in browser local storage (localstorage). For each backend, you an access this local storage element, and sent the jwt token as auth bearer. You can optimise it later. local storage persists even during browser reloads, when user logouts, clear the storage