Question

我想根据用户角色显示vx-sidebar的侧边栏项目。我正在使用acl插件。有两个用户admin和editor。两者都有不同的侧边栏项目。我已经设置了角色和所有内容。但是，每次用户登录时，侧栏项目最初都不会呈现，我必须刷新页面，然后侧栏项目才根据角色呈现。我正在使用Firebase Firestore。并且我将初始角色设置为在管理员和编辑器的两个不同集合中找到的user.uid。

我还在本地存储和vuex.store中设置了用户角色，但是这些元素在初次登录时仍然无法呈现。请对此提供帮助。我花了几天的时间解决这个问题。但找不到解决方法

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',

                    }
                },

根据用户角色显示侧边栏项目

0 个答案: