Отображение элементов боковой панели в соответствии с ролью пользователя - PullRequest
Новая
       10

Отображение элементов боковой панели в соответствии с ролью пользователя

1 голос
/ 30 сентября 2019

Я хочу отобразить элементы боковой панели vx-sidebar в соответствии с ролью пользователя. Я использую плагин acl. Есть два пользователя: администратор и редактор. Оба имеют разные элементы боковой панели. Я установил роли и все. Но каждый раз, когда пользователь входит в систему, элементы боковой панели не отображаются изначально, я должен обновить страницу, а затем элементы боковой панели отображаются в соответствии с ролью. Я использую Firebase FireStore. И я устанавливаю начальную роль user.uid, найденную в двух разных коллекциях admin и editor.

Я также установил роль пользователя в локальном хранилище и vuex.store, но все же элементы don 'Пожалуйста, помогите мне с этим. Я потратил дни на решение этой проблемы. Но не находит решения

acl.js 

import Vue from 'vue'
import { AclInstaller, AclCreate, AclRule } from 'vue-acl'
import router from '@/router'

Vue.use(AclInstaller)



let initialRole = localStorage.getItem('userRole')
console.log(initialRole)
export default new AclCreate({
  initial: initialRole,
  notfound: '/pages/not-authorized',
  router,
  acceptLocalRules: true,
  globalRules: {
    admin: new AclRule('admin').generate(),
    editor: new AclRule('editor').generate(),


  }
})

VxSidebarItem.vue 

    <div :class="[{'vs-sidebar-item-active':activeLink}, {'disabled-item pointer-events-none': isDisabled}]" class="vs-sidebar--item" v-if="canSee">


   computed: {
        canSee() {
            this.$acl.check(localStorage.getItem('userRole'));
             console.log(localStorage.getItem('userRole'))
            if(this.to) {
                return this.$acl.check(this.$router.match(this.to).meta.rule)
            }
            return true
        }
    },

router.js 

 {
                    path: '/',
                    redirect: '/dashboard/jobs'
                },
                {
                    path: '/dashboard/jobs',
                    name: 'Jobs',
                    component: () => import('./views/tpo/Jobs.vue'),
                    meta: {

                        rule:'admin',

                    }
                },
...