Changed the way the name and surname displays when logged in

src/components/shared/navBar.vue

@@ -184,10 +184,9 @@
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Offers')">Offers</a>
               </div>
             </li>
-            <li class="nav-item dropdown">
+            <li class="nav-item dropdown" v-if="hideLogin">
               <a
                 class="nav-link"
-                v-if="hideLogin"
                 @click="routerGoTo('/user/login')"
                 id="navbarDropdown"
                 role="button"
@@ -196,15 +195,19 @@
                 aria-expanded="false"
               >Login</a>
             </li>
-            <li class="nav-item dropdown">
-              <span v-if="showLogout">
+            <li class="nav-item dropdown" v-if="showLogout">
+              <span>
                 <a class="nav-link" @click="logout()">Logout</a>
               </span>
-              <span v-else></span>
+              <!-- <span v-else></span> -->
             </li>
             <li>
               <span v-if="showLogout">
-                <a>Welcome! <br/> {{ username }}</a>
+                <a>
+                  Welcome!
+                  <br />
+                  {{ username }}
+                </a>
               </span>
               <span v-else></span>
             </li>
@@ -227,33 +230,39 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from "vuex";
+import { mapGetters, mapActions } from 'vuex';
 
 export default {
   data() {
     return {
-      username: localStorage.getItem('name'),
+      username: sessionStorage.getItem('name'),
     };
   },
   computed: {
     showLogout() {
-      return this.$store.state.authentication.status === "success";
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.username = sessionStorage.getItem('name');
+      return this.$store.state.authentication.status === 'success';
     },
     hideLogin() {
-      return this.$store.state.authentication.status !== "success";
+      return this.$store.state.authentication.status !== 'success';
     },
+    // eslint-disable-next-line vue/return-in-computed-property
     Logout() {
-      return this.$store.state.authentication.methods.logout;
-    }
+      // eslint-disable-next-line no-unused-expressions
+      this.$store.state.authentication.methods.logout;
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.$router.push('/user/login');
+    },
   },
 
   methods: {
-    ...mapGetters("authentication", ["isLoggedIn"]),
-    ...mapActions("authentication", ["logout"]),
+    ...mapGetters('authentication', ['isLoggedIn']),
+    ...mapActions('authentication', ['logout']),
 
     routerGoTo(goTo) {
-      this.$emit("routerGoTo", goTo);
-    }
-  }
+      this.$emit('routerGoTo', goTo);
+    },
+  },
 };
 </script>

src/store/modules/user/authentication.js

@@ -7,7 +7,7 @@ export default {
   namespaced: true,
   state: {
     status: '',
-    token: localStorage.getItem('token') || '',
+    token: sessionStorage.getItem('token') || '',
     user: {},
     individual: {},
   },
@@ -33,9 +33,7 @@ export default {
     authStatus: state => state.status,
   },
   actions: {
-    login({
-      commit,
-    }, user) {
+    login({ commit }, user) {
       return new Promise((reject) => {
         commit('auth_request');
         axios({
@@ -45,26 +43,26 @@ export default {
         })
           .then((resp) => {
             console.log(resp.data);
-            localStorage.setItem('token', resp.data.token);
-            localStorage.setItem('username', resp.data.username);
-            localStorage.setItem('name', resp.data.name);
+            sessionStorage.setItem('token', resp.data.token);
+            sessionStorage.setItem('username', resp.data.username);
+            sessionStorage.setItem('name', resp.data.name);
             commit('auth_success', resp.data.token, resp.data);
           })
           .catch((err) => {
             commit('auth_error');
-            localStorage.removeItem('token');
+            sessionStorage.removeItem('token');
+            sessionStorage.removeItem('username');
+            sessionStorage.removeItem('name');
             reject(err);
           });
       });
     },
-    logout({
-      commit,
-    }) {
+    logout({ commit }) {
       return new Promise(() => {
         commit('logout');
-        localStorage.removeItem('token');
-        localStorage.removeItem('username');
-        localStorage.removeItem('name');
+        sessionStorage.removeItem('token');
+        sessionStorage.removeItem('username');
+        sessionStorage.removeItem('name');
         delete axios.defaults.headers.common.Authorization;
       });
     },

vue.config.js

@@ -2,7 +2,7 @@ module.exports = {
   devServer: {
     proxy: {
       '/api': {
-        target: 'http://192.168.6.188:5000',
+        target: 'http://localhost:57260',
         changeOrigin: true,
       },
     },