Commit @33badb221ff47c1a506a85ca72508ad3a8540669

youngsuk 2023-07-06

230706 서영석 로그인 기능

@33badb221ff47c1a506a85ca72508ad3a8540669

5773fd3

33badb2

client/views/component/OpenLayers.vue

--- client/views/component/OpenLayers.vue

+++ client/views/component/OpenLayers.vue


       this.mapView = new View({
         projection: this.baseSource, ///EPSG:3857
         center: transform([339979.82131209393, 265331.9344441357], "EPSG:5181", vm.baseSource), //126.9757184, 37.564388 
-        zoom: 14.5,
+        zoom: 14,
         minZoom: 8,
         maxZoom: 19
       });

         this.map.on('moveend', function (e) {
           var newZoom = vm.map.getView().getZoom();
           console.log('zoom end, new zoom: ' + newZoom);
-          vm.$parent.childMoveEnd(newZoom);
+          // vm.$parent.childMoveEnd(newZoom);
         });
 
         this.map.on("click", (evt) => {

             }
           );
           //특정 layer 선택 틀릭 시, 
-          this.map.getAllLayers()
-            .filter((layer) => layer.get("name").startWith(layerName))
-            .forEach((layer) => this.map.on("click"), (event) => {
-              const prop = [];
-              this.map.forEachFeatureAtPixel(event.pixel, function (feature, layer) {
-                  let values = feature;
-                  // let values = feature.getProperties();            
-                  values['layerName'] = layer.get('name');
-                  prop.push(values);
-                }
-              );
-            })
+          
           vm.$parent.childClick(prop, evt.coordinate);
         });
 

5773fd3

33badb2

client/views/layout/Header.vue

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

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


         <router-link to="/Login.page">
           <span>로그인</span>
         </router-link>
+        <button class="logout-btn" @click="logout"  v-show="!store.state.loginUser == false && store.state.loginUser != null">로그아웃</button>
       </div>
     </div>
   </header>

 <script>
 // import test from "./sidebar-accordion";
 const Menu = require("./Menu");
+import { useStore } from "vuex";
+import axios from "axios";
 export default {
   data() {
     return {

         //   subMenu: [{ title: "로그인", route: "/Login.page" },],
         // },
       ],
+      store : useStore(),
     };
   },
   methods: {
+    //로그아웃
+    logout: function () {
+            if (confirm('로그아웃 하시겠습니까?') == false) {
+                return;
+            }
+            let vm = this;
+            axios({
+                url: "/user/logout.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+            }).then(function (response) {
+                // console.log("logout - response : ", response);
+                vm.$router.push({ path: '/Login.page', query: {} });
+            }).catch(function (error) {
+                console.log("logout - error : ", error);
+            });
+        },
+
     toggleSubMenu(index) {
       this.menuItems[index].open = !this.menuItems[index].open;
       this.showSubmenu = true;

5773fd3

33badb2

client/views/pages/App.vue

--- client/views/pages/App.vue

+++ client/views/pages/App.vue


 </template>
 
 <script>
+import { useStore } from "vuex";
+import axios from "axios";
 import Header from "../layout/Header.vue";
 import Menu from "../layout/Menu.vue";
 import Footer from "../layout/Footer.vue";
 
 const App = {
-  data: () => {
-    return {};
-  },
-  methods: {},
+  data: function () {
+        return {
+            store: useStore(),
+        };
+    },
+    methods: {
+        //로그인 사용자 조회
+        loginUserSelectOne: function (callback) {
+            let vm = this;
+            axios({
+                url: "/user/loginUserSelectOne.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+            }).then(function (response) {
+                console.log("getIsLogin - response : ", response);
+                if (response.data.loginUser != null && response.data.loginUser['user_id'] != null) {
+                    vm.store.commit("setLoginUser", response.data.loginUser);
+                } else {
+                    vm.store.commit("setLoginUser", null);
+                }
+                if (response.data.key != null && response.data.key['salt'] != null) {
+                    vm.store.commit("setKey", response.data.key);
+                    // console.log("vm.store",vm.store);
+                    // console.log("response.data.key['salt']",response.data.key['salt']);
+                } else {
+                    vm.store.commit("setKey", null);
+                }
+                            console.log("vm.store  : ", vm.store);
+
+                callback(response.data);
+            }).catch(function (error) {
+                console.log("getIsLogin - error : ", error);
+            });
+        }
+    },
   watch: {},
   computed: {},
   components: {

     Menu: Menu,
     Footer: Footer,
   },
-  mounted: () => {
-    console.log("Vue mounted");
-  },
+  mounted: function () {
+        //vue router에게 페이지 변경 요청을 하여, router가 페이지 변경 전, 실행되는 훅(이벤트)
+        this.$router.beforeEach((to, from, next) => {
+            //console.log("to : ", to, ", from : ", from);
+            //로그인 사용자 조회 후, callback을 통해 로그인 사용자 정보 받기
+            this.loginUserSelectOne(function (store) {
+                //로그인 유무(로그인 정보가 있으면 True, 없으면 False)
+                let isLogin = (store.loginUser != null && store.loginUser['user_id'] != null);
+                //로그인 상태 일 때
+                if (isLogin == true) {
+                    //로그인 페이지 이동은 못하게 함
+                    if (to.path == '/Login.page') {
+                        next(false);
+                    } else {//로그인 페이지 이 외의 페이지들을 이동 가능하게 함
+                        next();
+                    }
+                } else {//로그인 상태가 아닐 때
+                    //로그인 페이지에서 다른 페이지로 이동하려고 할 때, 이동 못하게 함
+                    if (from.path == '/Login.page') {
+                        next(false);
+                    } else {//로그인 페이지 이외의 페이지에서, 페이지 이동을 하려고 할 때
+                        //로그인 페이지로 이동은 무조건 가능
+                        if (to.path == "/Login.page") {
+                            next();
+                        } else {//로그인 페이지로 무조건 이동
+                            next("/Login.page");
+                        }
+                    }
+                }
+                /* if (to.path == "/") {
+                    if (isLogin == true) {
+                        next();
+                    } else {
+                        next("/login.page");
+                    }
+                } else {
+                    if (isLogin == true) {
+                        if (to.path == "/login.page") {
+                            next(from.path);
+                        } else {
+                            next();
+                        }
+                    } else {
+                        if (to.path == "/login.page") {
+                            next();
+                        } else {
+                            next("/login.page");
+                        }
+                    }
+                } */
+            });
+        });
+    },
 };
 
 export default App;

5773fd3

33badb2

client/views/pages/main/Login.vue

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

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


       <div class="form-wrap">
         <form action="">
           <div class="flex-center m-b">
-            <input type="text" name="" id="" placeholder="ID">
+            <label for="id">아이디</label>
+            <input type="text" name="" id="" ref="user_id" placeholder="ID" v-model="userLogin.user_id" @keyup.enter="login">
           </div>
           <div class="flex-center m-b">
-            <input type="password" name="" id="" placeholder="Password">
+            <label for="password">비밀번호</label>
+            <input type="password" name="" id="" ref="user_pw" placeholder="Password" v-model="userLogin.user_pw" @keyup.enter="login">
           </div>   
     
 
           <div class="btn-wrap">
-            <button type="button" class="green-btn btn-l loginbtn" @click="modal_1 = true">로그인</button>
+            <button type="button" class="green-btn btn-l loginbtn"  @click="login">로그인</button>
             <router-link to="/IdFind.page"> <span class="">아이디 찾기</span></router-link>
           </div>
         </form>

 </template>
 
 <script>
+import axios from 'axios';
+import crypto from "crypto-js";
+import { useStore } from 'vuex';
 export default {
   data() {
     return {
-      modal_1: false,
+      userLogin: {
+          user_id: null,
+          user_pw: null
+      },
+      store: useStore(),
     };
   },
-  methods: {},
+  methods: {
+    //로그인
+    login: function () {
+            let vm = this;
+            //Encrypt
+            // var iv = this.store.state.key.iv;
+            // var salt = this.store.state.key.salt;
+            // var passPhrase = this.store.state.key.ENC_KEY;
+            var iv = 'e9d3712c4d5c35093d340733b8c26b92';
+            var salt = 'deafa8b6802cebcc0bcceaaa5f3461a9';
+            var passPhrase = 'e534cf179007db7e6360ebf95fa5d51c';
+            var keySize = 128;
+            var iterationCount = 1000;
+            var key128Bits100Iterations = crypto.PBKDF2(passPhrase,
+                crypto.enc.Hex.parse(salt),
+                { keySize: keySize / 32, iterations: iterationCount }
+            );
+
+            //var encrypted = CryptoJS.AES.encrypt(
+            // this.userLogin.user_pw = crypto.AES.encrypt(this.userLogin.user_pw, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
+            axios({
+                url: '/user/login.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8'
+                },
+                data: vm.userLogin
+            }).then(function (response) {
+                // console.log("login - response : ", response);
+                if (response.data == true) {
+                    vm.$router.push({ path: '/', query: {} });
+                } else {
+                    alert('로그인 정보를 다시 확인해주세요.');
+                    vm.$refs['user_id'].focus();
+                }
+            }).catch(function (error) {
+                console.log("login - error : ", error);
+            });
+        },
+        // // 암호화 메서드
+        // cipher : (password, key) => {
+        //     const encrypt = crypto.createCipher(AES, key) // des알고리즘과 키를 설정
+        //     const encryptResult = encrypt.update(password, 'utf8', 'base64') // 암호화
+        //         + encrypt.final('base64') // 인코딩
+
+        //     console.log(encryptResult)
+        //     return encryptResult
+        // }  
+  },
   watch: {},
   computed: {},
   mounted() {

5773fd3

33badb2

package-lock.json

--- package-lock.json

+++ package-lock.json

...	...	@@ -1,5 +1,5 @@
1	1	{
2		- "name": "crosswalk-1",
	2	+ "name": "crosswalk",
3	3	"lockfileVersion": 2,
4	4	"requires": true,
5	5	"packages": {
...	...	@@ -11,6 +11,7 @@
11	11	"@vue-leaflet/vue-leaflet": "github:vue-leaflet/vue-leaflet",
12	12	"axios": "^1.3.4",
13	13	"babel-loader": "8.2.5",
	14	+ "crypto-js": "^4.1.1",
14	15	"css-loader": "6.7.1",
15	16	"express": "4.18.1",
16	17	"express-http-proxy": "^1.6.3",
...	...	@@ -2961,6 +2962,11 @@
2961	2962	"engines": {
2962	2963	"node": ">= 8"
2963	2964	}
	2965	+ },
	2966	+ "node_modules/crypto-js": {
	2967	+ "version": "4.1.1",
	2968	+ "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
	2969	+ "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
2964	2970	},
2965	2971	"node_modules/css-line-break": {
2966	2972	"version": "2.1.0",
...	...	@@ -8328,6 +8334,11 @@
8328	8334	"which": "^2.0.1"
8329	8335	}
8330	8336	},
	8337	+ "crypto-js": {
	8338	+ "version": "4.1.1",
	8339	+ "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
	8340	+ "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
	8341	+ },
8331	8342	"css-line-break": {
8332	8343	"version": "2.1.0",
8333	8344	"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",

5773fd3

33badb2

package.json

--- package.json

+++ package.json


     "@vue-leaflet/vue-leaflet": "github:vue-leaflet/vue-leaflet",
     "axios": "^1.3.4",
     "babel-loader": "8.2.5",
+    "crypto-js": "^4.1.1",
     "css-loader": "6.7.1",
     "express": "4.18.1",
     "express-http-proxy": "^1.6.3",

Add a comment

Open 0
Closed 0

List

...	...	@@ -150,6 +150,7 @@
150	150	<router-link to="/Login.page">
151	151	<span>로그인</span>
152	152	</router-link>
	153	+ <button class="logout-btn" @click="logout" v-show="!store.state.loginUser == false && store.state.loginUser != null">로그아웃</button>
153	154	</div>
154	155	</div>
155	156	</header>
...	...	@@ -220,6 +221,8 @@
220	221	<script>
221	222	// import test from "./sidebar-accordion";
222	223	const Menu = require("./Menu");
	224	+import { useStore } from "vuex";
	225	+import axios from "axios";
223	226	export default {
224	227	data() {
225	228	return {
...	...	@@ -357,9 +360,30 @@
357	360	// subMenu: [{ title: "로그인", route: "/Login.page" },],
358	361	// },
359	362	],
	363	+ store : useStore(),
360	364	};
361	365	},
362	366	methods: {
	367	+ //로그아웃
	368	+ logout: function () {
	369	+ if (confirm('로그아웃 하시겠습니까?') == false) {
	370	+ return;
	371	+ }
	372	+ let vm = this;
	373	+ axios({
	374	+ url: "/user/logout.json",
	375	+ method: "post",
	376	+ headers: {
	377	+ "Content-Type": "application/json; charset=UTF-8",
	378	+ },
	379	+ }).then(function (response) {
	380	+ // console.log("logout - response : ", response);
	381	+ vm.$router.push({ path: '/Login.page', query: {} });
	382	+ }).catch(function (error) {
	383	+ console.log("logout - error : ", error);
	384	+ });
	385	+ },
	386	+
363	387	toggleSubMenu(index) {
364	388	this.menuItems[index].open = !this.menuItems[index].open;
365	389	this.showSubmenu = true;

...	...	@@ -84,7 +84,7 @@
84	84	this.mapView = new View({
85	85	projection: this.baseSource, ///EPSG:3857
86	86	center: transform([339979.82131209393, 265331.9344441357], "EPSG:5181", vm.baseSource), //126.9757184, 37.564388
87		- zoom: 14.5,
	87	+ zoom: 14,
88	88	minZoom: 8,
89	89	maxZoom: 19
90	90	});
...	...	@@ -231,7 +231,7 @@
231	231	this.map.on('moveend', function (e) {
232	232	var newZoom = vm.map.getView().getZoom();
233	233	console.log('zoom end, new zoom: ' + newZoom);
234		- vm.$parent.childMoveEnd(newZoom);
	234	+ // vm.$parent.childMoveEnd(newZoom);
235	235	});
236	236
237	237	this.map.on("click", (evt) => {
...	...	@@ -247,18 +247,7 @@
247	247	}
248	248	);
249	249	//특정 layer 선택 틀릭 시,
250		- this.map.getAllLayers()
251		- .filter((layer) => layer.get("name").startWith(layerName))
252		- .forEach((layer) => this.map.on("click"), (event) => {
253		- const prop = [];
254		- this.map.forEachFeatureAtPixel(event.pixel, function (feature, layer) {
255		- let values = feature;
256		- // let values = feature.getProperties();
257		- values['layerName'] = layer.get('name');
258		- prop.push(values);
259		- }
260		- );
261		- })
	250	+
262	251	vm.$parent.childClick(prop, evt.coordinate);
263	252	});
264	253

...	...	@@ -10,15 +10,50 @@
10	10	</template>
11	11
12	12	<script>
	13	+import { useStore } from "vuex";
	14	+import axios from "axios";
13	15	import Header from "../layout/Header.vue";
14	16	import Menu from "../layout/Menu.vue";
15	17	import Footer from "../layout/Footer.vue";
16	18
17	19	const App = {
18		- data: () => {
19		- return {};
20		- },
21		- methods: {},
	20	+ data: function () {
	21	+ return {
	22	+ store: useStore(),
	23	+ };
	24	+ },
	25	+ methods: {
	26	+ //로그인 사용자 조회
	27	+ loginUserSelectOne: function (callback) {
	28	+ let vm = this;
	29	+ axios({
	30	+ url: "/user/loginUserSelectOne.json",
	31	+ method: "post",
	32	+ headers: {
	33	+ "Content-Type": "application/json; charset=UTF-8",
	34	+ },
	35	+ }).then(function (response) {
	36	+ console.log("getIsLogin - response : ", response);
	37	+ if (response.data.loginUser != null && response.data.loginUser['user_id'] != null) {
	38	+ vm.store.commit("setLoginUser", response.data.loginUser);
	39	+ } else {
	40	+ vm.store.commit("setLoginUser", null);
	41	+ }
	42	+ if (response.data.key != null && response.data.key['salt'] != null) {
	43	+ vm.store.commit("setKey", response.data.key);
	44	+ // console.log("vm.store",vm.store);
	45	+ // console.log("response.data.key['salt']",response.data.key['salt']);
	46	+ } else {
	47	+ vm.store.commit("setKey", null);
	48	+ }
	49	+ console.log("vm.store : ", vm.store);
	50	+
	51	+ callback(response.data);
	52	+ }).catch(function (error) {
	53	+ console.log("getIsLogin - error : ", error);
	54	+ });
	55	+ }
	56	+ },
22	57	watch: {},
23	58	computed: {},
24	59	components: {
...	...	@@ -26,9 +61,59 @@
26	61	Menu: Menu,
27	62	Footer: Footer,
28	63	},
29		- mounted: () => {
30		- console.log("Vue mounted");
31		- },
	64	+ mounted: function () {
	65	+ //vue router에게 페이지 변경 요청을 하여, router가 페이지 변경 전, 실행되는 훅(이벤트)
	66	+ this.$router.beforeEach((to, from, next) => {
	67	+ //console.log("to : ", to, ", from : ", from);
	68	+ //로그인 사용자 조회 후, callback을 통해 로그인 사용자 정보 받기
	69	+ this.loginUserSelectOne(function (store) {
	70	+ //로그인 유무(로그인 정보가 있으면 True, 없으면 False)
	71	+ let isLogin = (store.loginUser != null && store.loginUser['user_id'] != null);
	72	+ //로그인 상태 일 때
	73	+ if (isLogin == true) {
	74	+ //로그인 페이지 이동은 못하게 함
	75	+ if (to.path == '/Login.page') {
	76	+ next(false);
	77	+ } else {//로그인 페이지 이 외의 페이지들을 이동 가능하게 함
	78	+ next();
	79	+ }
	80	+ } else {//로그인 상태가 아닐 때
	81	+ //로그인 페이지에서 다른 페이지로 이동하려고 할 때, 이동 못하게 함
	82	+ if (from.path == '/Login.page') {
	83	+ next(false);
	84	+ } else {//로그인 페이지 이외의 페이지에서, 페이지 이동을 하려고 할 때
	85	+ //로그인 페이지로 이동은 무조건 가능
	86	+ if (to.path == "/Login.page") {
	87	+ next();
	88	+ } else {//로그인 페이지로 무조건 이동
	89	+ next("/Login.page");
	90	+ }
	91	+ }
	92	+ }
	93	+ /* if (to.path == "/") {
	94	+ if (isLogin == true) {
	95	+ next();
	96	+ } else {
	97	+ next("/login.page");
	98	+ }
	99	+ } else {
	100	+ if (isLogin == true) {
	101	+ if (to.path == "/login.page") {
	102	+ next(from.path);
	103	+ } else {
	104	+ next();
	105	+ }
	106	+ } else {
	107	+ if (to.path == "/login.page") {
	108	+ next();
	109	+ } else {
	110	+ next("/login.page");
	111	+ }
	112	+ }
	113	+ } */
	114	+ });
	115	+ });
	116	+ },
32	117	};
33	118
34	119	export default App;

...	...	@@ -8,15 +8,17 @@
8	8	<div class="form-wrap">
9	9	<form action="">
10	10	<div class="flex-center m-b">
11		- <input type="text" name="" id="" placeholder="ID">
	11	+ <label for="id">아이디</label>
	12	+ <input type="text" name="" id="" ref="user_id" placeholder="ID" v-model="userLogin.user_id" @keyup.enter="login">
12	13	</div>
13	14	<div class="flex-center m-b">
14		- <input type="password" name="" id="" placeholder="Password">
	15	+ <label for="password">비밀번호</label>
	16	+ <input type="password" name="" id="" ref="user_pw" placeholder="Password" v-model="userLogin.user_pw" @keyup.enter="login">
15	17	</div>
16	18
17	19
18	20	<div class="btn-wrap">
19		- <button type="button" class="green-btn btn-l loginbtn" @click="modal_1 = true">로그인</button>
	21	+ <button type="button" class="green-btn btn-l loginbtn" @click="login">로그인</button>
20	22	<router-link to="/IdFind.page"> <span class="">아이디 찾기</span></router-link>
21	23	</div>
22	24	</form>
...	...	@@ -28,13 +30,68 @@
28	30	</template>
29	31
30	32	<script>
	33	+import axios from 'axios';
	34	+import crypto from "crypto-js";
	35	+import { useStore } from 'vuex';
31	36	export default {
32	37	data() {
33	38	return {
34		- modal_1: false,
	39	+ userLogin: {
	40	+ user_id: null,
	41	+ user_pw: null
	42	+ },
	43	+ store: useStore(),
35	44	};
36	45	},
37		- methods: {},
	46	+ methods: {
	47	+ //로그인
	48	+ login: function () {
	49	+ let vm = this;
	50	+ //Encrypt
	51	+ // var iv = this.store.state.key.iv;
	52	+ // var salt = this.store.state.key.salt;
	53	+ // var passPhrase = this.store.state.key.ENC_KEY;
	54	+ var iv = 'e9d3712c4d5c35093d340733b8c26b92';
	55	+ var salt = 'deafa8b6802cebcc0bcceaaa5f3461a9';
	56	+ var passPhrase = 'e534cf179007db7e6360ebf95fa5d51c';
	57	+ var keySize = 128;
	58	+ var iterationCount = 1000;
	59	+ var key128Bits100Iterations = crypto.PBKDF2(passPhrase,
	60	+ crypto.enc.Hex.parse(salt),
	61	+ { keySize: keySize / 32, iterations: iterationCount }
	62	+ );
	63	+
	64	+ //var encrypted = CryptoJS.AES.encrypt(
	65	+ // this.userLogin.user_pw = crypto.AES.encrypt(this.userLogin.user_pw, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
	66	+ axios({
	67	+ url: '/user/login.json',
	68	+ method: 'post',
	69	+ headers: {
	70	+ 'Content-Type': 'application/json; charset=UTF-8'
	71	+ },
	72	+ data: vm.userLogin
	73	+ }).then(function (response) {
	74	+ // console.log("login - response : ", response);
	75	+ if (response.data == true) {
	76	+ vm.$router.push({ path: '/', query: {} });
	77	+ } else {
	78	+ alert('로그인 정보를 다시 확인해주세요.');
	79	+ vm.$refs['user_id'].focus();
	80	+ }
	81	+ }).catch(function (error) {
	82	+ console.log("login - error : ", error);
	83	+ });
	84	+ },
	85	+ // // 암호화 메서드
	86	+ // cipher : (password, key) => {
	87	+ // const encrypt = crypto.createCipher(AES, key) // des알고리즘과 키를 설정
	88	+ // const encryptResult = encrypt.update(password, 'utf8', 'base64') // 암호화
	89	+ // + encrypt.final('base64') // 인코딩
	90	+
	91	+ // console.log(encryptResult)
	92	+ // return encryptResult
	93	+ // }
	94	+ },
38	95	watch: {},
39	96	computed: {},
40	97	mounted() {

...	...	@@ -6,6 +6,7 @@
6	6	"@vue-leaflet/vue-leaflet": "github:vue-leaflet/vue-leaflet",
7	7	"axios": "^1.3.4",
8	8	"babel-loader": "8.2.5",
	9	+ "crypto-js": "^4.1.1",
9	10	"css-loader": "6.7.1",
10	11	"express": "4.18.1",
11	12	"express-http-proxy": "^1.6.3",

Delete comment