feat: Refresh Token in processes.

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};`;
+        document.cookie = `luciaToken=${accessToken}`;
-        // // 取得當前日期
+        // document.cookie = `luciaRefreshToken=${refreshToken};expires=${new Date(this.expired)};`;
-        // const currentDate = new Date();
+
-        // // 設定 cookie 的過期日期為一天後
-        // const expirationDate = new Date();
-        // expirationDate.setDate(currentDate.getDate() + 1);
-        // // 格式化過期日期為 Cookie 格式
-        // const expires = expirationDate.toUTCString();
         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';
+      const refreshToken = document.cookie.replace(/(?:(?:^|.*;\s*)luciaRefreshToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
-      this.auth.refresh_token = this.refreshToken;
+      console.log(document.cookie);
 
-      try {
+
-        const response = await axios.post(api, this.auth, config);
+      this.auth.grant_type = 'refresh_token';
-        const newAccessToken = response.data.access_token;
+      this.auth.refresh_token = refreshToken;
-        document.cookie = `luciaToken=${newAccessToken};`;
+
-      } catch(error) {
+      // try {
-        this.$router.push('/login');
+      //   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

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,