Implement UI permission checks

Author: lcharette

packages/skeleton/app/assets/components/NavBar.vue

@@ -24,9 +24,13 @@ const auth = useAuthStore()
             :username="auth.user.full_name"
             :avatar="auth.user.avatar"
             :meta="auth.user.user_name">
-            <UFNavBarUserCardButton :label="$t('ADMIN_PANEL')" :to="{ name: 'admin.dashboard' }" />
+            <UFNavBarUserCardButton
+                :label="$t('ADMIN_PANEL')"
+                v-if="$checkAccess('uri_dashboard')"
+                :to="{ name: 'admin.dashboard' }" />
             <UFNavBarUserCardButton
                 :label="$t('ACCOUNT.SETTINGS')"
+                v-if="$checkAccess('update_account_settings')"
                 :to="{ name: 'account.settings' }" />
             <UFNavBarUserCardButton :label="$t('LOGOUT')" @click="auth.logout()" />
         </UFNavBarUserCard>

packages/sprinkle-account/app/assets/routes/index.ts

@@ -55,16 +55,31 @@ export default [
             {
                 path: 'profile',
                 name: 'account.settings.profile',
+                meta: {
+                    permission: {
+                        slug: 'update_account_settings'
+                    }
+                },
                 component: () => import('../views/UserSettingsProfile.vue')
             },
             {
                 path: 'password',
                 name: 'account.settings.password',
+                meta: {
+                    permission: {
+                        slug: 'update_account_settings'
+                    }
+                },
                 component: () => import('../views/UserSettingsPassword.vue')
             },
             {
                 path: 'email',
                 name: 'account.settings.email',
+                meta: {
+                    permission: {
+                        slug: 'update_account_settings'
+                    }
+                },
                 component: () => import('../views/UserSettingsEmail.vue')
             }
         ]

packages/sprinkle-admin/app/assets/components/SidebarMenuItems.vue

@@ -1,15 +1,37 @@
 <template>
-    <UFSideBarItem :to="{ name: 'admin.dashboard' }" faIcon="gauge-high" :label="$t('DASHBOARD')" />
-    <UFSideBarItem :to="{ name: 'admin.users' }" faIcon="user" :label="$t('USER.PAGE')" />
     <UFSideBarItem
+        v-if="$checkAccess('uri_dashboard')"
+        :to="{ name: 'admin.dashboard' }"
+        faIcon="gauge-high"
+        :label="$t('DASHBOARD')" />
+    <UFSideBarItem
+        v-if="$checkAccess('uri_users')"
+        :to="{ name: 'admin.users' }"
+        faIcon="user"
+        :label="$t('USER.PAGE')" />
+    <UFSideBarItem
+        v-if="$checkAccess('uri_activities')"
         :to="{ name: 'admin.activities' }"
         faIcon="list-check"
         :label="$t('ACTIVITY.PAGE')" />
-    <UFSideBarItem :to="{ name: 'admin.roles' }" faIcon="address-card" :label="$t('ROLE.PAGE')" />
     <UFSideBarItem
+        v-if="$checkAccess('uri_roles')"
+        :to="{ name: 'admin.roles' }"
+        faIcon="address-card"
+        :label="$t('ROLE.PAGE')" />
+    <UFSideBarItem
+        v-if="$checkAccess('uri_permissions')"
         :to="{ name: 'admin.permissions' }"
         faIcon="key"
         :label="$t('PERMISSION.PAGE')" />
-    <UFSideBarItem :to="{ name: 'admin.groups' }" faIcon="users" :label="$t('GROUP.PAGE')" />
-    <UFSideBarItem :to="{ name: 'admin.config' }" faIcon="gear" :label="$t('SITE_CONFIG')" />
+    <UFSideBarItem
+        v-if="$checkAccess('uri_groups')"
+        :to="{ name: 'admin.groups' }"
+        faIcon="users"
+        :label="$t('GROUP.PAGE')" />
+    <UFSideBarItem
+        v-if="$checkAccess('view_system_info') || $checkAccess('clear_cache')"
+        :to="{ name: 'admin.config' }"
+        faIcon="gear"
+        :label="$t('SITE_CONFIG')" />
 </template>

packages/sprinkle-admin/app/assets/routes/ActivitiesRoutes.ts

@@ -6,6 +6,9 @@ export default [
             auth: {
                 redirect: { name: 'account.login' }
             },
+            permission: {
+                slug: 'uri_activities'
+            },
             title: 'ACTIVITY.PAGE',
             description: 'ACTIVITY.PAGE_DESCRIPTION'
         },

packages/sprinkle-admin/app/assets/routes/ConfigRoutes.ts

@@ -15,11 +15,21 @@ export default [
             {
                 path: 'info',
                 name: 'admin.config.info',
+                meta: {
+                    permission: {
+                        slug: 'view_system_info'
+                    }
+                },
                 component: () => import('../views/ConfigInfoView.vue')
             },
             {
                 path: 'cache',
                 name: 'admin.config.cache',
+                meta: {
+                    permission: {
+                        slug: 'clear_cache'
+                    }
+                },
                 component: () => import('../views/ConfigCacheView.vue')
             }
         ]

packages/sprinkle-admin/app/assets/routes/DashboardRoutes.ts

@@ -6,6 +6,9 @@ export default [
             auth: {
                 redirect: { name: 'account.login' }
             },
+            permission: {
+                slug: 'uri_dashboard'
+            },
             title: 'DASHBOARD'
         },
         component: () => import('../views/DashboardView.vue')

packages/sprinkle-admin/app/assets/routes/GroupsRoutes.ts

@@ -12,15 +12,23 @@ export default [
             {
                 path: '',
                 name: 'admin.groups',
+                meta: {
+                    permission: {
+                        slug: 'uri_groups'
+                    }
+                },
                 component: () => import('../views/GroupsView.vue')
             },
             {
                 path: 'g/:slug',
                 name: 'admin.group',
-                component: () => import('../views/GroupView.vue'),
                 meta: {
-                    description: 'GROUP.INFO_PAGE'
-                }
+                    description: 'GROUP.INFO_PAGE',
+                    permission: {
+                        slug: 'uri_group'
+                    }
+                },
+                component: () => import('../views/GroupView.vue')
             }
         ]
     }

packages/sprinkle-admin/app/assets/routes/PermissionsRoutes.ts

@@ -2,6 +2,9 @@ export default [
     {
         path: 'permissions',
         meta: {
+            permission: {
+                slug: 'uri_permissions'
+            },
             auth: {
                 redirect: { name: 'account.login' }
             },

packages/sprinkle-admin/app/assets/routes/RolesRoutes.ts

@@ -12,15 +12,23 @@ export default [
             {
                 path: '',
                 name: 'admin.roles',
+                meta: {
+                    permission: {
+                        slug: 'uri_roles'
+                    }
+                },
                 component: () => import('../views/RolesView.vue')
             },
             {
                 path: 'r/:slug', // roles/r/{slug}
                 name: 'admin.role',
-                component: () => import('../views/RoleView.vue'),
                 meta: {
-                    description: 'ROLE.INFO_PAGE'
-                }
+                    description: 'ROLE.INFO_PAGE',
+                    permission: {
+                        slug: 'uri_role'
+                    }
+                },
+                component: () => import('../views/RoleView.vue')
             }
         ]
     }

packages/sprinkle-admin/app/assets/routes/UserRoutes.ts

@@ -12,16 +12,24 @@ export default [
             {
                 path: '',
                 name: 'admin.users',
+                meta: {
+                    permission: {
+                        slug: 'uri_users'
+                    }
+                },
                 component: () => import('../views/UsersView.vue')
             },
             {
                 path: 'u/:user_name', // users/u/{user_name}
                 name: 'admin.user',
-                component: () => import('../views/UserView.vue'),
                 meta: {
                     title: 'USER.PAGE',
-                    description: 'USER.INFO_PAGE'
-                }
+                    description: 'USER.INFO_PAGE',
+                    permission: {
+                        slug: 'uri_user'
+                    }
+                },
+                component: () => import('../views/UserView.vue')
             }
         ]
     }