#216 done by using return-to URL mechanism

src/components/Header.vue

@@ -5,7 +5,7 @@
           <DspLogo />
       </figure>
       <div class="flex justify-between items-center" v-show="showMember">
-        <button class="btn btn-sm btn-neutral mr-2" @click.prevent="logOutButton">
+        <button id="logout_btn" class="btn btn-sm btn-neutral mr-2" @click.prevent="logOutButton">
           Logout
         </button>
         <!-- <figure>
@@ -56,9 +56,12 @@ export default {
         // 傳給 Map，通知 Sidebar 要關閉。
         this.$emitter.emit('leaveFilter', false);
         leaveFilter(false, this.allMapDataStore.addFilterId, false, this.logOut)
-      } else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance') && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
+      } else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance')
+        && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
         leaveConformance(false, this.conformanceStore.addConformanceCreateCheckId, false, this.logOut)
-      } else this.logOut();
+      } else {
+        this.logOut();
+      }
     },
   },
   mounted() {

src/router/index.js

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory, createWebHashHistory } from "vue-router";
+import { createRouter, createWebHistory, } from "vue-router";
 import AuthContainer from '@/views/AuthContainer.vue';
 import MainContainer from '@/views/MainContainer.vue';
 import Login from '@/views/Login/index.vue';
@@ -120,14 +120,6 @@ const routes = [
           }
         ]
       },
-      {
-        path: "/rule/:type/:fileId/conformance/:checkId",
-        name: "CheckConformance",
-        component: Conformance,
-        meta: {
-          file: {},
-        }
-      }
     ]
   },
   {

src/stores/login.js

@@ -14,6 +14,8 @@ export default defineStore('loginStore', {
     },
     isInvalid: false,
     userData: {},
+    isLoggedIn: false,
+    rememberedReturnToUrl: "",
     // expired: new Date().setMonth(6), // 設定 Refresh Token 的到期日為半年後
   }),
   actions: {
@@ -38,7 +40,18 @@ export default defineStore('loginStore', {
         document.cookie = `luciaToken=${accessToken}`;
         // document.cookie = `luciaRefreshToken=${refreshToken};expires=${new Date(this.expired)};`;
 
-        this.$router.push('/files');
+        this.isLoggedIn = true;
+
+        // 大部分的情況下，預設導向至 FILES 頁面
+        // 然而有一種情況是使用者在沒有登入的情況下貼上了某一個頁面的網址，
+        // 則在此情況下時，我們會在使用者稍後登入後，把使用者帶到剛才記住的 return-to 網址
+        if(this.rememberedReturnToUrl !== "") {
+          console.log('1111', );
+          window.location.href = this.rememberedReturnToUrl;
+        } else {
+          console.log('2222', );
+          this.$router.push('/login');
+        }   
       } catch(error) {
         this.isInvalid = true;
       };
@@ -72,6 +85,9 @@ export default defineStore('loginStore', {
     logOut() {
       delete axios.defaults.headers.common["Authorization"];
       document.cookie = 'luciaToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
+
+      this.isLoggedIn = false;
+
       this.$router.push('/login');
     },
     /**
@@ -100,5 +116,8 @@ export default defineStore('loginStore', {
         this.$router.push('/login');
       };
     },
+    setRememberedReturnToUrl(returnToUrl){
+      this.rememberedReturnToUrl = returnToUrl
+    }
   }
 });

src/views/Login/index.vue

@@ -9,25 +9,33 @@
             <span class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]">
               <IconMember class="h-5 w-5 fill-current"/>
             </span>
-            <input type="text" id="account" class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none  focus:border-primary focus:ring-1 " :class="{'border-danger':isInvalid}" required autofocus v-model.trim="auth.username" @change="changeHandler($event)"/>
+            <input type="text" id="account" class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none  focus:border-primary focus:ring-1 "
+              :class="{'border-danger':isInvalid}" required autofocus v-model.trim="auth.username"
+              @change="changeHandler($event)"/>
           </label>
           <label for="passwordt" class="relative block">
             <p class="text-sm font-normal mb-2">Password</p>
             <span class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]">
               <IconLockKey class="h-5 w-5 fill-current"/>
             </span>
-            <input :type="showPassword ? 'text' : 'password'" id="password" aria-describedby="password-addon" class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none   focus:border-primary focus:ring-1 " :class="{'border-danger':isInvalid}" required v-model.trim="auth.password" @change="changeHandler($event)"/>
+            <input :type="showPassword ? 'text' : 'password'" id="password" aria-describedby="password-addon"
-            <span class="absolute bottom-2 right-4 inline-flex items-center cursor-pointer" v-show="auth.password" @click="showPassword = !showPassword">
+              class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none   focus:border-primary focus:ring-1 "
+              :class="{'border-danger':isInvalid}" required v-model.trim="auth.password" @change="changeHandler($event)"/>
+            <span class="absolute bottom-2 right-4 inline-flex items-center cursor-pointer" v-show="auth.password"
+              @click="showPassword = !showPassword">
               <IconEyeOpen class="h-5 w-5" v-if="showPassword"/>
               <IconEyeClose class="h-5 w-5" v-else/>
             </span>
           </label>
           <p class="my-4 text-danger">
             <span v-show="isInvalid">
-              <IconWarnTriangle class="h-4 w-5 mx-2 mb-[2px] inline-block text-danger"/>Incorrect account or password.
+              <IconWarnTriangle class="h-4 w-5 mx-2 mb-[2px] inline-block text-danger"/>
+                Incorrect account or password.
             </span>
           </p>
-          <button type="submit" class="w-full btn btn-lg" :class="this.isDisabled ? 'btn-disable' : 'btn-c-primary'" :disabled="isDisabledButton">
+          <button id="login_btn_main_btn" type="submit" class="w-full btn btn-lg"
+            :class="this.isDisabled ? 'btn-disable' : 'btn-c-primary'"
+            :disabled="isDisabledButton">
             Log in
           </button>
         </form>
@@ -37,7 +45,7 @@
 </template>
 
 <script>
-import { storeToRefs } from 'pinia';
+import { storeToRefs, mapActions } from 'pinia';
 import loginStore from '@/stores/login.js';
 import IconMember from '@/components/icons/IconMember.vue';
 import IconLockKey from '@/components/icons/IconLockKey.vue';
@@ -93,6 +101,11 @@ export default {
         this.isInvalid = false;
       }
     },
+    ...mapActions(loginStore, ['setRememberedReturnToUrl']),
+  },
+  created() {
+    // 考慮到使用者可能在未登入的情況下貼入一個頁面網址連結過來瀏覽器
+    this.setRememberedReturnToUrl(this.$route.query['return-to']);
   },
 };
 </script>