Optimize the auth flow (#68)

Co-authored-by: AceDataCloud <[email protected]>

change/@acedatacloud-nexior-e748743e-a214-4d17-b505-4bb106dbfcdc.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "optimize auth flow",
+  "packageName": "@acedatacloud/nexior",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

src/App.vue

@@ -1,20 +1,17 @@
 <template>
   <el-config-provider :locale="locale">
     <router-view />
-    <auth-panel />
   </el-config-provider>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { ElConfigProvider } from 'element-plus';
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
-import AuthPanel from './components/common/AuthPanel.vue';
 
 export default defineComponent({
   components: {
-    ElConfigProvider,
-    AuthPanel
+    ElConfigProvider
   },
   data() {
     return {

src/components/common/Navigator.vue

@@ -97,7 +97,6 @@ import {
   ROUTE_PROFILE_INDEX,
   ROUTE_DISTRIBUTION_INDEX,
   ROUTE_INDEX,
-  ROUTE_MIDJOURNEY_HISTORY,
   ROUTE_MIDJOURNEY_INDEX,
   ROUTE_QRART_INDEX,
   ROUTE_QRART_HISTORY,
@@ -150,7 +149,7 @@ export default defineComponent({
           },
           displayName: this.$t('common.nav.midjourney'),
           icon: 'fa-solid fa-palette',
-          routes: [ROUTE_MIDJOURNEY_INDEX, ROUTE_MIDJOURNEY_HISTORY]
+          routes: [ROUTE_MIDJOURNEY_INDEX]
         });
       }
 
@@ -201,16 +200,6 @@ export default defineComponent({
         !this.$store?.state?.site?.distribution?.force_inviter_id ||
         this.$store.getters.user?.id === this.$store?.state?.site?.distribution?.force_inviter_id
       );
-    },
-    collapsed: {
-      get() {
-        return this.$store.state.setting?.navigationCollapsed;
-      },
-      set(val: boolean) {
-        this.$store.commit('setSetting', {
-          navigationCollapsed: val
-        });
-      }
     }
   },
   methods: {
@@ -229,18 +218,8 @@ export default defineComponent({
         name: ROUTE_DISTRIBUTION_INDEX
       });
     },
-    async onOpenMenu() {
-      this.collapsed = false;
-    },
-    async onCollapseMenu() {
-      this.collapsed = true;
-    },
     async onLogout() {
-      await this.$store.dispatch('resetAll');
-      await this.$store.dispatch('chat/resetAll');
-      await this.$store.dispatch('midjourney/resetAll');
-      await this.$store.dispatch('chatdoc/resetAll');
-      await this.$store.dispatch('qrart/resetAll');
+      await this.$store.dispatch('logout');
     },
     onConsole() {
       this.$router.push({ name: ROUTE_CONSOLE_ROOT });

src/components/midjourney/tasks/TaskList.vue

@@ -31,7 +31,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import TaskItem from './TaskItem.vue';
-import { ROUTE_MIDJOURNEY_HISTORY } from '@/router';
 import { ElSkeleton, ElSkeletonItem } from 'element-plus';
 import { Status } from '@/models';
 
@@ -49,52 +48,13 @@ export default defineComponent({
     };
   },
   computed: {
-    loading() {
-      return this.$store.state.midjourney.status.getApplication === Status.Request;
-    },
     tasks() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       return this.$store.state.midjourney.tasks?.items?.reverse();
     },
     application() {
       return this.$store.state.midjourney.application;
     }
-  },
-  watch: {
-    tasks: {
-      handler(val, oldVal) {
-        if (val && oldVal && JSON.stringify(val) !== JSON.stringify(oldVal)) {
-          this.$emit('refresh', val);
-        }
-      },
-      deep: true
-    }
-  },
-  async mounted() {
-    await this.$store.dispatch('midjourney/setTasks', undefined);
-    this.getTasks();
-    // @ts-ignore
-    this.job = setInterval(() => {
-      this.getTasks();
-    }, 5000);
-  },
-  unmounted() {
-    clearInterval(this.job);
-  },
-  methods: {
-    async onLoadHistory() {
-      this.$router.push({ name: ROUTE_MIDJOURNEY_HISTORY });
-    },
-    async getTasks() {
-      // ensure that the previous request has been completed
-      if (this.loading) {
-        return;
-      }
-      await this.$store.dispatch('midjourney/getTasks', {
-        limit: 30,
-        offset: 0
-      });
-    }
   }
 });
 </script>

src/components/qrart/RecentPanel.vue

@@ -47,49 +47,13 @@ export default defineComponent({
     };
   },
   computed: {
-    loading() {
-      return this.$store.state.qrart?.status?.getApplication === Status.Request;
-    },
     tasks() {
       // reverse the order of the tasks.items
       return {
         ...this.$store.state.qrart?.tasks,
         items: this.$store.state.qrart?.tasks?.items?.slice().reverse()
       };
     }
-  },
-  async mounted() {
-    await this.$store.dispatch('qrart/setTasks', undefined);
-    await this.getTasks();
-    await this.onScrollDown();
-    // @ts-ignore
-    this.job = setInterval(() => {
-      this.getTasks();
-    }, 5000);
-  },
-  async unmounted() {
-    clearInterval(this.job);
-  },
-  methods: {
-    async onScrollDown() {
-      setTimeout(() => {
-        // scroll to bottom for `.recent`
-        const el = document.querySelector('.recent');
-        if (el) {
-          el.scrollTop = el.scrollHeight;
-        }
-      }, 500);
-    },
-    async getTasks() {
-      // ensure that the previous request has been completed
-      if (this.loading) {
-        return;
-      }
-      await this.$store.dispatch('qrart/getTasks', {
-        limit: 50,
-        offset: 0
-      });
-    }
   }
 });
 </script>

src/layouts/Chat.vue

@@ -35,22 +35,6 @@ export default defineComponent({
     return {
       drawer: false
     };
-  },
-  async mounted() {
-    await this.onGetService();
-    await this.onGetApplication();
-    await this.onGetConversations();
-  },
-  methods: {
-    async onGetService() {
-      await this.$store.dispatch('chat/getService');
-    },
-    async onGetApplication() {
-      await this.$store.dispatch('chat/getApplication');
-    },
-    async onGetConversations() {
-      await this.$store.dispatch('chat/getConversations');
-    }
   }
 });
 </script>

src/layouts/Midjourney.vue

@@ -29,21 +29,8 @@ export default defineComponent({
   },
   data() {
     return {
-      drawer: false,
-      drawer2: false
+      drawer: false
     };
-  },
-  async mounted() {
-    await this.onGetService();
-    await this.onGetApplication();
-  },
-  methods: {
-    async onGetService() {
-      await this.$store.dispatch('midjourney/getService');
-    },
-    async onGetApplication() {
-      await this.$store.dispatch('midjourney/getApplication');
-    }
   }
 });
 </script>

src/layouts/Qrart.vue

@@ -31,18 +31,6 @@ export default defineComponent({
     return {
       drawer: false
     };
-  },
-  async mounted() {
-    await this.onGetService();
-    await this.onGetApplication();
-  },
-  methods: {
-    async onGetService() {
-      await this.$store.dispatch('qrart/getService');
-    },
-    async onGetApplication() {
-      await this.$store.dispatch('qrart/getApplication');
-    }
   }
 });
 </script>

src/main.ts

@@ -13,13 +13,17 @@ import {
   initializeCookies,
   initializeDescription,
   initializeFavicon,
+  initializeToken,
+  initializeUser,
   initializeKeywords,
   initializeSite,
   initializeTitle
 } from './utils/initializer';
 
 const main = async () => {
   await initializeCookies();
+  await initializeToken();
+  await initializeUser();
   await initializeSite();
   await initializeTitle();
   await initializeDescription();

src/operators/common.ts

@@ -28,7 +28,7 @@ httpClient.interceptors.response.use(
   },
   (error) => {
     if (error?.response?.status === 401) {
-      store.dispatch('resetToken');
+      store.dispatch('login');
     }
     return Promise.reject(error);
   }

src/pages/auth/Callback.vue

@@ -1,46 +1,20 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { IUser, IToken } from '@/models';
 
 interface IData {
-  accessToken: string | undefined;
-  refreshToken: string | undefined;
   redirect: string | undefined;
-  code: string | undefined;
-  user: IUser | undefined;
 }
 
 export default defineComponent({
   name: 'AuthCallback',
   data(): IData {
     return {
-      accessToken: undefined,
-      refreshToken: undefined,
-      redirect: this.$route.query.redirect?.toString(),
-      code: this.$route.query.code?.toString(),
-      user: undefined
+      redirect: this.$route.query.redirect?.toString()
     };
   },
   async mounted() {
-    // if auth code is provided, get token via oauth
-    if (this.code) {
-      const data: IToken = await this.$store.dispatch('getToken', this.code);
-      this.accessToken = data.access;
-      this.refreshToken = data.refresh;
-    } else {
-      this.$store.dispatch('resetToken');
-      return;
-    }
-    // if token acquired, get user info
-    if (this.accessToken && this.refreshToken) {
-      const user = await this.$store.dispatch('getUser');
-      this.user = user;
-      if (this.redirect) {
-        await this.$router.push(this.redirect);
-      }
-    } else {
-      // reset token and trigger popup login window
-      this.$store.dispatch('resetToken');
+    if (this.redirect) {
+      await this.$router.push(this.redirect);
     }
   }
 });

src/pages/auth/Login.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { getBaseUrlAuth, getBaseUrlHub } from '@/utils';
+import { login } from '@/utils';
 import { defineComponent } from 'vue';
 
 interface IData {
@@ -14,13 +14,7 @@ export default defineComponent({
     };
   },
   async mounted() {
-    const hubBaseUrl = getBaseUrlHub();
-    const authBaseUrl = getBaseUrlAuth();
-    // callback url used to init access token and then redirect back of `redirect`
-    const callbackUrl = `${hubBaseUrl}/auth/callback?redirect=${this.redirect}`;
-    // redirect to auth service to get access token then redirect back
-    const targetUrl = `${authBaseUrl}/auth/login?redirect=${callbackUrl}`;
-    window.location.href = targetUrl;
+    login(this.redirect);
   },
   methods: {}
 });

src/pages/chat/Conversation.vue

@@ -128,10 +128,28 @@ export default defineComponent({
       }
     }
   },
-  mounted() {
-    this.onScrollDown();
+  async mounted() {
+    await this.onGetService();
+    await this.onGetApplication();
+    await this.onGetConversations();
+    await this.onScrollDown();
   },
   methods: {
+    async onGetService() {
+      console.debug('start onGetService');
+      await this.$store.dispatch('chat/getService');
+      console.debug('end onGetService');
+    },
+    async onGetApplication() {
+      console.debug('start onGetApplication');
+      await this.$store.dispatch('chat/getApplication');
+      console.debug('end onGetApplication');
+    },
+    async onGetConversations() {
+      console.debug('start onGetConversations');
+      await this.$store.dispatch('chat/getConversations');
+      console.debug('end onGetConversations');
+    },
     async onDraft(question: string) {
       this.question = question;
       this.onSubmit();