How to properly organize the transfer of rights for a specific user role from the back-end to the front-end?

Question

Vue.js

Good evening!

There is a front on Vue and a back on Go. There are many roles and everyone has a different combination of accesses. There is an idea to simply get the corresponding list of allowed endpoints and methods by the token and hang up a check (show / not show) on each button on the front. But it doesn't seem cool.

Do not tell me how to do it right?

Answer 1

Pass action links to api. No link - no access, and the button on the front is not displayed.

_links: [
  create: 'api.ru/action-crate',
  read: 'api.ru/action-read',
  update: 'api.ru/action-update',
  delete: 'api.ru/action-delete'
]

Answer 2

How would I do.
The course of my thoughts.
...
In an ideal world, back end and frond and should not know about each other's existence, but that's not the point.
Business logic in the back end will have its own.
Business logic on the site, mobile application will also have its own.
It would be nice to have a special method that returns these same privileges as a list.
And only then, in (mobile application, website), based on the data received, hide certain sections.
Again, if the user, using the UI , tries to get some data via the API, He must definitely act with certain permissions that are programmed in thebackend .
What do I mean, even if you hide the buttons visually, an attacker or user without privileges can still access the data.
Therefore, first of all, permissions, roles need to be programmed at the API level