Added jwt-decode in user auth module

- Adjusted variables in user state token
- Updated signalR to disconnect before leaving the page

Author: jioo

src/Client/package-lock.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@aspnet/signalr": "^1.1.0",
+    "jwt-decode": "^2.2.0",
     "material-design-icons-iconfont": "^4.0.4",
     "moment": "^2.24.0",
     "roboto-fontface": "^0.10.0",

src/Client/package.json

@@ -10,7 +10,7 @@
             <v-list dense>
                 <v-list-tile v-if="isAuthenticated">
                     <v-list-tile-content>
-                        <v-list-tile-title>Logged in as <b class="orange--text"> {{ currentUser.fullName }}</b></v-list-tile-title>
+                        <v-list-tile-title>Logged in as <b class="orange--text"> {{ currentUser.full_name }}</b></v-list-tile-title>
                     </v-list-tile-content>
                 </v-list-tile>
 

src/Client/src/components/_shared/navigation.vue

@@ -112,7 +112,7 @@
                                 label="New Password"
                                 type="Password"
                                 color="orange"
-                                v-model="form.newPassword"
+                                v-model="form.password"
                                 required 
                                 :rules="[required, minLength]"
                                 :disabled="!formStates.form2.isEdit"

src/Client/src/components/employee/update.vue

@@ -191,8 +191,8 @@ export default {
                 ]
 
                 if(this.isRole('Employee')) {
-                    const userId = this.currentUser.empId
-                    this.items = this.logs.data.filter(m => m.employeeId === userId)
+                    const empId = this.currentUser.employee_id
+                    this.items = this.logs.data.filter(m => m.employeeId === empId)
                     this.headers = [
                         { text: 'Time In', value: 'timeIn' },
                         { text: 'Time Out', value: 'timeOut' }
@@ -270,7 +270,16 @@ export default {
     },
 
     created () {
+        // connect to websocket
+        BroadcastConnection.start()
+
         this.setDefaultMeta()
-    }
+    },
+
+    // disconnect the websocket before leaving component
+    beforeRouteLeave (to, from, next) {
+        BroadcastConnection.stop()
+        next()
+    },
 }
 </script>   

src/Client/src/components/logs/list.vue

@@ -65,7 +65,7 @@ _axios.interceptors.response.use(
                 break;
 
             default:
-                message = error.response.data || defaultErrorMessage
+                message = error.response.data.error_description || defaultErrorMessage
                 break;
         }
 

src/Client/src/plugins/axios.js

@@ -4,6 +4,4 @@ const connection = new signalR.HubConnectionBuilder()
             .withUrl(process.env.VUE_APP_BASE_URL + 'broadcast')
             .build();
 
-connection.start().catch(err => document.write(err));
-
 export default connection

src/Client/src/services/broadcast-service.js

@@ -1,4 +1,5 @@
 import JwtService from '@/services/jwt-service'
+import decode from 'jwt-decode'
 
 const state = {
     user: {},
@@ -16,8 +17,25 @@ const getters = {
 
 const mutations = {
     SET_AUTH (state, data) {
+        // decode payload
+        const decodedJwt = decode(data.access_token)
+
+        // set up the payload in user state
+        state.user = {
+            username: decodedJwt['sub'],
+
+            employee_id: decodedJwt['employee_id'],
+
+            // default key name in jwt
+            full_name: decodedJwt['full_name'],
+            
+            // role generated by asp.net
+            roles: [
+                decodedJwt['http://schemas.microsoft.com/ws/2008/06/identity/claims/role'] 
+            ]
+        }
+
         state.isAuthenticated = true
-        state.user = data.user
         JwtService.saveToken(data.access_token)
     },
     DESTROY_AUTH (state) {

src/Client/src/store/modules/auth-module.js

@@ -79,8 +79,8 @@ export default {
                 await this.$store.dispatch('SET_SETTINGS', defaultSettings)
 
                 // redirect according to role
-                const currentUserRole = result.user.roles
-                if(currentUserRole.includes('Admin')) {
+                const currentUserRole = this.currentUser.roles
+                if(currentUserRole === 'Admin') {
                     this.$router.push({ name: 'employees' })
                 } else {
                     this.$router.push({ name: 'logs' })