Vue CASL получить роль пользователя от Vuex

139

25 октября 2019, 21:10

Есть тестовый сайт на spring boot

В Vuex храним объект profile который хранит в себе roles

Есть модуль для разграничение доступа для пользователя на стороне vue - CASL

Как все работает понятно, но для статических данных

ability.js

import {AbilityBuilder} from '@casl/ability'
var role = 'ADMIN'
export default
AbilityBuilder.define(can => {
    switch (role) {
        case 'USER':
            can('read', 'Help Desk Task');
            break;
        case 'ADMIN':
            can('update', 'Help Desk Task');
            break;
    }
})

Как в переменную role получить данные из vuex state?

Если я делаю следующим путем то на момент обработки этого кода profile еще не инициализирован и я ничего не получу, если получать через геттер тоже самое

import store from 'store/store'
var role = store.state.profile.roles

Вот main.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import '@babel/polyfill'
import store from 'store/store'
import VueResource from 'vue-resource'
import App from 'pages/App.vue'
import 'vuetify/dist/vuetify.min.css'
import router from 'router/router'
import { abilitiesPlugin } from '@casl/vue'
import ability from 'ability/ability'
Vue.use(abilitiesPlugin, ability)
Vue.use(Vuetify)
Vue.use(VueResource)
Vue.use(require('vue-moment'))
new Vue({
    el: '#app',
    router,
    store,
    render: a => a(App),
})

Или как в main.js получить роль пользователя из Vuex

Answer 1

Была такая же проблема. Можно поступить следующим образом:

ability.js

import { AbilityBuilder, Ability } from '@casl/ability'
// инициализируем ability, но роли еще не известны
export const ability =
   AbilityBuilder.define(can => {
      // can('load', 'all');
});
// функция для создания правил, воспользуемся когда нам потребуется
export function defineAbilityFor(role) {
  const { rules, can, cannot } = AbilityBuilder.extract();
  switch (role) {
    case 'USER':
        can('read', 'Help Desk Task');
        break;
    case 'ADMIN':
        can('update', 'Help Desk Task');
        break;
   }
   return new Ability(rules);
}

Например, имеется компонент Login.vue или любой другой, зависит от вашего приложения, это только в качестве примера:

import store from 'store/store'
import { defineAbilityFor } from '../abilities'
const role = store.state.profile.roles
    ...
methods: {
    defineRole() {
      // в свойствах компонента доступен объект $ability
      // обновляем правила когда нам это необходимо
      this.$ability.update(
           defineAbilityFor(role).rules
      );
    }
}