Add acl retrieval and nav guards for admin views

src/components/Home/LoginView.vue

@@ -22,7 +22,7 @@
 import { defineComponent } from '@vue/runtime-core';
 import { AxiosResponse } from 'axios';
 import HttpRequest from '../Lib/HttpRequest';
-import { plainToClass, plainToInstance } from 'class-transformer';
+import { plainToInstance } from 'class-transformer';
 import User from '../../model/User'
 
 export default defineComponent({
@@ -68,6 +68,14 @@ export default defineComponent({
             });
           });
 
+          HttpRequest.get(
+            'usersettings/acl'
+          ).then((response: AxiosResponse) => {
+            this.$store.dispatch('authStorage/setAcl', {
+              acl: response.data
+            });
+          });
+
           this.$router.push('/');
         }
       });

src/components/Lib/Enum/AclEnum.ts

@@ -0,0 +1,5 @@
+enum AclEnum {
+  USER_EDIT = 1,
+}
+
+export default AclEnum;

src/components/Lib/Router.ts

@@ -82,11 +82,21 @@ const routes = [
   },
   {
     path: "/settings/user",
-    component: UserList
+    component: UserList,
+    beforeEnter: () => {
+      if (!Store.getters['authStorage/isAdmin']) {
+        return false;
+      }
+    },
   },
   {
     path: "/settings/user/edit/:userId?",
     component: UserEdit,
+    beforeEnter: () => {
+      if (!Store.getters['authStorage/isAdmin']) {
+        return false;
+      }
+    },
   },
 ];
 

src/components/Navigation/Sidebar.vue

@@ -35,7 +35,7 @@
     <router-link to="/radiostations">{{ $t("radio_stations.title") }}</router-link>
   </div>
 
-  <div class="box">
+  <div class="box" v-if="isAdmin()">
     <div class="head">{{ $t("settings.title") }}</div>
     <router-link to="/settings/user">{{ $t("settings.user.title") }}</router-link>
   </div>
@@ -66,8 +66,11 @@ export default defineComponent({
 
         this.$router.push('/login')
       });
+    },
+    isAdmin(): boolean {
+      return this.$store.getters['authStorage/isAdmin'] == true;
     }
-  }
+  },
 })
 </script>
 

src/components/Store/Modules/AuthStorage.ts

@@ -1,11 +1,13 @@
 import UserInterface from "../../../model/UserInterface";
+import AclEnum from "../../Lib/Enum/AclEnum";
 
 const getDefaultState = () => {
   return {
     token: '' as string,
     user: null as null|UserInterface,
     language: 'en' as string,
     temporaryPlaylistId: null as null|string,
+    acl: [] as Array<number>,
   };
 };
 
@@ -18,6 +20,10 @@ export default {
     getToken: state => state.token,
     getLanguage: state => state.language,
     getTemporaryPlaylistId: state => state.temporaryPlaylistId,
+    getAcl: state => state.acl,
+    isAdmin: (state): boolean => {
+      return state.acl.includes(AclEnum.USER_EDIT)
+    }
   },
   mutations: {
     SET_TOKEN: (state, token: string) => {
@@ -34,6 +40,9 @@ export default {
     },
     SET_TEMPORARY_PLAYLIST_ID: (state, temporaryPlaylistId: null|string) => {
       state.temporaryPlaylistId = temporaryPlaylistId
+    },
+    SET_ACL: (state, acl: Array<number>) => {
+      state.acl = acl
     }
   },
   actions: {
@@ -49,6 +58,9 @@ export default {
     },
     setTemporaryPlaylistId: ({ commit }, {temporaryPlaylistId}) => {
       commit('SET_TEMPORARY_PLAYLIST_ID', temporaryPlaylistId)
-    }
+    },
+    setAcl: ({commit}, {acl}) => {
+      commit('SET_ACL', acl)
+    },
   }
 }