From a93ee122d0d706e4af6b04388eff0c5d7540bfa4 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Mon, 22 Jan 2024 10:46:24 +0800
Subject: [PATCH] feat: Refresh Token in processes.

---
 src/stores/login.js       | 42 +++++++++++++++++++++------------------
 src/views/Files/index.vue |  4 +++-
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/stores/login.js b/src/stores/login.js
index 9e20f99..ee059d3 100644
--- a/src/stores/login.js
+++ b/src/stores/login.js
@@ -12,9 +12,9 @@ export default defineStore('loginStore', {
       password: '',
       refresh_token: ''
     },
-    refreshToken: '',
     isInvalid: false,
     userData: {},
+    // expired: new Date().setMonth(6), // 設定 Refresh Token 的到期日為半年後
   }),
   actions: {
     /**
@@ -32,17 +32,12 @@ export default defineStore('loginStore', {
       try {
         const response = await axios.post(api, this.auth, config);
         const accessToken = response.data.access_token;
+        const refreshToken = response.data.refresh_token;
 
-        this.refreshToken = response.data.refresh_token;
         // 將 token 儲存在 cookie
-        document.cookie = `luciaToken=${accessToken};`;
-        // // 取得當前日期
-        // const currentDate = new Date();
-        // // 設定 cookie 的過期日期為一天後
-        // const expirationDate = new Date();
-        // expirationDate.setDate(currentDate.getDate() + 1);
-        // // 格式化過期日期為 Cookie 格式
-        // const expires = expirationDate.toUTCString();
+        document.cookie = `luciaToken=${accessToken}`;
+        // document.cookie = `luciaRefreshToken=${refreshToken};expires=${new Date(this.expired)};`;
+
         this.$router.push('/files');
       } catch(error) {
         this.isInvalid = true;
@@ -53,16 +48,25 @@ export default defineStore('loginStore', {
      */
     async refreshTokenLogin() {
       const api = '/api/oauth/token';
-      this.auth.grant_type = 'refresh_token';
-      this.auth.refresh_token = this.refreshToken;
+      const refreshToken = document.cookie.replace(/(?:(?:^|.*;\s*)luciaRefreshToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+      console.log(document.cookie);
 
-      try {
-        const response = await axios.post(api, this.auth, config);
-        const newAccessToken = response.data.access_token;
-        document.cookie = `luciaToken=${newAccessToken};`;
-      } catch(error) {
-        this.$router.push('/login');
-      }
+
+      this.auth.grant_type = 'refresh_token';
+      this.auth.refresh_token = refreshToken;
+
+      // try {
+      //   const response = await axios.post(api, this.auth, config);
+      //   const newAccessToken = response.data.access_token;
+      //   const newRefreshToken = response.data.refresh_token;
+
+      //   document.cookie = `luciaToken=${newAccessToken}`;
+      //   document.cookie = `luciaRefreshToken=${newRefreshToken};expires=${this.expired}`;
+
+      //   defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;
+      // } catch(error) {
+      //   this.$router.push('/login');
+      // }
     },
     /**
      * Logout, tooken expired
diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue
index d53f8d9..abdca64 100644
--- a/src/views/Files/index.vue
+++ b/src/views/Files/index.vue
@@ -97,6 +97,7 @@
 
 <script>
   import { storeToRefs } from 'pinia';
+  import LoginStore from '@/stores/login.js';
   import filesStore from '@/stores/files.js';
   import AllMapDataStore from '@/stores/allMapData.js';
   import LoadingStore from '@/stores/loading.js';
@@ -143,6 +144,7 @@
       }
     },
     setup() {
+      const loginStore = LoginStore();
       const store = filesStore();
       const allMapDataStore = AllMapDataStore();
       const loadingStore = LoadingStore();
@@ -150,7 +152,7 @@
       const { createFilterId, baseLogId } = storeToRefs(allMapDataStore);
       const { isLoading } = storeToRefs(loadingStore);
 
-      return { store, dependentsData, allMapDataStore, createFilterId, baseLogId, isLoading }
+      return { loginStore, store, dependentsData, allMapDataStore, createFilterId, baseLogId, isLoading }
     },
     components: {
       IconDataFormat,