Fixed Permissions

Man kann nun pro Route mehrere permissions setzen.

src/boot/login.ts

@@ -1,7 +1,7 @@
 import { boot } from 'quasar/wrappers';
 import { StateInterface } from 'src/store';
 import { RouteRecord } from 'vue-router';
-import { Store } from 'vuex';
+import { Store } from 'vuex'
 
 export default boot<Store<StateInterface>>(({ router, store }) => {
   router.beforeEach((to, from, next) => {
@@ -25,11 +25,15 @@ export default boot<Store<StateInterface>>(({ router, store }) => {
           }
           if (
             to.matched.every((record: RouteRecord) => {
-              if (!('meta' in record) || !('permission' in record.meta))
+              if (!('meta' in record) || !('permissions' in record.meta))
                 return true;
-              return permissions.includes(
-                (<{ permission: string }>record.meta).permission
-              );
+              const test = record.meta.permissions.every((permission: string) => {
+                return permissions.includes(
+                  permission
+                );
+              })
+              console.log('permissions', test)
+              return test
             })
           ) {
             next();

src/boot/plugins.ts

@@ -76,7 +76,8 @@ function combineMainLinks(
           title: sourcePluginChildLink.title,
           icon: sourcePluginChildLink.icon,
           link: sourcePluginChildLink.name,
-          name: sourcePluginChildLink.name
+          name: sourcePluginChildLink.name,
+          permissions: sourcePluginChildLink.meta?.permissions
         });
       }
     );
@@ -85,7 +86,8 @@ function combineMainLinks(
       title: source.title,
       icon: source.icon,
       link: source.name,
-      name: source.name
+      name: source.name,
+      permissions: source.meta?.permissions
     };
     source.children?.forEach(child => {
       if (mainLink.children === undefined) {
@@ -95,7 +97,8 @@ function combineMainLinks(
         title: child.title,
         icon: child.icon,
         link: child.name,
-        name: child.name
+        name: child.name,
+        permissions: child.meta?.permissions
       });
     });
     target.push(mainLink);
@@ -111,7 +114,8 @@ function loadShortCuts(
     if (route.shortcut) {
       target.push(<FG_Plugin.ShortCutLink>{
         link: route.name,
-        icon: route.icon
+        icon: route.icon,
+        permissions: route.meta?.permissions
       });
     }
     if (route.children) {

src/layouts/MainLayout.vue

@@ -28,7 +28,8 @@
             :key="'shortcut' + index"
             :link="shortcut.link"
             :icon="shortcut.icon"
-          />
+            v-if="hasPermissions(shortcut.permissions)"
+  />
         </div>
         <q-btn flat round dense icon="mdi-exit-to-app" @click="logout()" />
       </q-toolbar>
@@ -50,6 +51,7 @@
           :title="link.title"
           :link="link.link"
           :icon="link.icon"
+          v-if="hasPermissions(link.permissions)"
         />
       </q-list>
       <q-separator />
@@ -63,6 +65,7 @@
           :title="link.title"
           :link="link.link"
           :icon="link.icon"
+          v-if="hasPermissions(link.permissions)"
         />
       </q-list>
 
@@ -86,6 +89,7 @@
         :title="link.title"
         :link="link.link"
         :icon="link.icon"
+        v-if="hasPermissions(link.permissions)"
       />
     </q-drawer>
 
@@ -180,6 +184,15 @@ export default defineComponent({
         });
     }
 
+    function hasPermissions(permissions: FG.Permission[] | undefined) {
+      if (permissions) {
+        return permissions.every(permission => {
+          return ctx.root.$store.getters['user/permissions'].includes(permission)
+        })
+      }
+      return true
+    }
+
     return {
       leftDrawerOpen,
       leftDrawerMini,
@@ -187,7 +200,8 @@ export default defineComponent({
       links,
       pluginChildLinks,
       shortcuts,
-      logout
+      logout,
+      hasPermissions
     };
   }
 });

src/plugins.d.ts

@@ -5,6 +5,7 @@ declare namespace FG_Plugin {
   interface ShortCutLink {
     link: string;
     icon: string;
+    permissions?: string[];
   }
 
   interface PluginRouteConfig extends RouteConfig {
@@ -12,6 +13,7 @@ declare namespace FG_Plugin {
     title: string;
     icon: string;
     children?: PluginRouteConfig[];
+    meta?: {permissions?: string[]}
   }
 
   interface Plugin {
@@ -32,6 +34,7 @@ declare namespace FG_Plugin {
     title: string;
     link: string;
     icon: string;
+    permissions?: string[]
   }
 
   interface LoadedPlugin {

src/plugins/user/pages/MainPage.vue

@@ -13,6 +13,7 @@
               :title="route.title"
               :icon="route.icon"
               :link="route.name"
+              v-if="hasPermissions(route.permissions)"
             />
           </q-list>
         </q-card-section>
@@ -33,7 +34,15 @@ export default defineComponent({
     const checkMain = computed(() => {
       return root.$route.matched.length == 2;
     });
-    return { checkMain, mainRoutes };
+    function hasPermissions(permissions: FG.Permission[] | undefined) {
+      if (permissions) {
+        return permissions.every(permission => {
+          return root.$store.getters['user/permissions'].includes(permission)
+        })
+      }
+      return true
+    }
+    return { checkMain, mainRoutes, hasPermissions};
   }
 });
 </script>

src/plugins/user/routes/index.ts

@@ -6,7 +6,7 @@ const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
     path: 'user',
     name: 'user',
     component: () => import('../pages/MainPage.vue'),
-    meta: { permission: 'user' },
+    meta: { permissions: ['user'] },
     children: [
       {
         title: 'Hauptkanal',
@@ -14,7 +14,7 @@ const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
         path: 'user-main',
         name: 'user-main',
         shortcut: false,
-        meta: { permission: 'user' },
+        meta: { permissions: ['user'] },
         component: () => import('../pages/User.vue')
       },
       {
@@ -23,7 +23,7 @@ const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
         path: 'settings',
         name: 'user-settings',
         shortcut: true,
-        meta: { permission: 'user' },
+        meta: { permissions: ['user'] },
         component: () => import('../pages/Settings.vue')
       }
     ]

src/plugins/user/store/user.ts

@@ -166,6 +166,13 @@ const getters: GetterTree<UserStateInterface, StateInterface> = {
   },
   loading({ updateUserLoading, getUserLoading }) {
     return updateUserLoading || getUserLoading;
+  },
+  permissions({user}) {
+    let permissions: string[] = []
+    user.roles.forEach(role => {
+      permissions = permissions.concat(role.permissions);
+    });
+    return permissions
   }
 };