How to check user permissions in nuxtjs application?

Question

Vue.js

Need to close some routes and not show some parts of components depending on user permissions. Before that, I read about RBAC and the principle of operation of this system seems to fit.
The first thought was to receive after login, along with the user object, all of his permissions, save them in vuex, and then check through the getter for the presence of the required permission inside the components and when switching between routes, or during rendering on the server, check for the presence of a token and, if it exists, receive from it user and save to the side.
But why then use libraries like vue-kindergarten or casl?
And is it possible to somehow take into account the hierarchy of operations, for example, if there is an "updatePost" operation and an "updateOwnPost" task whose child is "updatePost", and two users, one has the "updatePost" permission, the other "updateOwnPost". Whether it is possible to make that at check in a permission template on "updatePost" at the first it was checked only it, and at the second check rose on hierarchy to "updateOwnPost"? Or should it be two different permissions and check the presence of both in the template?
Or is something else usually used for this?

Answer 1

The application itself runs in an untrusted environment, so all (meaningful) user actions must be verified in a trusted environment (on the server). Accordingly, there should be an API by which each action is checked. The links themselves can probably be loaded from the server at startup, but all the data when you click on them must be checked on the server every time.

Answer 2

Well, since you're using nuxt, why not use the official auth module ? In this module, when you get a user object, you can pass scope. And then apply like this: If you want it yourself, then look at the source. But the meaning is this, you get a token, save the token, get the user object from the token and store it in vuex. You can implement the scope check logic yourself whatever you want if you write your own getter for vuex that will work with the saved user object this.$auth.hasScope('admin')