refactoring login

client/src/App.vue

@@ -1,26 +1,38 @@
 <script lang="ts">
-import { defineComponent, inject, computed, ref } from 'vue';
-import OAuthClient from '@girder/oauth-client';
-import { useRouter } from 'vue-router';
+import { defineComponent, inject, ref, onMounted } from "vue";
+import OAuthClient from "@girder/oauth-client";
+import { useRouter } from "vue-router";
 
 export default defineComponent({
   setup() {
-    const oauthClient = inject<OAuthClient>('oauthClient');
+    const oauthClient = inject<OAuthClient>("oauthClient");
     const router = useRouter();
     if (oauthClient === undefined) {
       throw new Error('Must provide "oauthClient" into component.');
     }
 
-    const loginText = computed(() => (oauthClient.isLoggedIn ? 'Logout' : 'Login'));
+    const loginText = ref('Login');
+    const checkLogin = () => {
+      if (oauthClient.isLoggedIn) {
+        loginText.value = "Logout";
+      } else {
+        loginText.value = "Login";
+      }
+    };
     const logInOrOut = async () => {
       if (oauthClient.isLoggedIn) {
         await oauthClient.logout();
-        router.push('Login');
+        localStorage.clear();
+        router.push("Login");
+        checkLogin();
       } else {
         oauthClient.redirectToLogin();
       }
     };
-    const activeTab = ref('recordings');
+    onMounted(() => {
+      checkLogin();
+    });
+    const activeTab = ref("recordings");
     return { oauthClient, loginText, logInOrOut, activeTab };
   },
 });
@@ -48,9 +60,7 @@ export default defineComponent({
         </v-tab>
       </v-tabs>
       <v-spacer />
-      <v-btn
-        @click="logInOrOut"
-      >
+      <v-btn @click="logInOrOut">
         {{ loginText }}
       </v-btn>
     </v-app-bar>