Commit @799454e77044a71c5023b4d0641df672abf47590

하관우 04-07

2025-04-07 하관우 로그인 아이디 저장장

@799454e77044a71c5023b4d0641df672abf47590

5acfdbb

799454e

client/views/index.js

--- client/views/index.js

+++ client/views/index.js


 import Store from "./pages/AppStore.js";
 import Router from "./pages/AppRouter.js";
 import cmmnPlugin from '@/resources/js/cmmnPlugin.js'
+import VueCookies from 'vue-cookies';
 
 async function initVueApp() {
   const vue = createApp(App)
     .use(Router)
     .use(Store)
     .use(cmmnPlugin)
+    .use(VueCookies);
+
+  vue.$cookies.config('7d'); // 쿠키의 기본 유효 기간을 1일로 설정
   vue.config.devtools = true;
   vue.mount("#root");
 }

5acfdbb

799454e

client/views/pages/login/Login.vue

--- client/views/pages/login/Login.vue

+++ client/views/pages/login/Login.vue


             <dl>
                 <dd class="mb-25">
                     <label for="id">아이디</label>
-                    <input type="text" id="id"  placeholder="아이디를 입력하세요." v-model="member['loginId']">
+                    <input type="text" id="id" placeholder="아이디를 입력하세요." v-model="member['loginId']">
                 </dd>
 
                 <dd class="mb-10">
                     <label for="pw">비밀번호</label>
-                    <input type="password" id="pw"  placeholder="비밀번호를 입력하세요." v-model="member['password']"
+                    <input type="password" id="pw" placeholder="비밀번호를 입력하세요." v-model="member['password']"
                         @keyup.enter="fnLogin">
                 </dd>
                 <dd class="check-area flex-end mb-25">
-                    <input type="checkbox" class="margin-top">
+                    <input type="checkbox" class="margin-top" v-model="saveId">
                     <label for="save">아이디 저장</label>
                 </dd>
             </dl>

 <script>
 import { useStore } from "vuex";
 import axios from "axios";
+import VueCookies from 'vue-cookies';
 
 export default {
     data() {

             loginicon: 'client/resources/images/icon/lock.png',
             righticon: 'client/resources/images/icon/right.png',
 
+            saveId: false,
             member: {
                 loginId: null,
                 password: null,

         };
     },
     methods: {
+
         async fnLogin() {
             try {
                 const response = await axios.post("/user/login.json", this.member, {

                         this.store.commit("setLoginId", mbr.loginId);
                         this.store.commit("setUserNm", mbr.userNm);
                         this.store.commit("setRoles", mbr.roles);
+                    }
+
+                     // 아이디 저장 처리
+                     if (this.saveId) {
+                        VueCookies.set('savedLoginId', this.member.loginId, '1d'); // 1일 동안 쿠키 저장
+                    } else {
+                        VueCookies.remove('savedLoginId'); // 체크 해제 시 쿠키 삭제
                     }
 
                     // 리다이렉트 처리

     computed: {},
     components: {},
     created() { },
-    mounted() { },
+    mounted() {
+        // 페이지 로드 시 저장된 아이디 가져오기
+        const savedId = VueCookies.get('savedLoginId');
+        if (savedId) {
+            this.member.loginId = savedId;
+            this.saveId = true; // 체크박스 체크
+        }
+    },
 };
 </script>

5acfdbb

799454e

package.json

--- package.json

+++ package.json

...	...	@@ -16,6 +16,7 @@
16	16	"new-line": "^1.1.1",
17	17	"swiper": "^11.2.5",
18	18	"vue": "3.5.13",
	19	+ "vue-cookies": "^1.8.6",
19	20	"vue-loader": "^17.2.2",
20	21	"vue-router": "^4.3.2",
21	22	"vuex": "^4.1.0",

Add a comment

Open 0
Closed 0

List

...	...	@@ -4,12 +4,16 @@
4	4	import Store from "./pages/AppStore.js";
5	5	import Router from "./pages/AppRouter.js";
6	6	import cmmnPlugin from '@/resources/js/cmmnPlugin.js'
	7	+import VueCookies from 'vue-cookies';
7	8
8	9	async function initVueApp() {
9	10	const vue = createApp(App)
10	11	.use(Router)
11	12	.use(Store)
12	13	.use(cmmnPlugin)
	14	+ .use(VueCookies);
	15	+
	16	+ vue.$cookies.config('7d'); // 쿠키의 기본 유효 기간을 1일로 설정
13	17	vue.config.devtools = true;
14	18	vue.mount("#root");
15	19	}

...	...	@@ -15,16 +15,16 @@
15	15	<dl>
16	16	<dd class="mb-25">
17	17	<label for="id">아이디</label>
18		- <input type="text" id="id" placeholder="아이디를 입력하세요." v-model="member['loginId']">
	18	+ <input type="text" id="id" placeholder="아이디를 입력하세요." v-model="member['loginId']">
19	19	</dd>
20	20
21	21	<dd class="mb-10">
22	22	<label for="pw">비밀번호</label>
23		- <input type="password" id="pw" placeholder="비밀번호를 입력하세요." v-model="member['password']"
	23	+ <input type="password" id="pw" placeholder="비밀번호를 입력하세요." v-model="member['password']"
24	24	@keyup.enter="fnLogin">
25	25	</dd>
26	26	<dd class="check-area flex-end mb-25">
27		- <input type="checkbox" class="margin-top">
	27	+ <input type="checkbox" class="margin-top" v-model="saveId">
28	28	<label for="save">아이디 저장</label>
29	29	</dd>
30	30	</dl>
...	...	@@ -37,6 +37,7 @@
37	37	<script>
38	38	import { useStore } from "vuex";
39	39	import axios from "axios";
	40	+import VueCookies from 'vue-cookies';
40	41
41	42	export default {
42	43	data() {
...	...	@@ -46,6 +47,7 @@
46	47	loginicon: 'client/resources/images/icon/lock.png',
47	48	righticon: 'client/resources/images/icon/right.png',
48	49
	50	+ saveId: false,
49	51	member: {
50	52	loginId: null,
51	53	password: null,
...	...	@@ -54,6 +56,7 @@
54	56	};
55	57	},
56	58	methods: {
	59	+
57	60	async fnLogin() {
58	61	try {
59	62	const response = await axios.post("/user/login.json", this.member, {
...	...	@@ -75,6 +78,13 @@
75	78	this.store.commit("setLoginId", mbr.loginId);
76	79	this.store.commit("setUserNm", mbr.userNm);
77	80	this.store.commit("setRoles", mbr.roles);
	81	+ }
	82	+
	83	+ // 아이디 저장 처리
	84	+ if (this.saveId) {
	85	+ VueCookies.set('savedLoginId', this.member.loginId, '1d'); // 1일 동안 쿠키 저장
	86	+ } else {
	87	+ VueCookies.remove('savedLoginId'); // 체크 해제 시 쿠키 삭제
78	88	}
79	89
80	90	// 리다이렉트 처리
...	...	@@ -102,6 +112,13 @@
102	112	computed: {},
103	113	components: {},
104	114	created() { },
105		- mounted() { },
	115	+ mounted() {
	116	+ // 페이지 로드 시 저장된 아이디 가져오기
	117	+ const savedId = VueCookies.get('savedLoginId');
	118	+ if (savedId) {
	119	+ this.member.loginId = savedId;
	120	+ this.saveId = true; // 체크박스 체크
	121	+ }
	122	+ },
106	123	};
107	124	</script>

Delete comment