authorization in a SPA or client side app

Question

So I've been trying to find out best practices on how to tackle authorization, not authentication, in a SPA app.

Say I have a client side MVC (angular, vuejs, etc ..) with an api backend, how do we manage using authorizations for the app?

For example, a user and a manager, both can access but one has more access (features in a view) than the other. If they are both using the same UI on the client side how do you protect and render the proper view according to their access? There is the option of getting a list of their roles/claims and based on that determine what to render on the client side but since that's based on JS it can be circumvented easily.

It sounds to me that a client side mvc app may not be the right solution and an SSR app is more fit for this. If that is the case, how about the mobile case? how do you solve the same problem for the mobile without having to develop an actual native app?

Answer 1

This is a very good question which has also been in my mind for a long time. And I don't know why this has not been answered by anyone. I read some articles and tutorials about this and in all of them they proposed the same thing that you mentioned:

"getting a list of their roles/claims and based on that determine what to render on the client side"

And as you also mentioned, it can be circumvented but I think because, authorization will also be done on server-side, then no matter how the user tampers with the front-end JS(for instance by using browser's dev tools), he/she can not pass the authorization guard. For example they might be able to add delete button for all the comments(other than their own comments) but after they click the delete button on other user's comment. The server will not authorize the deletion action, because of the server-side authorization. So it seems that the approach you mentioned is legit.