vue-acl

import Vue from 'vue'; import Router from 'vue-router'; import App from './App.vue'; import { AclInstaller, AclCreate, AclRule } from 'vue-acl'; // 1. Define your Vue Router instance Vue.use(Router); const router = new Router({ routes: [ { path: '/', name: 'public', component: { template: '<div>Public Page <button v-if="$acl.check(\'admin\')">Admin Button</button></div>' }, meta: { rule: 'isPublic' } }, { path: '/admin', name: 'admin', component: { template: '<div>Admin Page <button v-if="$acl.not.check(\'public\')">Only Admin Button</button></div>' }, meta: { rule: new AclRule('admin').generate() } }, { path: '/error', name: 'notfound', component: { template: '<div>404 Not Found</div>' }, meta: { rule: '*' } } ] }); // 2. Install vue-acl plugin Vue.use(AclInstaller); // 3. Create your Acl instance const acl = new AclCreate({ initial: 'public', notfound: { path: '/error', forwardQueryParams: true }, router, acceptLocalRules: true, globalRules: { isAdmin: new AclRule('admin').generate(), isPublic: new AclRule('public').or('admin').generate() }, middleware: async acl => { // Simulate API call for user permissions await new Promise(resolve => setTimeout(resolve, 500)); // In a real app, you'd fetch user roles from an API const userRole = process.env.VUE_APP_USER_ROLE ?? 'public'; // Example: 'admin' or 'public' acl.change(userRole); } }); // 4. Mount your Vue app with router and acl Vue.config.productionTip = false; new Vue({ router, acl, render: h => h(App) }).$mount('#app'); // App.vue (minimal for demonstration) // <template><div><router-link to="/">Public</router-link> | <router-link to="/admin">Admin</router-link><router-view /></div></template> // <script>export default { name: 'App' }</script>