Lädt UserStore aus LocalStorage

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

@@ -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
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
-    const token: Token = (<UserStateInterface>store.state.user).token;
+    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;
   });

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;
+    //const user: UserStateInterface = (<UserStateInterface>store.state).user;
-    console.log('login_boot', 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
             )
           )

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=""

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', {
+      .get('/auth')
-        headers: { Token: rootGetters['user/token'].token }
-      })
       .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}`, {
+      .delete(`/auth/${token}`)
-        headers: { Token: rootGetters['user/token'].token }
-      })
       .then(() => {
         void dispatch('getSessions');
       })

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;
   }