I want to implement simple authentication and authorization in an Angular project. I want to store a JWT token, and the logged in Users data, including Roles in the Local Storage. A routing guard service would check if the currentUser in the localStorage has the Roles required for the given route.

My problem is that if the user modifies the localStorageData, he could do some things otherwise he couldn't do. I understand that he can't make any valid requests to the server, because the sent token wasn't modified.

What's the solution for this?

Example: https://stackblitz.com/edit/angular-7-role-based-authorization-example

Instructions:

1. Login with: Username: user Paswword: user
2. Execute in console:localStorage.setItem("currentUser",'{"id":2,"username":"user","firstName":"Normal","lastName":"User","role":"Admin","token":"fake-jwt-token.User"}')
3. Refresh page