How to handle level permissions in Vue Js


Hello to everyone,

I have a general question on “Vue JS best pratice”.

I am building a REST API with Sails JS as backend and Vue JS as frontend. The level permissions are defined in my backend with policies acting like a hook anytime a route is called from my front-end app so I can verify the user’s permission.

On my authentified web interface, for example, if I’d like to build a function for only one of my pre defined role, how should I handle it ?

Should I store the role of the user when he logs in and use a simple v-if ? But it doesn’t seem very secure, is it ?

Any suggestion would be appreciates :slight_smile:

Thank you,



Seems like this is an older question. But appear on top of google search. after some research i got my answer.

I’ve been looking into this too. you can use CASL i prefer saving my user information on $rootScope of vue using Vue.prototype.$appName = 'User Data and permission' and simply use v-if.

I think there is no secure way on front-end actually because user had control on browser but trying to minimize security fault would be nice. v-if still relevant.

I did not use vuex for storing user info because it simply lost when user reload the page. you can use vue-stash or make persist storage with vuex-persisted-state.