From 0cdfe7f11c1e1b745056ad4c7e9ca5cbd2bbeee7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Fri, 16 Oct 2020 22:37:37 +0200
Subject: [PATCH] =?UTF-8?q?L=C3=A4dt=20UserStore=20aus=20LocalStorage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sollte die seite neu geladen werden, wird aus dem LocalStorage der UserStorage geladen. Somit bleibt man angemeldet.
Axios angepasst, sodass nur noch die url eingegeben werden muss.
---
 src/boot/axios.ts                   |  7 ++---
 src/boot/login.ts                   | 10 ++++---
 src/plugins/user/pages/Settings.vue |  6 +++--
 src/plugins/user/store/session.ts   |  9 +++----
 src/plugins/user/store/user.ts      | 42 +++++++++++++++++++++--------
 5 files changed, 49 insertions(+), 25 deletions(-)

diff --git a/src/boot/axios.ts b/src/boot/axios.ts
index 2ade8ff..2413f20 100644
--- a/src/boot/axios.ts
+++ b/src/boot/axios.ts
@@ -15,11 +15,12 @@ export default boot(({ Vue, store }) => {
   axios.defaults.baseURL = config.baseURL;
 
   axios.interceptors.request.use(config => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    const token: Token = (<UserStateInterface>store.state.user).token;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
+    const token: Token = store.getters['user/token'];
     if (token) {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      config.headers['Authorization'] = 'Token ' + token.token;
+      config.headers['Token'] = token.token;
+      //config.headers['Authorization'] = 'Token ' + token.token;
     }
     return config;
   });
diff --git a/src/boot/login.ts b/src/boot/login.ts
index b2c8b0f..07103eb 100644
--- a/src/boot/login.ts
+++ b/src/boot/login.ts
@@ -4,11 +4,15 @@ import { RouteRecord } from 'vue-router';
 
 export default boot(({ router, store }) => {
   router.beforeEach((to, from, next) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+    store.dispatch('user/loadFromLocalStorage');
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/ban-ts-comment
     // @ts-ignore
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    const user: UserStateInterface = (<UserStateInterface>store.state).user;
-    console.log('login_boot', user);
+    //const user: UserStateInterface = (<UserStateInterface>store.state).user;
+    //const user: UserStateInterface = store.getters['user/user'];
+    const permissions: [] = store.getters['user/permissions'];
+    console.log('login_boot', permissions);
     if (
       to.matched.some((record: RouteRecord) => {
         // permissions is set AND has NO matching permission
@@ -19,7 +23,7 @@ export default boot(({ router, store }) => {
             // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
             (
               record.meta.permissions.filter((value: string) =>
-                user.permissions.includes(value)
+                permissions.includes(value)
               ).length > 0
             )
           )
diff --git a/src/plugins/user/pages/Settings.vue b/src/plugins/user/pages/Settings.vue
index e0f0bf9..ec49b8f 100644
--- a/src/plugins/user/pages/Settings.vue
+++ b/src/plugins/user/pages/Settings.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <q-page padding class="fit row justify-center content-center items-center">
+    <q-page
+      padding
+      class="fit row justify-center content-center items-center q-gutter-sm"
+    >
       <div class="text-h5 row">
         Deine Sessions:
       </div>
@@ -8,7 +11,6 @@
         class="fit row justify-center content-center items-center q-gutter-sm"
       >
         <circular-progress v-if="sessionsLoading" />
-        <div>tada:: {{ sessionsLoading }}</div>
         <q-card
           class="col-12"
           height=""
diff --git a/src/plugins/user/store/session.ts b/src/plugins/user/store/session.ts
index da47218..257f390 100644
--- a/src/plugins/user/store/session.ts
+++ b/src/plugins/user/store/session.ts
@@ -36,9 +36,7 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
     console.log(rootGetters);
     commit('setLoading', true);
     axios
-      .get('http://localhost:5000/auth', {
-        headers: { Token: rootGetters['user/token'].token }
-      })
+      .get('/auth')
       .then(response => {
         console.log(response.data);
         commit('setSessions', response.data);
@@ -52,10 +50,9 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
   },
   deleteSession({ commit, dispatch, rootGetters }, token) {
     commit('setLoading', true);
+    console.log('axios', axios);
     axios
-      .delete(`http://localhost:5000/auth/${token}`, {
-        headers: { Token: rootGetters['user/token'].token }
-      })
+      .delete(`/auth/${token}`)
       .then(() => {
         void dispatch('getSessions');
       })
diff --git a/src/plugins/user/store/user.ts b/src/plugins/user/store/user.ts
index 1f6cdc2..78bfb95 100644
--- a/src/plugins/user/store/user.ts
+++ b/src/plugins/user/store/user.ts
@@ -20,6 +20,7 @@ export interface User {
   lastname: string;
   mail: string;
   roles: string[];
+  userid: string;
 }
 
 export interface UserStateInterface extends LoginResponse {
@@ -41,9 +42,9 @@ const state: UserStateInterface = {
     firstname: '',
     lastname: '',
     mail: '',
-    roles: []
+    roles: [],
+    userid: ''
   },
-  userid: '',
   loginLoading: false
 };
 
@@ -57,9 +58,6 @@ const mutations: MutationTree<UserStateInterface> = {
   setUser(state, data: User) {
     state.user = data;
   },
-  setUserId(state, data: string) {
-    state.userid = data;
-  },
   setLoginLoading(state, data: boolean) {
     state.loginLoading = data;
   },
@@ -74,18 +72,16 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
     commit('setLoginLoading', true);
     Loading.show({ message: 'Du wirst eingeloggt' });
     void axios
-      .post('http://localhost:5000/auth', data)
+      .post('/auth', data)
       .then((response: AxiosResponse<LoginResponse>) => {
         commit('setPermissions', response.data.permissions);
         console.log('saved permisisons');
         commit('setToken', response.data.token);
         commit('setUser', response.data.user);
-        commit('setUserId', response.data.userid);
         commit('showState');
         LocalStorage.set('permissions', response.data.permissions);
         LocalStorage.set('token', response.data.token);
         LocalStorage.set('user', response.data.user);
-        LocalStorage.set('userid', response.data.userid);
 
         void Router.push({ name: 'user' });
       })
@@ -96,6 +92,33 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
         commit('setLoginLoading', false);
         Loading.hide();
       });
+  },
+  loadFromLocalStorage({ commit }) {
+    console.log('load from store');
+    let data = LocalStorage.getItem('permissions');
+    commit('setPermissions', data ? data : []);
+    data = LocalStorage.getItem('token');
+    commit(
+      'setToken',
+      data
+        ? data
+        : { browser: '', expires: '', lifetime: -1, platform: '', token: '' }
+    );
+    data = LocalStorage.getItem('user');
+    commit(
+      'setUser',
+      data
+        ? data
+        : {
+            display_name: '',
+            firstname: '',
+            lastname: '',
+            mail: '',
+            roles: [],
+            userid: ''
+          }
+    );
+    commit('showState');
   }
 };
 
@@ -109,9 +132,6 @@ const getters: GetterTree<UserStateInterface, StateInterface> = {
   user({ user }) {
     return user;
   },
-  userid({ userid }) {
-    return userid;
-  },
   loginLoading({ loginLoading }) {
     return loginLoading;
   }