src/boot/login.ts

@@ -27,13 +27,15 @@ export default boot<Store<StateInterface>>(({ router, store }) => {
             to.matched.every((record: RouteRecord) => {
               if (!('meta' in record) || !('permissions' in record.meta))
                 return true;
-              const test = record.meta.permissions.every((permission: string) => {
-                return permissions.includes(
-                  permission
-                );
-              })
-              console.log('permissions', test)
-              return test
+              if (record.meta) {
+                if ((<{permissions: FG.Permission[]}>record.meta).permissions) {
+                  return (<{permissions: FG.Permission[]}>record.meta).permissions.every((permission: string) => {
+                    return permissions.includes(
+                      permission
+                    );
+                  })
+                }
+              }
             })
           ) {
             next();

src/components/navigation/EssentialLink.vue

@@ -1,20 +1,22 @@
 <template>
-  <q-item clickable tag="a" target="self" :to="{ name: link }">
+  <q-item clickable tag="a" target="self" :to="{ name: link }" v-if="hasPermissions">
     <q-item-section v-if="icon" avatar>
-      <q-icon :name="icon" />
+      <q-icon :name="icon"/>
     </q-item-section>
 
     <q-item-section>
       <q-item-label>{{ realTitle }}</q-item-label>
       <q-item-label caption>
-        {{ caption }}
+        {{ permissions }}
       </q-item-label>
     </q-item-section>
   </q-item>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api';
+import {computed, defineComponent} from '@vue/composition-api';
+import {Store} from 'vuex'
+import {StateInterface} from "src/store";
 
 export default defineComponent({
   name: 'EssentialLink',
@@ -37,10 +39,13 @@ export default defineComponent({
     icon: {
       type: String,
       default: ''
+    },
+    permissions: {
+      default: undefined
     }
   },
 
-  setup(props, { root }) {
+  setup(props, {root}) {
     let title = computed<string>(() => {
       if (props.title.includes('loadFromStore')) {
         const startIndex = props.title.indexOf('(') + 1;
@@ -53,7 +58,18 @@ export default defineComponent({
       }
       return props.title;
     });
-    return { realTitle: title };
+
+    const hasPermissions = computed(() => {
+      let permissions = props.permissions
+      if (permissions) {
+        return (<string[]>permissions).every(permission => {
+          return (<{'user/permissions': string[]}>(<Store<StateInterface>>root.$store).getters)['user/permissions'].includes(permission)
+        })
+      }
+      return true
+    })
+
+    return {realTitle: title, hasPermissions};
   }
 });
 </script>

src/components/navigation/ShortCutLink.vue

@@ -1,9 +1,11 @@
 <template>
-  <q-btn flat dense :icon="icon" :to="{ name: link }" />
+  <q-btn flat dense :icon="icon" :to="{ name: link }" v-if="hasPermissions"/>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import {computed, defineComponent} from '@vue/composition-api';
+import {Store} from "vuex";
+import {StateInterface} from "src/store";
 export default defineComponent({
   name: 'ShortCutLink',
   props: {
@@ -14,7 +16,23 @@ export default defineComponent({
     icon: {
       required: true,
       type: String
+    },
+    permissions: {
+      default: undefined
     }
+  },
+  setup(props, {root}) {
+
+    const hasPermissions = computed(() => {
+      let permissions = props.permissions
+      if (permissions) {
+        return (<string[]>permissions).every(permission => {
+          return (<{'user/permissions': string[]}>(<Store<StateInterface>>root.$store).getters)['user/permissions'].includes(permission)
+        })
+      }
+      return true
+    })
+    return {hasPermissions}
   }
 });
 </script>

src/layouts/MainLayout.vue

@@ -14,7 +14,7 @@
 
         <q-toolbar-title>
           <q-avatar>
-            <img src="logo.svg" />
+            <img src="logo.svg"/>
           </q-avatar>
           <span class="gt-xs">
             Flaschengeist
@@ -28,10 +28,10 @@
             :key="'shortcut' + index"
             :link="shortcut.link"
             :icon="shortcut.icon"
-            v-if="hasPermissions(shortcut.permissions)"
-  />
+            :permissions="shortcut.permissions"
+          />
         </div>
-        <q-btn flat round dense icon="mdi-exit-to-app" @click="logout()" />
+        <q-btn flat round dense icon="mdi-exit-to-app" @click="logout()"/>
       </q-toolbar>
     </q-header>
 
@@ -51,10 +51,10 @@
           :title="link.title"
           :link="link.link"
           :icon="link.icon"
-          v-if="hasPermissions(link.permissions)"
+          :permissions="link.permissions"
         />
       </q-list>
-      <q-separator />
+      <q-separator/>
 
       <!-- Plugin functions -->
       <!-- <router-view name="plugin-nav" /> -->
@@ -65,7 +65,7 @@
           :title="link.title"
           :link="link.link"
           :icon="link.icon"
-          v-if="hasPermissions(link.permissions)"
+          :permissions="link.permissions"
         />
       </q-list>
 
@@ -81,7 +81,7 @@
         />
       </div>
 
-      <q-separator />
+      <q-separator/>
 
       <essential-link
         v-for="(link, index) in links"
@@ -89,12 +89,12 @@
         :title="link.title"
         :link="link.link"
         :icon="link.icon"
-        v-if="hasPermissions(link.permissions)"
+        :permissions="link.permissions"
       />
     </q-drawer>
 
     <q-page-container>
-      <router-view />
+      <router-view/>
     </q-page-container>
   </q-layout>
 </template>
@@ -102,11 +102,11 @@
 <script lang="ts">
 import EssentialLink from 'components/navigation/EssentialLink.vue';
 import ShortCutLink from 'components/navigation/ShortCutLink.vue';
-import { Screen } from 'quasar';
-import { defineComponent, ref, computed } from '@vue/composition-api';
-import { Store } from 'vuex';
-import { StateInterface } from 'src/store';
-import { FG_Plugin } from 'src/plugins';
+import {Screen} from 'quasar';
+import {defineComponent, ref, computed} from '@vue/composition-api';
+import {Store} from 'vuex';
+import {StateInterface} from 'src/store';
+import {FG_Plugin} from 'src/plugins';
 
 const links = [
   {
@@ -140,7 +140,7 @@ declare module 'vue/types/vue' {
 
 export default defineComponent({
   name: 'MainLayout',
-  components: { EssentialLink, ShortCutLink },
+  components: {EssentialLink, ShortCutLink},
   setup(_, ctx) {
     const leftDrawer = ref(false);
 
@@ -151,6 +151,7 @@ export default defineComponent({
       })
     );
     const leftDrawerMini = ref(false);
+
     function leftDrawerClicker() {
       if (leftDrawerMini.value) {
         leftDrawerMini.value = false;
@@ -184,15 +185,6 @@ 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,
@@ -200,8 +192,7 @@ export default defineComponent({
       links,
       pluginChildLinks,
       shortcuts,
-      logout,
-      hasPermissions
+      logout
     };
   }
 });

src/plugins/balance/pages/MainPage.vue

@@ -13,7 +13,7 @@
               :title="route.title"
               :icon="route.icon"
               :link="route.name"
-              v-if="hasPermissions(route.permissions)"
+              :permissions="route.meta.permissions"
             />
           </q-list>
         </q-card-section>
@@ -34,15 +34,7 @@ export default defineComponent({
     const checkMain = computed(() => {
       return root.$route.matched.length == 2;
     });
-    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 };
+    return { checkMain, mainRoutes };
   }
 });
 </script>

src/plugins/user/components/settings/Sessions.vue

@@ -66,7 +66,7 @@ export default defineComponent({
         ? 'mdi-linux'
         : platform == 'windows'
         ? 'mdi-microsoft-windows'
-        : platform == 'apple'
+        : platform == 'macos'
         ? 'mdi-apple'
         : 'mdi-help';
     }

src/plugins/user/pages/MainPage.vue

@@ -13,7 +13,7 @@
               :title="route.title"
               :icon="route.icon"
               :link="route.name"
-              v-if="hasPermissions(route.permissions)"
+              :permissions="route.meta.permissions"
             />
           </q-list>
         </q-card-section>
@@ -34,15 +34,7 @@ export default defineComponent({
     const checkMain = computed(() => {
       return root.$route.matched.length == 2;
     });
-    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};
+    return { checkMain, mainRoutes};
   }
 });
 </script>