feature: refresh token. if not logged in then refresh token; else redirect to login page.

src/router/index.js

@@ -1,7 +1,7 @@
 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';
+import Login from '@/views/Login/Login.vue';
 import Files from '@/views/Files/index.vue';
 import Upload from '@/views/Upload/index.vue';
 import Map from '@/views/Discover/Map/index.vue';

src/stores/login.js

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import axios from 'axios';
 import apiError from '@/module/apiError.js';
-import { deleteCookie, setCookie } from "../utils/cookieUtil";
+import { deleteCookie, setCookie, getCookie } from "../utils/cookieUtil";
 
 export default defineStore('loginStore', {
   // data, methods, computed
@@ -11,13 +11,13 @@ export default defineStore('loginStore', {
       grant_type: 'password', // password | refresh_token
       username: '',
       password: '',
-      refresh_token: ''
+      refresh_token: undefined,
     },
     isInvalid: false,
     userData: {},
     isLoggedIn: false,
     rememberedReturnToUrl: "",
-    // expired: new Date().setMonth(6), // 設定 Refresh Token 的到期日為半年後
+    expired: new Date().setMonth(6), // 設定 Refresh Token 的到期日為半年後
   }),
   actions: {
     /**
@@ -35,10 +35,10 @@ 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;
+        const refresh_token = response.data.refresh_token;
         // 將 token 儲存在 cookie
         document.cookie = `luciaToken=${accessToken}`;
-        // document.cookie = `luciaRefreshToken=${refreshToken};expires=${new Date(this.expired)};`;
+        document.cookie = `luciaRefreshToken=${refresh_token};expires=${new Date(this.expired)};`;
 
         this.isLoggedIn = true;
         setCookie("isLuciaLoggedIn", "true");
@@ -57,27 +57,31 @@ export default defineStore('loginStore', {
       };
     },
     /**
-     * Refresh Token (暫時沒做)
+     * Refresh Token
      */
-    async refreshTokenLogin() {
+    async refreshToken() {
+      console.log('TODO:TODO:', this.auth);
       const api = '/api/oauth/token';
-      const refreshToken = document.cookie.replace(/(?:(?:^|.*;\s*)luciaRefreshToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
 
       this.auth.grant_type = 'refresh_token';
-      this.auth.refresh_token = refreshToken;
+      this.auth.refresh_token = getCookie("luciaRefreshToken");
 
-      // try {
+      try {
-      //   const response = await axios.post(api, this.auth, config);
+        const response = await axios.post(api, this.auth, config);
-      //   const newAccessToken = response.data.access_token;
+        console.log('response', response);
-      //   const newRefreshToken = response.data.refresh_token;
+        if(response.status === 200) {
+          const newAccessToken = response.data.access_token;
+          const newRefreshToken = response.data.refresh_token;
   
-      //   document.cookie = `luciaToken=${newAccessToken}`;
+          document.cookie = `luciaToken=${newAccessToken}`;
-      //   document.cookie = `luciaRefreshToken=${newRefreshToken};expires=${this.expired}`;
+          document.cookie = `luciaRefreshToken=${newRefreshToken};expires=${this.expired}`;
   
-      //   defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;
+          defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;
-      // } catch(error) {
+        }        
-      //   this.$router.push('/login');
+      } catch(error) {
-      // }
+        // 若refresh token 失敗則導向至登入頁面
+        this.$router.push('/login');
+      }
     },
     /**
      * Logout, tooken expired

src/utils/cookieUtil.js

@@ -1,19 +1,19 @@
 export function getCookie(name) {
-    const nameEQ = name + "=";
+    const nameEqual = name + "=";
-    const ca = document.cookie.split(';');
+    const cookieArr = document.cookie.split(';');
-    for (let i = 0; i < ca.length; i++) {
+    for (let i = 0; i < cookieArr.length; i++) {
-      let c = ca[i];
+      let c = cookieArr[i];
       while (c.charAt(0) === ' ') {
         c = c.substring(1, c.length);
     }
-      if (c.indexOf(nameEQ) === 0) {
+      if (c.indexOf(nameEqual) === 0) {
-        return c.substring(nameEQ.length, c.length);
+        return c.substring(nameEqual.length, c.length);
     }
     }
     return null;
   }
   
- export function setCookie(name, value, days=1) {
+export function setCookie(name, value, days=1) {
   let expires = "";
   if (days) {
     const date = new Date();
@@ -21,9 +21,13 @@ export function getCookie(name) {
     expires = "; expires=" + date.toUTCString();
   }
   document.cookie = name + "=" + (value || "") + expires + "; path=/";
-  }
+}
 
-  export function deleteCookie(name, path = '/') {
+export function setCookieWithoutExpiration(name, value) {
+  document.cookie = name + "=" + (value || "");
+}
+
+export function deleteCookie(name, path = '/') {
   document.cookie = name + '=; Max-Age=-99999999; path=' + path;
-  }
+}
   

src/views/MainContainer.vue

@@ -33,9 +33,11 @@ export default {
     const allMapDataStore = AllMapDataStore();
     const conformanceStore = ConformanceStore();
     const pageAdminStore = PageAdminStore();
+    const loginStore = LoginStore();
     const { tempFilterId, createFilterId,  temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
     const {  conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
     const router = useRouter();
+    const { isLoggedIn, auth } = storeToRefs(loginStore);
 
     const setHighlightedNavItemOnLanding = () => {
       const currentPath = router.currentRoute.value.path;
@@ -72,6 +74,7 @@ export default {
     ]),
     ...mapState(LoginStore, [
       'isLoggedIn',
+      'auth',
     ])
   },
   methods: {
@@ -81,21 +84,44 @@ export default {
       'clearShouldKeepPreviousPageBoolean',
       'setActivePageComputedByRoute',
     ],),
+    ...mapActions(LoginStore, [
+      'refreshToken',
+    ],),
   },
   created() {
     // Save token in Headers.
     const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
     this.$http.defaults.headers.common['Authorization'] = `Bearer ${token}`;
   },
-  beforeRouteEnter(to, from, next) { 
   // 重新整理畫面以及第一次進入網頁時，beforeRouteEnter這個hook會被執行，然而beforeRouteUpdate不會被執行
-    if (!getCookie("isLuciaLoggedIn")) {
+    // PSEUDOCODE
+    // if (not logged in) {
+    //   if (has refresh token) {
+    //     refresh_token();
+    //     if (refresh failed) {
+    //       go to log in();
+    //     } else {
+    //       cookie add("refresh_token=" + refresh_token "; expire=****")
+    //     }
+    //   } else {
+    //     go to log in();
+    //   }
+    // }
+  beforeRouteEnter(to, from, next) {
+    const loginStore = LoginStore();
+
+    if (!loginStore.isLoggedIn) {  
+      if (getCookie('luciaRefreshToken')) {
+        loginStore.refreshToken();          
+      } else {
         next({
           path: '/login',
           query: {
+            // 記憶未來登入後要進入的網址，且記憶的時候要用base64編碼包裹住
             'return-to': btoa(window.location.href),
           }
         });
+      }
     } else {    
       next();
     }