Added the security check according to the role

web/src/views/Profile.vue

@@ -6,7 +6,6 @@
           <div v-if="loading || response === null"></div>
           <div v-else>
 <!--            {{response}}-->
-
             <h4 class="round">User Profile</h4>
             <div class="panel panel-default">
               <div class="panel-body">
@@ -26,7 +25,7 @@
                   <div class="row">
                     <div class="text col-sm-3">Role</div>
                     <div class="col-sm-9">
-                      {{$store.dispatch('User/setUserRole', response.role.name) && response.role.name}}
+                      {{setRole(response.role.name)}}
                     </div>
                   </div>
                   <div class="row">
@@ -108,6 +107,12 @@ export default {
     },
   },
   methods: {
+    setRole(roleName) {
+      const vm = this
+      window.localStorage.setItem('roleName', roleName)
+      vm.$store.dispatch('User/setUserRole', roleName)
+      return roleName
+    },
   },
   mounted: function () {
     const vm = this

web/src/views/UpdateItem.vue

 <template>
   <div>
     <div class="flex items-center justify-center">
-      <div class="md:flex card p-2 mt-5">
+      <h3 v-show="error" class="text-2xl text-red-500">{{ errorMsg }}</h3>
+      <div v-if="loaded" class="md:flex card p-2 mt-5">
         <div class="p-5 mx-auto text-left font-raleway container max-w-screen-md">
           <h1 class="font-bold text-left font-montserrat text-3xl sm:text-5xl mb-7">
             {{ item === 'new'? 'Create new Update Item' : item }}
           </h1>
-          <p v-show="error" class="text-lg text-red-500">{{ errorMsg }}</p>
           <form @submit="update" class="w-full md:w-auto">
             <div class="md:flex md:items-center mx-3 mb-6">
               <div class="md:w-1/3">
@@ -154,6 +154,7 @@ export default {
       syncedAt: '', // datetime
       syncResponse: '', // response from the sync process (errors if any)
       comment: '', // user comment
+      loaded: false,
       error: false,
       errorMsg: `An error occurred, please try again`
     }
@@ -176,8 +177,7 @@ export default {
 
       const jwt = vm.jwt;
       if(jwt === null) {
-        vm.loading = false;
-        vm.response = null;
+        vm.loaded = false;
         return
       }
 
@@ -218,10 +218,10 @@ export default {
 
         // console.log(res)
 
-        this.$router.push('/profile')
+        vm.$router.push('/profile')
       } catch(error) {
         // console.log(error.response.data.error.message)
-        console.log(error.response)
+        // console.log(error.response)
         this.error = true
         this.errorMsg = error
       }
@@ -231,8 +231,7 @@ export default {
 
       const jwt = vm.jwt;
       if(jwt === null) {
-        vm.loading = false;
-        vm.response = null;
+        vm.loaded = false;
         return
       }
 
@@ -263,17 +262,26 @@ export default {
           // SyncedAt:
           // SyncResponse:
         }
+
+        vm.loaded = true;
       } catch(error) {
-        console.log(error)
+        // console.error(error)
         this.error = true
-        this.errorMsg = error
+        this.errorMsg = "You are not authorized to access this item."
+        setTimeout(() => vm.$router.go(-1), 2000);
       }
     }
   },
   mounted: function () {
-    const vm = this
-    if(vm.item !== 'new') {
-      vm.load(vm.item)
+    const vm = this;
+
+    const jwt = vm.jwt;
+    if(jwt === null) {
+      vm.$router.push('/login')
+    } else {
+      if(vm.item !== 'new') {
+        vm.load(vm.item)
+      }
     }
   }
 }