How to implement authorization restrictions with SPA pages?

Question

I have read this below answer for SPA cons. In fact, I have faced some problems outlined.

https://stackoverflow.com/questions/21862054/single-page-application-advantages-and-disadvantages#answer-37443637

That is why I want to check i still taking the current path.

My question is more related to user authurization to an object.

1. When the user access the webapp who doesn't have authurization to certain objects,do i need to hide them (with JS) in SPA or i need to make all the options available as api.

   For example: if the user is not admin, do i need to hide admin related navigation links or do i need to create an api for navigation links and maintain in the server?

2. User logged into the application and data table was loaded. But the user dont have delete permission on the data. Do i need to hide delete option on records? or page can be build based on the permission? So far, for navigation I keep the entries in the backend and serve as api. For delete permission like things, i hide it.

I am using Angular. Is there any solution i can build SPA on based on user permission or MPA is better for my usecase case, as it is data sensitive and I dont want users to inspect the elements and figure things what was hidden (authentication is set for api as well. but i feel too much work to be done to maintain simple edit feature and nagivation when user permission involves.)

Answer 1

If you let the client make the unauthorised api call its going to throw an exception. So you have two options.

1. Handle the exception and present the user with an error message "Sorry you need to be admin to do this actoon"

2. Change the UI so that the user cant take action in the first place. ie. hide or grey out the button.

Normally 2 is considered the better option.

You should never be in a situation where you have restricted data client side but 'hidden'. As obviously anyone can view anything client side.

But edit/delete buttons and the like dont fall under this category. As if a malicious user unhides and clicks them, they just get the auth error from the API