fix auth

nginx.conf

@@ -7,6 +7,10 @@ server {
         proxy_pass http://data-backend:8000;
     }
 
+    location /oauth2/v1/ {
+        proxy_pass http://auth-backend:8000;
+    }
+
     location /api/v1/me {
         proxy_pass http://auth-backend:8000;
     }

src/App.vue

@@ -8,7 +8,6 @@
 import { defineComponent } from 'vue';
 import { ElConfigProvider } from 'element-plus';
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
-import { applicationOperator, userOperator } from './operators';
 
 export default defineComponent({
   components: {
@@ -18,14 +17,6 @@ export default defineComponent({
     return {
       locale: zhCn
     };
-  },
-  async mounted() {
-    const { data: user } = await userOperator.getMe();
-    this.$store.dispatch('setUser', user);
-    const { data: applications } = await applicationOperator.getAll({
-      user_id: user.id
-    });
-    this.$store.dispatch('setApplications', applications);
   }
 });
 </script>

src/components/midjourney/PresetPanel.vue

@@ -64,7 +64,6 @@ export default defineComponent({
     preset: {
       handler(val) {
         this.$emit('update:modelValue', val);
-        console.debug('preset changed', val);
         this.$store.dispatch('setMidjourney', {
           preset: val
         });

src/operators/auth/models.ts

@@ -4,3 +4,13 @@ export interface IToken {
 }
 
 export interface ITokenResponse extends IToken {}
+
+export interface IOAuthTokenRequest {
+  code: string;
+}
+
+export interface IOAuthTokenResponse {
+  access_token: string;
+  expires_in: number;
+  refresh_token: string;
+}

src/operators/auth/operator.ts

@@ -1,11 +1,20 @@
 import { AxiosResponse } from 'axios';
 import { httpClient } from '../instance';
-import { ITokenResponse, IToken } from './models';
+import { ITokenResponse, IToken, IOAuthTokenRequest, IOAuthTokenResponse } from './models';
 
 class AuthOperator {
   async refreshToken(payload: IToken): Promise<AxiosResponse<ITokenResponse>> {
     return httpClient.post('/token/refresh/', payload);
   }
 }
 
+class OAuthOperator {
+  async token(payload: IOAuthTokenRequest): Promise<AxiosResponse<IOAuthTokenResponse>> {
+    return httpClient.post('/token', payload, {
+      baseURL: '/oauth2/v1'
+    });
+  }
+}
+
 export const authOperator = new AuthOperator();
+export const oauthOperator = new OAuthOperator();

src/pages/auth/Callback.vue

@@ -1,13 +1,14 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { getCookie } from 'typescript-cookie';
 import { getAuthBaseUrl, getHubBaseUrl } from '@/utils';
-import { removeCookies } from '@/utils/cookie';
+import { oauthOperator } from '@/operators/auth/operator';
+import { applicationOperator, userOperator } from '@/operators';
 
 interface IData {
   accessToken: string | undefined;
   refreshToken: string | undefined;
   redirect: string | undefined;
+  code: string | undefined;
 }
 
 export default defineComponent({
@@ -16,22 +17,35 @@ export default defineComponent({
     return {
       accessToken: undefined,
       refreshToken: undefined,
-      redirect: this.$route.query.redirect?.toString()
+      redirect: this.$route.query.redirect?.toString(),
+      code: this.$route.query.code?.toString()
     };
   },
   async mounted() {
-    // get tokens from cookies
-    this.accessToken = getCookie('ACCESS_TOKEN');
-    this.refreshToken = getCookie('REFRESH_TOKEN');
+    if (this.code) {
+      console.debug('code found, try to get tokens');
+      const { data } = await oauthOperator.token({
+        code: this.code
+      });
+      this.accessToken = data.access_token;
+      this.refreshToken = data.refresh_token;
+      console.debug('get tokens successfully');
+    }
     if (this.accessToken && this.refreshToken) {
       // store token to global store
       await this.$store.dispatch('setToken', {
         refresh: this.refreshToken,
         access: this.accessToken
       });
       console.debug('set token successfully');
-      removeCookies();
-      console.debug('remove cookie for tokens successfully');
+      const { data: user } = await userOperator.getMe();
+      await this.$store.dispatch('setUser', user);
+      console.debug('set user successfully');
+      const { data: applications } = await applicationOperator.getAll({
+        user_id: user.id
+      });
+      await this.$store.dispatch('setApplications', applications);
+      console.debug('set applications successfully');
       if (this.redirect) {
         this.$router.push(this.redirect);
       }

src/utils/baseUrl.ts

@@ -21,14 +21,7 @@ export const getDataBaseUrl = () => {
  * @returns
  */
 export const getHubBaseUrl = () => {
-  const env = getEnv();
-  if (env === ENV_LOCAL) {
-    return 'https://hub.local.zhishuyun.com';
-  } else if (env === ENV_TEST) {
-    return 'https://hub.test.zhishuyun.com';
-  } else {
-    return 'https://hub.zhishuyun.com';
-  }
+  return window.location.origin;
 };
 
 export const getAuthBaseUrl = () => {

vite.config.ts

@@ -13,6 +13,10 @@ export default defineConfig({
         target: 'https://data.zhishuyun.com',
         changeOrigin: true
       },
+      '/oauth2': {
+        target: 'https://auth.zhishuyun.com',
+        changeOrigin: true
+      },
       '/api/v1/me': {
         target: 'https://auth.zhishuyun.com',
         changeOrigin: true