Browse Source

Changed the way the name and surname displays when logged in

master
Lene' Scholtz 5 years ago
parent
commit
9101027327
3 changed files with 39 additions and 32 deletions
  1. 26
    17
      src/components/shared/navBar.vue
  2. 12
    14
      src/store/modules/user/authentication.js
  3. 1
    1
      vue.config.js

+ 26
- 17
src/components/shared/navBar.vue View File

184
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Offers')">Offers</a>
184
                 <a class="dropdown-item cursor-pointer" @click="routerGoTo('/Offers')">Offers</a>
185
               </div>
185
               </div>
186
             </li>
186
             </li>
187
-            <li class="nav-item dropdown">
187
+            <li class="nav-item dropdown" v-if="hideLogin">
188
               <a
188
               <a
189
                 class="nav-link"
189
                 class="nav-link"
190
-                v-if="hideLogin"
191
                 @click="routerGoTo('/user/login')"
190
                 @click="routerGoTo('/user/login')"
192
                 id="navbarDropdown"
191
                 id="navbarDropdown"
193
                 role="button"
192
                 role="button"
196
                 aria-expanded="false"
195
                 aria-expanded="false"
197
               >Login</a>
196
               >Login</a>
198
             </li>
197
             </li>
199
-            <li class="nav-item dropdown">
200
-              <span v-if="showLogout">
198
+            <li class="nav-item dropdown" v-if="showLogout">
199
+              <span>
201
                 <a class="nav-link" @click="logout()">Logout</a>
200
                 <a class="nav-link" @click="logout()">Logout</a>
202
               </span>
201
               </span>
203
-              <span v-else></span>
202
+              <!-- <span v-else></span> -->
204
             </li>
203
             </li>
205
             <li>
204
             <li>
206
               <span v-if="showLogout">
205
               <span v-if="showLogout">
207
-                <a>Welcome! <br/> {{ username }}</a>
206
+                <a>
207
+                  Welcome!
208
+                  <br />
209
+                  {{ username }}
210
+                </a>
208
               </span>
211
               </span>
209
               <span v-else></span>
212
               <span v-else></span>
210
             </li>
213
             </li>
227
 </template>
230
 </template>
228
 
231
 
229
 <script>
232
 <script>
230
-import { mapGetters, mapActions } from "vuex";
233
+import { mapGetters, mapActions } from 'vuex';
231
 
234
 
232
 export default {
235
 export default {
233
   data() {
236
   data() {
234
     return {
237
     return {
235
-      username: localStorage.getItem('name'),
238
+      username: sessionStorage.getItem('name'),
236
     };
239
     };
237
   },
240
   },
238
   computed: {
241
   computed: {
239
     showLogout() {
242
     showLogout() {
240
-      return this.$store.state.authentication.status === "success";
243
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
244
+      this.username = sessionStorage.getItem('name');
245
+      return this.$store.state.authentication.status === 'success';
241
     },
246
     },
242
     hideLogin() {
247
     hideLogin() {
243
-      return this.$store.state.authentication.status !== "success";
248
+      return this.$store.state.authentication.status !== 'success';
244
     },
249
     },
250
+    // eslint-disable-next-line vue/return-in-computed-property
245
     Logout() {
251
     Logout() {
246
-      return this.$store.state.authentication.methods.logout;
247
-    }
252
+      // eslint-disable-next-line no-unused-expressions
253
+      this.$store.state.authentication.methods.logout;
254
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
255
+      this.$router.push('/user/login');
256
+    },
248
   },
257
   },
249
 
258
 
250
   methods: {
259
   methods: {
251
-    ...mapGetters("authentication", ["isLoggedIn"]),
252
-    ...mapActions("authentication", ["logout"]),
260
+    ...mapGetters('authentication', ['isLoggedIn']),
261
+    ...mapActions('authentication', ['logout']),
253
 
262
 
254
     routerGoTo(goTo) {
263
     routerGoTo(goTo) {
255
-      this.$emit("routerGoTo", goTo);
256
-    }
257
-  }
264
+      this.$emit('routerGoTo', goTo);
265
+    },
266
+  },
258
 };
267
 };
259
 </script>
268
 </script>

+ 12
- 14
src/store/modules/user/authentication.js View File

7
   namespaced: true,
7
   namespaced: true,
8
   state: {
8
   state: {
9
     status: '',
9
     status: '',
10
-    token: localStorage.getItem('token') || '',
10
+    token: sessionStorage.getItem('token') || '',
11
     user: {},
11
     user: {},
12
     individual: {},
12
     individual: {},
13
   },
13
   },
33
     authStatus: state => state.status,
33
     authStatus: state => state.status,
34
   },
34
   },
35
   actions: {
35
   actions: {
36
-    login({
37
-      commit,
38
-    }, user) {
36
+    login({ commit }, user) {
39
       return new Promise((reject) => {
37
       return new Promise((reject) => {
40
         commit('auth_request');
38
         commit('auth_request');
41
         axios({
39
         axios({
45
         })
43
         })
46
           .then((resp) => {
44
           .then((resp) => {
47
             console.log(resp.data);
45
             console.log(resp.data);
48
-            localStorage.setItem('token', resp.data.token);
49
-            localStorage.setItem('username', resp.data.username);
50
-            localStorage.setItem('name', resp.data.name);
46
+            sessionStorage.setItem('token', resp.data.token);
47
+            sessionStorage.setItem('username', resp.data.username);
48
+            sessionStorage.setItem('name', resp.data.name);
51
             commit('auth_success', resp.data.token, resp.data);
49
             commit('auth_success', resp.data.token, resp.data);
52
           })
50
           })
53
           .catch((err) => {
51
           .catch((err) => {
54
             commit('auth_error');
52
             commit('auth_error');
55
-            localStorage.removeItem('token');
53
+            sessionStorage.removeItem('token');
54
+            sessionStorage.removeItem('username');
55
+            sessionStorage.removeItem('name');
56
             reject(err);
56
             reject(err);
57
           });
57
           });
58
       });
58
       });
59
     },
59
     },
60
-    logout({
61
-      commit,
62
-    }) {
60
+    logout({ commit }) {
63
       return new Promise(() => {
61
       return new Promise(() => {
64
         commit('logout');
62
         commit('logout');
65
-        localStorage.removeItem('token');
66
-        localStorage.removeItem('username');
67
-        localStorage.removeItem('name');
63
+        sessionStorage.removeItem('token');
64
+        sessionStorage.removeItem('username');
65
+        sessionStorage.removeItem('name');
68
         delete axios.defaults.headers.common.Authorization;
66
         delete axios.defaults.headers.common.Authorization;
69
       });
67
       });
70
     },
68
     },

+ 1
- 1
vue.config.js View File

2
   devServer: {
2
   devServer: {
3
     proxy: {
3
     proxy: {
4
       '/api': {
4
       '/api': {
5
-        target: 'http://192.168.6.188:5000',
5
+        target: 'http://localhost:57260',
6
         changeOrigin: true,
6
         changeOrigin: true,
7
       },
7
       },
8
     },
8
     },

Loading…
Cancel
Save