Edit 4

resources/js/vue/App.vue

@@ -4,9 +4,9 @@
 
     <core-modal />
 
-    <core-toolbar v-if="loggedIn" />
+    <core-toolbar v-if="accessToken" />
 
-    <core-drawer v-if="loggedIn" />
+    <core-drawer v-if="accessToken" />
 
     <core-view />
   </v-app>
@@ -14,13 +14,14 @@
 
 <script>
     import { TokenService } from '@/services';
+    import { mapState } from 'vuex';
 
     export default {
         data() {
           return {
-            loggedIn : !!TokenService.getToken(),
           };
         },
+        computed: mapState('auth', ['accessToken']),
 
     }
 </script>
@@ -29,7 +30,6 @@
 @import '@/styles/index.scss';
 @import '@/styles/css/Assets/Main.scss';
 @import '@/styles/css/Assets/WM-ModernTheme.scss';
-// @import '@/fontello/fontello-embedded.scss';
 
 /* Remove in 1.2 */
 .v-datatable thead th.column.sortable i {

resources/js/vue/components/core/Drawer.vue

@@ -116,16 +116,6 @@ export default {
         icon: 'done',
         text: 'Submit Test Result'
       },
-      {
-        to: '/login',
-        icon: 'input',
-        text: 'Login'
-      },
-      {
-        to: '/register',
-        icon: 'fas fa-plus',
-        text: 'Register'
-      },
     ],
     responsive: false
   }),

resources/js/vue/components/core/Toolbar.vue

@@ -37,13 +37,7 @@
           hide-details
           color="purple"
         />
-        <router-link
-          v-ripple
-          class="toolbar-items"
-          to="/"
-        >
-          <v-icon color="tertiary">mdi-view-dashboard</v-icon>
-        </router-link>
+
         <v-menu
           bottom
           left
@@ -87,6 +81,9 @@
         >
           <v-icon color="tertiary">mdi-account</v-icon>
         </router-link>
+        <v-badge v-ripple class="toolbar-items Pointer" @click.native="submitLogout" >
+          <v-icon color="tertiary">input</v-icon>
+        </v-badge>
       </v-flex>
     </v-toolbar-items>
   </v-toolbar>
@@ -95,7 +92,7 @@
 <script>
 
 import {
-  mapMutations
+  mapMutations, mapActions
 } from 'vuex'
 
 export default {
@@ -128,9 +125,13 @@ export default {
 
   methods: {
     ...mapMutations('app', ['setDrawer', 'toggleDrawer']),
+    ...mapActions('auth', ['logout']),
     onClickBtn () {
       this.setDrawer(!this.$store.state.app.drawer)
     },
+    submitLogout () {
+      this.logout();
+    },
     onClick () {
       //
     },
@@ -151,4 +152,7 @@ export default {
   #core-toolbar a {
     text-decoration: none;
   }
+  .Pointer {
+      cursor: pointer;
+  }
 </style>

resources/js/vue/services/auth/user.service.js

@@ -42,8 +42,7 @@ const UserService = {
             // NOTE: We haven't covered this yet in our ApiService
             //       but don't worry about this just yet - I'll come back to it later
             ApiService.mount401Interceptor();
-
-            return response.data.access_token;
+            return response.data.token;
         } catch (error) {
             throw new AuthenticationError(error.response.status, error.response.data.detail);
         }
@@ -132,7 +131,7 @@ const UserService = {
             // Update the header in ApiService
             ApiService.setHeader()
 
-            return response.data.access_token
+            return response.data.token
         } catch (error) {
             throw new AuthenticationError(error.response.status, error.response.data.detail)
         }

resources/js/vue/store/modules/auth/mutations.js

@@ -6,7 +6,7 @@ export default {
     },
 
     loginSuccess(state, accessToken) {
-        state.accessToken = accessToken
+        state.accessToken = accessToken;
         state.authenticating = false;
     },