permission on the client. How do the pros do it?

Question

Vue.js

Hello. Share experience how to organize access to functions on the client (browser).
The situation is this: on the backend with jwt authorization (the state of the authorized user is not stored), there are APIs that are not available to every user. How is it usually done with the client? That is, for example, a button with a limited function needs to be hidden / blocked, or it is better to leave it and after pressing it, answer that the function is not available. In the first case, it turns out that it is necessary to store on the client all the functions available to the user.
I re-read it, I understand that I described the question ugly. I don't know how to rephrase it.

Answer 1

On the client, draw only available buttons, from the client periodically send a request for available buttons + a separate button for updating from the client. Be able to push buttons from the server in addition to responding to a request. On the server, of course, check the availability of the function.
If we need to sell "inaccessible buttons", then they can be drawn, but in a disabled state.

Answer 2

I'm not a professional, but I made this decision for myself.
The frontend stores all forms, buttons, etc. displaying the interface is done through checking access rights.
The server on laravel, after authorization returns the menu + rbac of the user. The interface is rendered based on the user's permissions. When the list of permissions is changed, for example by an administrator, an updated list of roles is sent to the user via websocket. The interface is being rebuilt.
And on the server, I always check whether the user is allowed to perform this action.