Commit @35fe6c3bd6bbe0a2b8d1b5cddcbbd3ead723f578

moonyeju 01-17

240117 김준식 로그인 기능 수정, 로그아웃 기능 추가

@35fe6c3bd6bbe0a2b8d1b5cddcbbd3ead723f578

aec2585

35fe6c3

client/views/layout/Header.vue

--- client/views/layout/Header.vue

+++ client/views/layout/Header.vue


                     <div class="user-img">
                         <svg-icon type="mdi" :path="mdiAccountCircle" color="#213f99"></svg-icon>
                     </div>
-                    <span class="user-name">000님</span>
+                    <span class="user-name" v-show="cookieExist">{{ userName }}님</span>
                 </div>
-                <button class="logout-btn">로그아웃</button>
+                <button class="logout-btn" @click="logout()" v-show="cookieExist">로그아웃</button>
+                <button class="logout-btn" @click="login()" v-show="!cookieExist">로그인</button>
+                
             </div>
         </div>
     </header>

 <script>
 import SvgIcon from '@jamescoyle/vue-icon'
 import { mdiEmail, mdiAccountCircle } from '@mdi/js'
+import axios from 'axios'
+
 export default {
     props: {
         className: String

     data() {
         return {
             mdiEmail: mdiEmail,
-            mdiAccountCircle: mdiAccountCircle
+            mdiAccountCircle: mdiAccountCircle,
+            cookieExist: null, // 쿠키 존재 여부
+            userName: $cookies.get("USER"), // 사용자 이름
         }
     },
     methods: {
+        // 로그아웃
+        logout: function () {
+            const vm = this;
+
+            axios({
+                url: '/logout.json',
+                method: 'post',
+                headers: { "Content-Type": "application/json; charset=UTF-8" },
+                data: {},
+            })
+                .then(function (response) {
+                    console.log("logout - response", response.data);
+                    $cookies.remove("USER");
+                    $cookies.remove("JSESSIONID");
+                    vm.cookieExist = false;
+                    alert("로그아웃하였습니다.");
+                    vm.$router.go();
+                    vm.$router.push({ path: '/', query: {} });
+                })
+                .catch(function (error) {
+                    console.log("logout - error", error);
+                    alert("로그아웃에 오류가 발생하였습니다.");
+                });
+
+        },
+
+        //로그인 버튼 클릭시 login.page로 이동
+        login: function () {
+            this.$router.push('/');
+        }
 
     },
-    watch: {
-
-    },
+    watch: {},
     computed: {
         logoStyle() {
             if (this.className === 'top') {

             } else {
                 return {}
             }
-        }
+        },
     },
     components: {
         'SvgIcon': SvgIcon
     },
     mounted() {
         console.log('Header mounted');
+
+        //쿠키 존재 유무 확인
+        if ($cookies.get("JSESSIONID") != null) {
+            this.cookieExist = true;
+        }
+        else {
+            // 없으면 로그인페이지로 이동
+            this.cookieExist = false;
+            this.$router.push('/');
+        }
     }
 }
 </script>

aec2585

35fe6c3

client/views/pages/login/Login.vue

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

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


                         <router-link to="/register.page">회원가입</router-link>
                     </div>
                 </div>
-                <button class="blue-btn large-btn" v-on:click="login()">로그인</button>
+                <button class="blue-btn large-btn" @click="login()">로그인</button>
             </div>
         </div>
     </div>
 </template>
 
 <script>
+import axios from "axios";
+import vueCookie from "vue-cookies";
 export default {
     data() {
         return {

 
             // 아이디를 입력하지 않았을 경우
             // 공백만 입력하였을 경우
-            // 특수문자가 입려되었을 경우
-            if (vm.userData.user_id == null || vm.userLogin.user_id.replace(/\s/gi, '') == '' || special_pattern.test(vm.userLogin.user_id) == true) {
+            // 특수문자가 입력되었을 경우
+            if (vm.userLogin.user_id == null || vm.userLogin.user_id.replace(/\s/gi, '') == '' || special_pattern.test(vm.userLogin.user_id) == true) {
                 alert("아이디를 입력해주시기 바랍니다.");
                 return;
             }
 
             // 비밀번호를 입력하지 않았을 경우
             // 공백만 입력하였을 경우
-            // 특수문자가 입려되었을 경우
+            // 특수문자가 입력되었을 경우
             if (vm.userLogin.user_password == null || vm.userLogin.user_password.replace(/\s/gi, '') == '') {
                 alert("비밀번호를 입력해주시기 바랍니다.");
                 return;

                 url: '/login.json',
                 method: 'post',
                 headers: { "Content-Type": "application/json; charset=UTF-8" },
-                data: vm.userData,
+                data: vm.userLogin,
             })
                 .then(function (response) {
                     console.log("login - response", response.data);
                     if (response.data > 0) {
                         alert("로그인 성공하였습니다.");
-                        vm.$router.push({ path: '/', query: {} });
+                        vm.$router.go();
+                        vm.$router.push({ path: '/main.page', query: {} });
                     } else {
-                        alert("로그인 실패하였습니다. 아이디와 비밀번호를 다시 입력해주시기 바랍니다.");
+                        alert("로그인 실패하였습니다.\n\n아이디와 비밀번호를 다시 입력해주시기 바랍니다.");
                         return;
                     
                     }

                 });
         },
     },
-    watch: {},
+    watch: {
+
+        
+    },
     computed: {},
     components: {},
     mounted() {
         console.log('main mounted');
+        // 쿠키에 JSESSIONID 키 값이 존재한다면 메인페이지로 이동
+        if (vueCookie.get("JSESSIONID") != null) {
+            this.$router.push({ path: '/main.page', query: {} });
+        }
     },
 };
 </script>

aec2585

35fe6c3

package-lock.json

--- package-lock.json

+++ package-lock.json

...	...	@@ -1,5 +1,5 @@
1	1	{
2		- "name": "Data_Quality",
	2	+ "name": "Data_Quality-1",
3	3	"lockfileVersion": 2,
4	4	"requires": true,
5	5	"packages": {
...	...	@@ -23,6 +23,7 @@
23	23	"pg": "8.8.0",
24	24	"url-loader": "4.1.1",
25	25	"vue": "3.2.40",
	26	+ "vue-cookies": "^1.8.3",
26	27	"vue-jstree": "^2.1.6",
27	28	"vue-loader": "^17.0.0",
28	29	"vue-router": "4.1.5",
...	...	@@ -4973,6 +4974,11 @@
4973	4974	"@vue/shared": "3.2.40"
4974	4975	}
4975	4976	},
	4977	+ "node_modules/vue-cookies": {
	4978	+ "version": "1.8.3",
	4979	+ "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.8.3.tgz",
	4980	+ "integrity": "sha512-VBRsyRMVdahBgFfh389TMHPmDdr4URDJNMk4FKSCfuNITs7+jitBDhwyL4RJd3WUsfOYNNjPAkfbehyH9AFuoA=="
	4981	+ },
4976	4982	"node_modules/vue-jstree": {
4977	4983	"version": "2.1.6",
4978	4984	"resolved": "https://registry.npmjs.org/vue-jstree/-/vue-jstree-2.1.6.tgz",
...	...	@@ -9132,6 +9138,11 @@
9132	9138	"@vue/shared": "3.2.40"
9133	9139	}
9134	9140	},
	9141	+ "vue-cookies": {
	9142	+ "version": "1.8.3",
	9143	+ "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.8.3.tgz",
	9144	+ "integrity": "sha512-VBRsyRMVdahBgFfh389TMHPmDdr4URDJNMk4FKSCfuNITs7+jitBDhwyL4RJd3WUsfOYNNjPAkfbehyH9AFuoA=="
	9145	+ },
9135	9146	"vue-jstree": {
9136	9147	"version": "2.1.6",
9137	9148	"resolved": "https://registry.npmjs.org/vue-jstree/-/vue-jstree-2.1.6.tgz",

aec2585

35fe6c3

package.json

--- package.json

+++ package.json

...	...	@@ -18,6 +18,7 @@
18	18	"pg": "8.8.0",
19	19	"url-loader": "4.1.1",
20	20	"vue": "3.2.40",
	21	+ "vue-cookies": "^1.8.3",
21	22	"vue-jstree": "^2.1.6",
22	23	"vue-loader": "^17.0.0",
23	24	"vue-router": "4.1.5",

Add a comment

Open 0
Closed 0

List

...	...	@@ -16,13 +16,15 @@
16	16	<router-link to="/register.page">회원가입</router-link>
17	17	</div>
18	18	</div>
19		- <button class="blue-btn large-btn" v-on:click="login()">로그인</button>
	19	+ <button class="blue-btn large-btn" @click="login()">로그인</button>
20	20	</div>
21	21	</div>
22	22	</div>
23	23	</template>
24	24
25	25	<script>
	26	+import axios from "axios";
	27	+import vueCookie from "vue-cookies";
26	28	export default {
27	29	data() {
28	30	return {
...	...	@@ -42,15 +44,15 @@
42	44
43	45	// 아이디를 입력하지 않았을 경우
44	46	// 공백만 입력하였을 경우
45		- // 특수문자가 입려되었을 경우
46		- if (vm.userData.user_id == null \|\| vm.userLogin.user_id.replace(/\s/gi, '') == '' \|\| special_pattern.test(vm.userLogin.user_id) == true) {
	47	+ // 특수문자가 입력되었을 경우
	48	+ if (vm.userLogin.user_id == null \|\| vm.userLogin.user_id.replace(/\s/gi, '') == '' \|\| special_pattern.test(vm.userLogin.user_id) == true) {
47	49	alert("아이디를 입력해주시기 바랍니다.");
48	50	return;
49	51	}
50	52
51	53	// 비밀번호를 입력하지 않았을 경우
52	54	// 공백만 입력하였을 경우
53		- // 특수문자가 입려되었을 경우
	55	+ // 특수문자가 입력되었을 경우
54	56	if (vm.userLogin.user_password == null \|\| vm.userLogin.user_password.replace(/\s/gi, '') == '') {
55	57	alert("비밀번호를 입력해주시기 바랍니다.");
56	58	return;
...	...	@@ -60,15 +62,16 @@
60	62	url: '/login.json',
61	63	method: 'post',
62	64	headers: { "Content-Type": "application/json; charset=UTF-8" },
63		- data: vm.userData,
	65	+ data: vm.userLogin,
64	66	})
65	67	.then(function (response) {
66	68	console.log("login - response", response.data);
67	69	if (response.data > 0) {
68	70	alert("로그인 성공하였습니다.");
69		- vm.$router.push({ path: '/', query: {} });
	71	+ vm.$router.go();
	72	+ vm.$router.push({ path: '/main.page', query: {} });
70	73	} else {
71		- alert("로그인 실패하였습니다. 아이디와 비밀번호를 다시 입력해주시기 바랍니다.");
	74	+ alert("로그인 실패하였습니다.\n\n아이디와 비밀번호를 다시 입력해주시기 바랍니다.");
72	75	return;
73	76
74	77	}
...	...	@@ -79,11 +82,18 @@
79	82	});
80	83	},
81	84	},
82		- watch: {},
	85	+ watch: {
	86	+
	87	+
	88	+ },
83	89	computed: {},
84	90	components: {},
85	91	mounted() {
86	92	console.log('main mounted');
	93	+ // 쿠키에 JSESSIONID 키 값이 존재한다면 메인페이지로 이동
	94	+ if (vueCookie.get("JSESSIONID") != null) {
	95	+ this.$router.push({ path: '/main.page', query: {} });
	96	+ }
87	97	},
88	98	};
89	99	</script>

Delete comment