williamcruzme / vue-gates

🔒 A Vue.js & Nuxt.js plugin that allows you to use roles and permissions in your components or DOM elements, also compatible as middleware and methods.
https://williamcruzme.github.io/vue-gates/
MIT License
263 stars 31 forks source link

Where is need to set roles and permissions? #14

Closed s-fog closed 4 years ago

s-fog commented 4 years ago

I try to set it in store, but this.$laravel is not exists there. Where i need to do it this.$laravel.setPermissions(this.$store.state.permissions); this.$laravel.setRoles(this.$store.state.roles);

I can set it in some component when 'mounted' or 'created' triggered, but it is no sense, cause it is already rendered.

Could someone help me, please?

s-fog commented 4 years ago

If setting this in app.js, error is coming that 'Cannot read property '$laravel' of undefined' I cant find place when i can set it. Help please

s-fog commented 4 years ago

Please help somebody

williamcruzme commented 4 years ago

@s-fog You could do it from the created method of a layout, or from Vuex when you get the user's profile.

denyo256 commented 4 years ago

Actually I do have the same problem when trying to access this.$gates in my Vuex store. As this refers to the store, I do get the following error: Uncaught (in promise) TypeError: Cannot read property '$gates' of undefined

I try to call it in my store after logging in (and setting the user data)

axios.get('/api/roles').then(response => { commit('SET_ROLES', response.data) this.$gates.setRoles(response.data) })

williamcruzme commented 4 years ago

@denyo256 this cannot be used from Vuex, but there are two ways to access $gates from Vuex:

Nuxt.js:

actions: {
  yourAction ({ commit }, { req, $gates }) {
    const user = req.session.user
    if (user) {
      $gates.setRoles(user.roles)
      $gates.setPermissions(user.permissions)

      commit('user', user)
    }
  }
}

https://williamcruzme.github.io/vue-gates/#/usage/ssr?id=the-nuxtserverinit-action

Vue.js

import Vue from 'vue';

export const actions = {
  yourAction() {
    Vue.prototype.$gates.setRoles(['admin']);
  },
};

https://github.com/vuejs/vuex/issues/1399