세션 쿠키 유지를 위한 https 적용

localhost-key.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvwIBADANBgkqhkiG9w0BAQEFAASCBKkwggSlAgEAAoIBAQDnTJneuEjlCk/g
+mzUQyeI9xWdr5TiYz+/HVdIR91PlswECLXiW+j420ARQ+Dpx8JY1sts9kMki/jnD
+8cNFMwSOnJADwyW+bZZYAdGd/OpyyNQWjm903pKntBKDYULebEnviMDQz7+M6J9Y
+cVqWSRTMR6VizSYIQ0vIUqQZaISp/TKLvTssjLjwz6DIYtZ2GQ06lAZYmvX6UhSl
+32xJQ6GWf4Jnemn/2bKYFGk88d4ORfrhpD1JV3lGQGk0HU/pI8R017pKxq9lq/c4
+d8hqN0CdkQUv0lFw6DQgm3etOVOajlY4eDj+Q3mDCERT8meH1PXfuTsHBtTMHxoA
+iRtu4YoZAgMBAAECggEBAMti1DrAGXktpCeA0xy8KTDgEJ0TprzYu6Owl1QtA50L
+1msvyMYZrfNM3z7Dx8DBKZR2fcqZMgSPQARI5shGoE825HwqcVoNyxIAJ26hIxdj
++PsMrH076gGFmnHkaIRk/G6g9cunomwpcVS3+EwGXz9yEL/cXQEPC+hOovWkrmM6
+Ec1oAsqs9DjrK+HzOOcaBuv0Rz9pI7Gob5LQAp8tqOCI4CvP6sdfooSsucCoqB6V
+xQAakXbsidamWcLtYkTjY2zYVhHvVMk1H5krfgrsoGIaym/QTnk+YQYFd5jt4FiJ
+ziLZXiZJOeJXJVdlAcJF9aUlO48OAKJeBoq3NkcbxbECgYEA+a2pJ6BN8xKvWyZJ
+QnpWL5irVKUJF7l1cFvaNJJu4XMS3CfJqdA9X0b7Zuu/8zOdj+5eNpK6Mpz65+mx
++/ToYNYoMewFXlfDpcIpT4FdBJAKsKMua2UlTzOI7DxSrcAGD0nItK3ZovpzmNJo
+H90maU0gib0CSsFVvsAsnVVSawcCgYEA7SfP8tc23txMbLzz+9DjlmeqT2v1XI/P
+QZEwCO6AIjbbJw3iFYjIgkd86gVGRwIdYEfNoiIk8KT4dMsW4jiwalFa/fA+HW69
+pqMf1PFnxNPZim592EANVjzzkN4jm63QzIAFiGcN2K99ltjUWrfrzLkkiFR6ENHF
+dgIpWTyAed8CgYBH/CCr8xTmQvnZzsUKbJkSqfKjud1QQMEyPtk/lQRw7at/W91R
+n19CbAWpm8jAxp3j1HbHRzB1zTqtyHvvR6ID4Vq/Yev+UlFvJfahHIwD97+NQ87r
+WcMS/am5an7v51AX8k7ygLkhuxG++tLYdPtRGtKJw7u4b9tX3rI+Pk4/2wKBgQCn
+CIZ3ZMuZ1hHh+Ifj0bGqSqNywvgS1JtGdAsgD1OiRX6/mBCn2CpZUB6T+VkRRFUK
+bihQTLo14Au6vxwEA6eFin2LI72sH0ZmarhN1CWhRREQZlguipaaKd3nJ/5udNL+
+ZiD/fI4NEzVinJ+csbPcAn7PoqhC1my8fDNBTdKzgwKBgQCvH0MEpkZefqN82CNn
+CuJeQYb48mkFgihICeTsfIeG7XsGqfCOlzbJqxCbTX+Na7FUdtmtJUznK+rVGOPh
+p+pAw8RbZSIvgzCO1vv0wSHsXxXsieOgwJPZeQqsBWhRs77Ggf9jhIzxcQJuIor3
+l7Nxg0eoiqP/rYFyOh83nebPQg==
+-----END PRIVATE KEY-----

localhost.pem

@@ -0,0 +1,26 @@
+-----BEGIN CERTIFICATE-----
+MIIEUjCCArqgAwIBAgIQA9mbF03CznoBZ2TyJTPO8jANBgkqhkiG9w0BAQsFADCB
+jTEeMBwGA1UEChMVbWtjZXJ0IGRldmVsb3BtZW50IENBMTEwLwYDVQQLDChERVNL
+VE9QLVNHRkwzNExcaG9zdHBhcmtAREVTS1RPUC1TR0ZMMzRMMTgwNgYDVQQDDC9t
+a2NlcnQgREVTS1RPUC1TR0ZMMzRMXGhvc3RwYXJrQERFU0tUT1AtU0dGTDM0TDAe
+Fw0yNTAyMTQwMzU2MTJaFw0yNzA1MTQwMzU2MTJaMFwxJzAlBgNVBAoTHm1rY2Vy
+dCBkZXZlbG9wbWVudCBjZXJ0aWZpY2F0ZTExMC8GA1UECwwoREVTS1RPUC1TR0ZM
+MzRMXGhvc3RwYXJrQERFU0tUT1AtU0dGTDM0TDCCASIwDQYJKoZIhvcNAQEBBQAD
+ggEPADCCAQoCggEBAOdMmd64SOUKT+CbNRDJ4j3FZ2vlOJjP78dV0hH3U+WzAQIt
+eJb6PjbQBFD4OnHwljWy2z2QySL+OcPxw0UzBI6ckAPDJb5tllgB0Z386nLI1BaO
+b3Tekqe0EoNhQt5sSe+IwNDPv4zon1hxWpZJFMxHpWLNJghDS8hSpBlohKn9Mou9
+OyyMuPDPoMhi1nYZDTqUBlia9fpSFKXfbElDoZZ/gmd6af/ZspgUaTzx3g5F+uGk
+PUlXeUZAaTQdT+kjxHTXukrGr2Wr9zh3yGo3QJ2RBS/SUXDoNCCbd605U5qOVjh4
+OP5DeYMIRFPyZ4fU9d+5OwcG1MwfGgCJG27hihkCAwEAAaNeMFwwDgYDVR0PAQH/
+BAQDAgWgMBMGA1UdJQQMMAoGCCsGAQUFBwMBMB8GA1UdIwQYMBaAFN7IkO4WB6E9
+uTxB+KENPr8pN9V4MBQGA1UdEQQNMAuCCWxvY2FsaG9zdDANBgkqhkiG9w0BAQsF
+AAOCAYEAa9kWqz5NvJo1+9lzTM+QwjeRL7wsfeygdwIx3PRn/0bbyglUO+MhR6oK
+cbjzpKj+2C5sWuuNSIOGcU95Dnh6ekQtxjSY3j7gbwOiYmwYj4LVRF9KIeGQgW72
+kHA+tnuEsAhe33mloJhGjrZ/cqkxPz31foVpOpeP0l85NTzXGfyDjePivlgfbCUT
+8juBEIGD1Go3PTrLoNC0P/1lJAgc1+lGEY2veGQNMqy6TXIhLLHMuXdSEDqQJxjB
+N6fNzfZh163jgI4UCpmowoLp6oO5iOlM3cxzsfwGpubf7W9nUOyAO5B4VzsTvqYe
+MLfiUKZXlwUb9eyhIhk0UhgCM4IelcRMUH5nLDn6a2Pyu3bs4TpJ1zTmRZt7PjsX
+0HllN2/xkp2XRdSLutGTrya5zqo4nLaDa67sTt5WhDp+JRgA3rb5Sgcw78pYEfFq
+5IGuKZsuSMy6qZFbTAJVINPKwkH6eBAQcr3PyyCMKdJDFkeVYeuqef5N2u/GpGKO
+DQ0E7Vhc
+-----END CERTIFICATE-----

package.json

@@ -30,6 +30,7 @@
     "pinia-plugin-persist": "^1.0.0",
     "quill": "^2.0.3",
     "upload-images-converter": "^2.0.2",
+    "vite-plugin-mkcert": "^1.17.6",
     "vue": "^3.5.13",
     "vue-flatpickr-component": "^11.0.5",
     "vue-router": "^4.4.5"

src/common/axios-interceptor.js

@@ -3,7 +3,7 @@ import { useRoute } from 'vue-router';
 import { useToastStore } from '@s/toastStore';
 
 const $api = axios.create({
-    baseURL: 'http://localhost:10325/api/',
+    baseURL: 'https://192.168.0.251:10325/api/',
     timeout: 300000,
     withCredentials: true,
 });
@@ -37,7 +37,7 @@ $api.interceptors.response.use(
     },
     function (error) {
         const toastStore = useToastStore();
-        const currentPage = error.config.headers['X-Page-Route'];
+        //const currentPage = error.config.headers['X-Page-Route'];
         // 오류 응답 처리
         if (error.response) {
             switch (error.response.status) {

src/components/user/LoginForm.vue

@@ -66,10 +66,9 @@
             { headers: { 'X-Page-Route': route.path } },
         ).then(res => {
             if (res.status === 200) {
-                // TODO: 개발용 로그인 쿠키세팅이므로 차후 삭제
+                // const sessionCookie = res.data.data;
-                const sessionCookie = res.data.data;
+                // document.cookie = `JSESSIONID=${sessionCookie};path=/;expires=-1;`;
-                document.cookie = `JSESSIONID=${sessionCookie};path=/;expires=-1;`;
+                // document.cookie = `JSESSIONID=${sessionCookie};path=/;HttpOnly=true;samesite=lax`;
-                document.cookie = `JSESSIONID=${sessionCookie};path=/`;
 
                 userStore.userInfo();
                 router.push('/');

vite.config.js

@@ -1,13 +1,20 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from 'node:url';
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue'
+import vue from '@vitejs/plugin-vue';
-import vueDevTools from 'vite-plugin-vue-devtools'
+import vueDevTools from 'vite-plugin-vue-devtools';
+import mkcert from 'vite-plugin-mkcert';
 
 // https://vite.dev/config/
 export default defineConfig({
     plugins: [
         vue(),
         vueDevTools(),
+        // 자신의 로컬 서버에 연결하려면 이부분 주석처리
+        mkcert({
+            // SSL 키 등록
+            keyFile: '/localhost-key.pem',
+            certFile: '/localhost.pem',
+        }),
     ],
     resolve: {
         alias: {
@@ -18,7 +25,7 @@ export default defineConfig({
             '@l': fileURLToPath(new URL('./src/layout/', import.meta.url)),
             '@s': fileURLToPath(new URL('./src/stores/', import.meta.url)),
             '@p': fileURLToPath(new URL('./src/common/plugin/', import.meta.url)),
-            "@api": fileURLToPath(new URL('./src/common/axios-interceptor.js', import.meta.url))
+            '@api': fileURLToPath(new URL('./src/common/axios-interceptor.js', import.meta.url)),
         },
     },
-})
+});