Löschen und Anzeigen von Sessions

quasar.conf.js

@@ -9,7 +9,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { configure } = require('quasar/wrappers');
 
-module.exports = configure(function (ctx) {
+module.exports = configure(function(ctx) {
   return {
     // https://quasar.dev/quasar-cli/supporting-ts
     supportTS: {
@@ -64,7 +64,7 @@ module.exports = configure(function (ctx) {
       // extractCSS: false,
 
       // https://quasar.dev/quasar-cli/handling-webpack
-      extendWebpack (cfg) {
+      extendWebpack(cfg) {
         // linting is slow in TS projects, we execute it only for production builds
         if (ctx.prod) {
           cfg.module.rules.push({
@@ -103,7 +103,7 @@ module.exports = configure(function (ctx) {
       // directives: [],
 
       // Quasar plugins
-      plugins: []
+      plugins: ['LocalStorage']
     },
 
     // animations: 'all', // --- includes all animations
@@ -191,7 +191,7 @@ module.exports = configure(function (ctx) {
       // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
       nodeIntegration: true,
 
-      extendWebpack (/* cfg */) {
+      extendWebpack(/* cfg */) {
         // do something with Electron main process Webpack cfg
         // chainWebpack also available besides this extendWebpack
       }

src/boot/axios.ts

@@ -1,6 +1,6 @@
 import axios, { AxiosInstance } from 'axios';
 import { boot } from 'quasar/wrappers';
-import { StateInterface } from '../store';
+import { Token, UserStateInterface } from 'src/plugins/user/store/user';
 import config from '../config';
 
 declare module 'vue/types/vue' {
@@ -15,8 +15,10 @@ export default boot(({ Vue, store }) => {
   axios.defaults.baseURL = config.baseURL;
 
   axios.interceptors.request.use(config => {
-    const token = (<StateInterface>store.state).user.token;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    const token: Token = (<UserStateInterface>store.state.user).token;
     if (token) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       config.headers['Authorization'] = 'Token ' + token.token;
     }
     return config;

src/boot/login.ts

@@ -1,19 +1,27 @@
 import { boot } from 'quasar/wrappers';
-import { StateInterface } from '../store';
+import { UserStateInterface } from 'src/plugins/user/store/user';
+import { RouteRecord } from 'vue-router';
 
-export default boot(({ Vue, router, store }) => {
+export default boot(({ router, store }) => {
   router.beforeEach((to, from, next) => {
-    let user = (<StateInterface>store.state).user;
+    // 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);
     if (
-      to.matched.some(record => {
+      to.matched.some((record: RouteRecord) => {
         // permissions is set AND has NO matching permission
         return (
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
           record.meta.permissions !== undefined &&
           !(
-            record.meta.permissions.filter((value: string) =>
-              user.permissions.includes(value)
-            ).length > 0
+            // 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)
+              ).length > 0
+            )
           )
         );
       })

src/plugins/user/pages/Settings.vue

@@ -4,18 +4,55 @@
       <div class="text-h5 row">
         Deine Sessions:
       </div>
-      <!--<div class="fit row justify-center content-center items-center">
+      <div
+        class="fit row justify-center content-center items-center q-gutter-sm"
+      >
         <q-card
-          class="col-4"
+          class="col-12"
           height=""
           v-for="(session, index) in sessions"
           :key="'session' + index"
         >
-          <q-card-section>
-            {{ session }}
+          <q-card-section
+            v-if="isThisSession(session.token)"
+            class="text-caption"
+          >
+            Diese Session.
           </q-card-section>
+          <q-card-section>
+            <div class="row">
+              <div class="col-xs-12 col-sm-6">
+                Browser:
+                <q-icon :name="getBrowserIcon(session.browser)" size="24px" />
+                {{ session.browser }}
+              </div>
+              <div class="col-xs-12 col-sm-6">
+                Plattform:
+                <q-icon :name="getPlatformIcon(session.platform)" size="24px" />
+                {{ session.platform }}
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-xs-12 col-sm-6">
+                Lebenszeit:
+                {{ session.lifetime }}
+              </div>
+              <div class="col-xs-12 col-sm-6">
+                Läuft aus: {{ session.expires }}
+              </div>
+            </div>
+          </q-card-section>
+          <q-card-actions align="right">
+            <q-btn
+              flat
+              round
+              dense
+              icon="mdi-delete"
+              @click="deleteSession(session.token)"
+            />
+          </q-card-actions>
         </q-card>
-      </div> -->
+      </div>
       <div class="row">
         <q-btn label="show sessions" @click="showRootGetters" />
       </div>
@@ -24,19 +61,54 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, ref } from '@vue/composition-api';
+import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
 import { mainLink } from '../plugin';
+import { platform } from 'os';
 export default defineComponent({
   // name: 'PageName'
-  setup(_, ctx) {
-    const sessions = computed(
-      () => ctx.root.$store.getters['sessions/sessions']
-    );
+  setup(_, { root }) {
+    onBeforeMount(() => {
+      root.$store.dispatch('sessions/getSessions');
+    });
+
+    const sessions = computed(() => root.$store.getters['sessions/sessions']);
     function showRootGetters() {
       //ctx.root.$store.dispatch('sessions/getSessions');
       console.log(sessions.value);
     }
-    return { showRootGetters, sessions };
+    function getBrowserIcon(browser: string) {
+      return browser == 'firefox'
+        ? 'mdi-firefox'
+        : browser == 'chrome'
+        ? 'mdi-google-chrome'
+        : browser == 'safari'
+        ? 'mdi-apple-safari'
+        : 'mdi-help';
+    }
+    function getPlatformIcon(platform: string) {
+      return platform == 'linux'
+        ? 'mdi-linux'
+        : platform == 'windows'
+        ? 'mdi-microsoft-windows'
+        : platform == 'apple'
+        ? 'mdi-apple'
+        : 'mdi-help';
+    }
+
+    function deleteSession(token: string) {
+      root.$store.dispatch('sessions/deleteSession', token);
+    }
+    function isThisSession(token: string) {
+      return root.$store.getters['user/token'].token == token;
+    }
+    return {
+      showRootGetters,
+      sessions,
+      getBrowserIcon,
+      getPlatformIcon,
+      isThisSession,
+      deleteSession
+    };
   }
 });
 </script>

src/plugins/user/store/session.ts

@@ -40,6 +40,7 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
         headers: { Token: rootGetters['user/token'].token }
       })
       .then(response => {
+        console.log(response.data);
         commit('setSessions', response.data);
       })
       .catch(error => {
@@ -48,6 +49,22 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
       .finally(() => {
         commit('setLoading', false);
       });
+  },
+  deleteSession({ commit, dispatch, rootGetters }, token) {
+    commit('setLoading', true);
+    axios
+      .delete(`http://localhost:5000/auth/${token}`, {
+        headers: { Token: rootGetters['user/token'].token }
+      })
+      .then(() => {
+        void dispatch('getSessions');
+      })
+      .catch(error => {
+        console.exception();
+      })
+      .finally(() => {
+        commit('setLoading', false);
+      });
   }
 };
 

src/plugins/user/store/user.ts

@@ -81,10 +81,10 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
         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);
+        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' });
       })