Dynamically modifying globalRules

[konrad-ch]

Hello, I want to do something like this:

1. make basic globalRules like:

globalRules: {
  editor: new AclRule('editor').generate(),
  accessUsersRoute: new AclRule('admin').generate()
}

2. fetch permission data from my api
3. modify/refresh accessUsersRoute rule to add "editor": accessUsersRoute = new AclRule('admin').or('editor').generate()

How can I do that? And if it's not possible then how can I fetch data from my api and build globalRules based on that BEFORE importing router and AclCreate and without making some ugly synchronous ajax call?

Thanks for any help!

[dharmdeep]

Hello @konrad-ch
To achieve this i am storing permission as array in local storage with userInfo. if someone change the permission then i updating $store's UserRole also updating my localstorage. so there is no need to call api on everytime & permission can be return in login api's response.

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 = {}
//roles permission code
export default new AclCreate({
  initial  : initialRole,
  notfound : '/error-403',
  router,
  acceptLocalRules : true,
  globalRules: rolePermissions,
})

just a suggestion.

Thanks

[ekoeryanto]

you can fetch the permission before vue mounted

[dharmdeep]

@ekoeryanto can you please share the code & more provide explanation because i am new to vue and i think i am doing wrong implementation with acl. so please explain with code how to implement acl , also api request, store commit, router things.

Thanks in advance !!

[leonardovilarinho]

Hello, can you show more of the code? Where the request is made.

Usually I do it in the middleware method of the API or in the created main.js