Fixed logout issues (#429)

Fixed logout issues - Fixed automatic logout problem after session timeout - Fixed error: TypeError: this.logout is not a function - Fixed error: TypeError: this.sseConnection is undefined
SK-CERT · Nov 18, 2024 · 1fcd2be · 1fcd2be
1 parent b23ced4
commit 1fcd2be
Show file tree

Hide file tree

Showing 4 changed files with 195 additions and 179 deletions.
diff --git a/src/gui/src/App.vue b/src/gui/src/App.vue
@@ -28,13 +28,18 @@ export default {
     },
     data: () => ({
         visible: null,
-        isDark: true
+        isDark: true,
+        sseConnection: null,
     }),
     mixins: [AuthMixin],
     methods: {
         connectSSE() {
             this.$sse(((typeof (process.env.VUE_APP_TARANIS_NG_CORE_SSE) == "undefined") ? "$VUE_APP_TARANIS_NG_CORE_SSE" : process.env.VUE_APP_TARANIS_NG_CORE_SSE) + "?jwt=" + this.$store.getters.getJWT, {format: 'json'})
                 .then(sse => {
+                    this.sseConnection = sse
+                    sse.onError(() => {
+                        this.reconnectSSE()
+                    });
                     sse.subscribe('news-items-updated', (data) => {
                         this.$root.$emit('news-items-updated', data)
                     });
@@ -50,7 +55,9 @@ export default {
                     sse.subscribe('report-item-unlocked', (data) => {
                         this.$root.$emit('report-item-unlocked', data)
                     });
-                });
+                }).catch(event => {
+                    this.sseConnection = event.currentTarget
+                })
         },
 
         reconnectSSE() {
@@ -116,7 +123,12 @@ export default {
             this.connectSSE()
         });
 
-    }
+    },
+    beforeDestroy() {
+        if (this.sseConnection !== null) {
+            this.sseConnection.close()
+        }
+    }
 };
 </script>
 

diff --git a/src/gui/src/components/UserMenu.vue b/src/gui/src/components/UserMenu.vue
@@ -1,81 +1,80 @@
-<template>
-    <div class="user-menu cx-user-menu">
-
-        <!--USERMENU-->
-        <v-menu close-on-click close-on-content-click offset-y st>
-            <template v-slot:activator="{ on }">
-                <div class="user-menu-button pl-0 pr-2">
-                    <v-btn icon v-on="on">
-                        <v-icon color="white" medium>mdi-shield-account</v-icon>
-                    </v-btn>
-                </div>
-            </template>
-            <v-list>
-                <v-list-item>
-                    <v-list-item-avatar class="">
-                        <v-icon>mdi-shield-account</v-icon>
-                    </v-list-item-avatar>
-                    <v-list-item-content>
-                        <v-list-item-title>{{ username }}</v-list-item-title>
-                        <v-list-item-subtitle>{{ organizationName }}</v-list-item-subtitle>
-                    </v-list-item-content>
-                </v-list-item>
-                <v-divider></v-divider>
-
-                <v-list-item @click="settings">
-                    <v-list-item-icon>
-                        <v-icon>mdi-cog-outline</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-content>
-                        <v-list-item-title> {{ $t('user_menu.settings') }}</v-list-item-title>
-                    </v-list-item-content>
-                </v-list-item>
-
-                <v-list-item @click="logout">
-                    <v-list-item-icon>
-                        <v-icon>mdi-logout</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-content>
-                        <v-list-item-title> {{ $t('user_menu.logout') }}</v-list-item-title>
-                    </v-list-item-content>
-                </v-list-item>
-            </v-list>
-        </v-menu>
-
-        <UserSettings/>
-
-    </div>
-</template>
-
-<script>
-import UserSettings from "./UserSettings";
-
-export default {
-    name: "UserMenu",
-    components: {
-        UserSettings
-    },
-    data: () => ({
-        darkTheme: false
-    }),
-    computed: {
-        username() {
-            return this.$store.getters.getUserName
-        },
-        organizationName() {
-            return this.$store.getters.getOrganizationName
-        }
-    },
-    methods: {
-        logout() {
-            this.$store.dispatch('logout');
-        },
-        settings() {
-            this.$root.$emit('show-user-settings');
-        },
-        darkToggle() {
-            this.$vuetify.theme.dark = this.darkTheme
-        }
-    }
-}
+<template>
+    <div class="user-menu cx-user-menu">
+
+        <!--USERMENU-->
+        <v-menu close-on-click close-on-content-click offset-y st>
+            <template v-slot:activator="{ on }">
+                <div class="user-menu-button pl-0 pr-2">
+                    <v-btn icon v-on="on">
+                        <v-icon color="white" medium>mdi-shield-account</v-icon>
+                    </v-btn>
+                </div>
+            </template>
+            <v-list>
+                <v-list-item>
+                    <v-list-item-avatar class="">
+                        <v-icon>mdi-shield-account</v-icon>
+                    </v-list-item-avatar>
+                    <v-list-item-content>
+                        <v-list-item-title>{{ username }}</v-list-item-title>
+                        <v-list-item-subtitle>{{ organizationName }}</v-list-item-subtitle>
+                    </v-list-item-content>
+                </v-list-item>
+                <v-divider></v-divider>
+
+                <v-list-item @click="settings">
+                    <v-list-item-icon>
+                        <v-icon>mdi-cog-outline</v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-content>
+                        <v-list-item-title> {{ $t('user_menu.settings') }}</v-list-item-title>
+                    </v-list-item-content>
+                </v-list-item>
+
+                <v-list-item @click="logout">
+                    <v-list-item-icon>
+                        <v-icon>mdi-logout</v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-content>
+                        <v-list-item-title> {{ $t('user_menu.logout') }}</v-list-item-title>
+                    </v-list-item-content>
+                </v-list-item>
+            </v-list>
+        </v-menu>
+
+        <UserSettings/>
+
+    </div>
+</template>
+
+<script>
+import AuthMixin from "@/services/auth/auth_mixin";
+import UserSettings from "./UserSettings";
+
+export default {
+    name: "UserMenu",
+    mixins: [AuthMixin],
+    components: {
+        UserSettings
+    },
+    data: () => ({
+        darkTheme: false
+    }),
+    computed: {
+        username() {
+            return this.$store.getters.getUserName
+        },
+        organizationName() {
+            return this.$store.getters.getOrganizationName
+        }
+    },
+    methods: {
+        settings() {
+            this.$root.$emit('show-user-settings');
+        },
+        darkToggle() {
+            this.$vuetify.theme.dark = this.darkTheme
+        }
+    }
+}
 </script>
diff --git a/src/gui/src/services/auth/auth_mixin.js b/src/gui/src/services/auth/auth_mixin.js
@@ -8,6 +8,16 @@ var AuthMixin = {
     }),
 
     methods: {
+        logout() {
+            this.$store.dispatch('logout').then(() => {
+                if (this.$store.getters.hasExternalLogoutUrl) {
+                    window.location = this.$store.getters.getLogoutURL;
+                } else {
+                    window.location.reload();
+                }
+            })
+        },
+
         isAuthenticated() {
             return AuthService.isAuthenticated()
         },