Update permission in acl

[dharmdeep]

Hello sir,

I implemented vue-acl it works but when i update the permission then my menus are not hide & showing instantly as per permission on frontend.

There are only single role but i have add, edit, delete, view permission for all menu. when i update these permission then vue reactive property is not working.

Its working after manual refresh of the page.

& once i manually refresh the page then acl.js file is calling , i add this path in main.js as well.

This may be because after updating the permission, vue acl instance is not updating, also global rules are not updating.

I try a lot from past 2 days but not found any help.

my acl.js file like

import Vue from 'vue'
import { AclInstaller, AclCreate, AclRule } from 'vue-acl'
import router from '@/router'
Vue.use(AclInstaller)  
let initialRole = 'admin'
let permissionarray = null;
const userInfo = JSON.parse(localStorage.getItem('userInfo'))
if (userInfo && userInfo.userRole) initialRole = userInfo.userRole
if (userInfo && userInfo.permissions) permissionarray = userInfo.permissions
const rolePermissions = {}

// Default Permission
rolePermissions[initialRole] = new AclRule(initialRole).generate()
rolePermissions['default'] = new AclRule('default').or(initialRole).generate()
// Roles Permission
for (var key in permissionarray) {
	for(var key2 in permissionarray[key])
	{
		if(permissionarray[key][key2] == true){
			rolePermissions[key+'_'+key2] = new AclRule(key+'_'+key2).or(initialRole).generate()
		}else{
			rolePermissions[key+'_'+key2] = new AclRule(key+'_'+key2).generate()
		}
	}
}
//console.log(rolePermissions);
export default new AclCreate({
  initial  : initialRole,
  notfound : '/error-403',
  router,
  acceptLocalRules : true,
  globalRules: rolePermissions,
})

my main.js file like File Name: main.js Description: main vue(js) file

import Vue from 'vue'
import App from './App.vue'

// Vuesax Component Framework
import Vuesax from 'vuesax'

Vue.use(Vuesax) 

// axios
import axios from './axios.js'
Vue.prototype.$http = axios


// Theme Configurations
import '../themeConfig.js'
 

// Globally Registered Components
import './globalComponents.js'

// Vue Router
import router from './router'


// Vuex Store
import store from './store/store'

// Vuexy Admin Filters
import './filters/filters'

import interceptorsSetup from './helpers/interceptors'
interceptorsSetup()


// VeeValidate
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)

import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
  load: {
    // Add your API key here
    key: 'xyz',
    libraries: 'places' // This is required if you use the Auto complete plug-in
  }
})

// Vuejs - Vue wrapper for hammerjs
import { VueHammer } from 'vue2-hammer'
Vue.use(VueHammer)


// PrismJS
import 'prismjs'
import 'prismjs/themes/prism-tomorrow.css'

// ACL
import acl from './acl/acl'

Vue.config.productionTip = false
 

new Vue({
  router,
  store,
  acl,
  render: h => h(App)
}).$mount('#app')

Thanks in advance.

[ikirux]

hey @dharmdeep same problem here ... did you find a solution to this issue?

[dharmdeep]

Hello @ikirux i am not find any solution for this. sorry to say i searched a lot but there's no document on this package which describes step by step implementation.

[ikirux]

Hey @dharmdeep I managed to fix the problem changing the correct role when the user login:

` // Before push the user to the home page let initialRole = "public"; const userInfo = JSON.parse( localStorage.getItem("userInfo") );

if (userInfo && userInfo.userRole) initialRole = userInfo.userRole;

his.$acl.change(initialRole); this.$router.push("home");`

[summersongoncalves]

I had the same problem here. Has some way to change/update role by store (VUEX) ?

[ikirux]

Hey @summersongoncalves, I don't know if it's too late but with this code, I fixed my refresh problem:

let role = JSON.parse(localStorage.getItem("role"));

let initialRole = "public"; if (role) initialRole = role;

export default new AclCreate({ initial: initialRole, // ... });

[summersongoncalves]

Hi @ikirux , thnx for the reply and I'ts never late :D In my case with mutiples permissions I needed to set global rules like this:

let initialRole = 'default'
const permissions = JSON.parse(localStorage.getItem('permissions'))
const  rolePermissions = {}
// Default Permission
rolePermissions[initialRole] = new AclRule(initialRole).generate()
if (permissions) {
  for (let x = 0; x < permissions.length; x++) {   
    rolePermissions[`${permissions[x]}`] = new AclRule(`${permissions[x]}`).or(initialRole).generate()     
  }
}

after that, I pass to 'globalRules' All permissions I've to manage by VUEX.

Thx you all.