Commit @3e28fa4596109c6964320ff1bc69ae498885de8d

hmkim 03-31

250331 김혜민 세션로그인방식 수정

@3e28fa4596109c6964320ff1bc69ae498885de8d

88a161e

3e28fa4

client/views/index.js

--- client/views/index.js

+++ client/views/index.js


 import '../resources/scss/main.scss';
 
 async function initVueApp() {
+  const savedLoginMode = localStorage.getItem("loginMode");
+  if (savedLoginMode) {
+    store.commit("setLoginMode", savedLoginMode);
+  }
+
   const router = await createAppRouter()
   const vue = createApp(App)
     .use(router)

88a161e

3e28fa4

client/views/layout/UserMenu.vue

--- client/views/layout/UserMenu.vue

+++ client/views/layout/UserMenu.vue


           roles: this.roles,
           menuType: 'portal',
         };
-        console.log('params', params);
         const res = await findBySysMenu(params);
         if (res.status == 200) {
           this.menuList = res.data.data.menuList;
           // 전체 메뉴 트리 store에 저장
           this.$store.commit('setMenuList', this.menuList);
-          console.log('this.menuList', this.menuList);
           this.fnMenuActive(this.$route.path);
         }
       } catch (error) {

88a161e

3e28fa4

client/views/pages/App.vue

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

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


       path: "",
     };
   },
-  created() {},
+  created() { 
+    const loginMode = localStorage.getItem("loginMode");
+  if (loginMode) {
+    this.$store.commit("setLoginMode", loginMode);
+  }},
   methods: {},
   watch: {
     $route(to, from) {

88a161e

3e28fa4

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


       next({ name: 'notfound' });
       return;
     }
-    // 접근 제어 확인(미확인 시 이전 페이지로 이동)
-    const accesCheck = await accessUrl(to.path);
+
+    // 로그인 모드 확인 (JWT 또는 SESSION)
+    const loginMode = store.state.loginMode || 'J'; // 기본값으로 JWT 설정
+    console.log('loginMode', loginMode)
+    // 로그인 상태 확인 (JWT 또는 SESSION)
+    const isLogin = loginMode === 'J' ? store.state.authorization : store.state.mbrId;
+    if (!isLogin && to.path !== '/login.page') {
+      next({ path: "/login.page" });
+      return;
+    }
+
+    // 접근 제어 확인
+    let accesCheck = false;
+    if (loginMode === 'J') {
+      // JWT 방식 접근 제어
+      accesCheck = await accessUrl(to.path);
+    } else if (loginMode === 'S') {
+      // 세션 방식 접근 제어 (세션이 유효한지 확인)
+      accesCheck = store.state.mbrId != null;
+    }
     console.log('accesCheck', accesCheck);
     const roleCheck = isValidRole();
     if (!accesCheck || !roleCheck) {

       next();
       return;
     }
-    const isLogin = store.state.authorization; // 토큰 정보 호출(로그인 유무 확인)
     const mbrAuth = store.state.roles.map(auth => auth.authority); // 사용자 권한 정보
     const pageAuth = mergeAuth(mbrAuth, to.meta);
     sessionStorage.setItem("redirect", to.fullPath);
+    
     // 메인 페이지 or 로그인 페이지
     if (to.path === '/' || to.path.includes('/login.page') || to.path.startsWith('/cmmn/') || to.path.includes('/searchId.page') || to.path.includes('/resetPswd.page')) {
       let path = to.path;

             return false;
           }
         });
-      });
+      }); 
       // 권한이 있고 접근 가능한 경우
       if (hasAcc) {
         if (to.path.includes('.page')) {

88a161e

3e28fa4

client/views/pages/AppStore.js

--- client/views/pages/AppStore.js

+++ client/views/pages/AppStore.js


         const res = await logOutProc();
         alert(res.data.message);
         if (res.status == 200) {
+           // 1. 상태 초기화
           commit("setStoreReset");
+          // 2. 로컬스토리지와 세션스토리지 초기화
+          localStorage.clear();
+          sessionStorage.clear();
+
+          // 3. 쿠키 삭제
+          document.cookie = "refresh=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+          document.cookie = "Authorization=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+          // 4. 로그인 페이지로 이동
+          window.location = "/login.page";
         }
       } catch(error) {
         const errorData = error.response.data;

88a161e

3e28fa4

client/views/pages/adm/system/LoginPolicy/LoginPolicy.vue

--- client/views/pages/adm/system/LoginPolicy/LoginPolicy.vue

+++ client/views/pages/adm/system/LoginPolicy/LoginPolicy.vue


               <div class="gd-12 pl0">
                   <label class="form-title">중복로그인 설정</label>
                   <div class="form-group">
-                    <div>
-                      <input type="checkbox" v-model="allowMultipleLogin" @change="saveByLoginPolicy" />
-                      <p>{{ allowMultipleLogin ? '중복 로그인을 허용하고 있습니다.' : '중복 로그인을 허용하지 않습니다.' }}</p>
-                    </div>
+                    <div class="check-area">
+                          <div class="form-check">
+                            <input type="radio" class="mr5" :value="true" v-model="allowMultipleLogin" @change="saveByLoginPolicy" /> 
+                            <label>허용</label>
+                          </div>
+                          <div class="form-check">
+                            <input type="radio" class="mr5" :value="false" v-model="allowMultipleLogin" @change="saveByLoginPolicy" /> 
+                            <label>비허용</label>
+                          </div>
+                      </div>
+                <!--    <p>{{ allowMultipleLogin ? '중복 로그인을 허용하고 있습니다.' : '중복 로그인을 허용하지 않습니다.' }}</p>-->  
                     <span style="color: red;"> ※ 로그인 방식을 변경하면 전체 사용자가 로그아웃됩니다.</span>
                   </div>
               </div>
-              <div>
-                    <label class="form-title">중복로그인 설정</label>
-                    <div class="form-group">
-                      <div>
-                        <input type="checkbox" v-model="allowMultipleLogin" @change="saveByLoginPolicy" />
-                        <p>{{ allowMultipleLogin ? '중복 로그인을 허용하고 있습니다.' : '중복 로그인을 허용하지 않습니다.' }}</p>
-                      </div>
-                      <span style="color: red;"> ※ 로그인 방식을 변경하면 전체 사용자가 로그아웃됩니다.</span>
-                    </div>
-                </div>
-                <div>
-                    <label class="form-title">중복로그인 설정</label>
-                    <div class="form-group">
-                      <div>
-                        <input type="checkbox" v-model="allowMultipleLogin" @change="saveByLoginPolicy" />
-                        <p>{{ allowMultipleLogin ? '중복 로그인을 허용하고 있습니다.' : '중복 로그인을 허용하지 않습니다.' }}</p>
-                      </div>
-                      <span style="color: red;"> ※ 로그인 방식을 변경하면 전체 사용자가 로그아웃됩니다.</span>
-                    </div>
-                </div>
                 <div> 
                     <label class="form-title">로그인 방식 설정</label>
                       <div class="form-group">

     },
     computed: {
       loginModeLabel() {
-        return this.loginMode === 'J' ? 'JWT' : 'SESSION';
+        return this.lgnMode === 'J' ? 'JWT' : 'SESSION';
       }
     },
     methods: {
-      async findAll() {
-        try {
-          const res1 = await findAllByLoginPolicy();
-          this.allowMultipleLogin = res1.data.data;
+        async findAll() {
+          try {
+            const res1 = await findAllByLoginPolicy();
+            this.allowMultipleLogin = res1.data.data;
 
-          const res2 = await findAllByLoginMode();
-          this.lgnMode = res2.data.data;
-          
-        } catch (err) {
-          alert('설정 정보를 불러오는 데 실패했습니다.');
-        }
+            const res2 = await findAllByLoginMode();
+            this.lgnMode = res2.data.data;
+            
+          } catch (err) {
+            alert('설정 정보를 불러오는 데 실패했습니다.');
+          }
+        },
+        saveByLoginPolicy() {
+          try {
+            console.log("this.allowMultipleLogin", this.allowMultipleLogin);
+            const loginPolicy = {};
+            loginPolicy.allowMultipleLogin = this.allowMultipleLogin ? "Y" : "N";
+      //      await saveByLoginPolicy(loginPolicy);
+            alert('중복 로그인 설정이 저장되었습니다.');
+          } catch (err) {
+            alert('중복 로그인 설정 저장 실패');
+          }
       },
-      async saveByLoginPolicy() {
-      try {
-        const loginPolicy = {};
-        loginPolicy.allowMultipleLogin = this.allowMultipleLogin ? "Y" : "N";
-  //      await saveByLoginPolicy(loginPolicy);
-        alert('중복 로그인 설정이 저장되었습니다.');
-      } catch (err) {
-        alert('중복 로그인 설정 저장 실패');
-      }
-    },
-    async saveByLoginMode() {
-      const confirmed = confirm(
-        '로그인 방식을 변경하면 전체 사용자가 로그아웃됩니다.\n계속하시겠습니까?'
-      );
-      if (!confirmed) return;
+      saveByLoginMode() {
+        const confirmed = confirm(
+          '로그인 방식을 변경하면 전체 사용자가 로그아웃됩니다.\n계속하시겠습니까?'
+        );
+        if (!confirmed) return;
 
-      try {
-        const loginMode = {};
-        loginMode.lgnMode = this.lgnMode;
- //       await saveByLoginMode(loginMode);
-        alert('로그인 방식이 변경되었습니다.\n다시 로그인해주세요.');
-        store.commit("setStoreReset");
-        window.location = '/login.page';
-        return Promise.reject(refreshError);
-      } catch (err) {
-        alert('로그인 방식 저장 실패', err);
+        try {
+          const loginMode = {};
+          loginMode.lgnMode = this.lgnMode;
+  //       await saveByLoginMode(loginMode);
+          alert('로그인 방식이 변경되었습니다.\n다시 로그인해주세요.');
+          store.commit("setStoreReset");
+          window.location = '/login.page';
+          return Promise.reject(refreshError);
+        } catch (err) {
+          alert('로그인 방식 저장 실패', err);
+        }
       }
-    }
     }
   }
   </script>

88a161e

3e28fa4

client/views/pages/login/Login.vue

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

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


           if (loginType === 'J') {
               // JWT 방식
               store.commit("setAuthorization", res.headers.authorization);
+              store.commit("setLoginMode", "J");
               const base64String = store.state.authorization.split(".")[1];
               const base64 = base64String.replace(/-/g, "+").replace(/_/g, "/");
               const jsonPayload = decodeURIComponent(

               store.commit("setRoles", mbr.roles);
           } else if (loginType === 'S') {
               // 세션 방식 (서버에서 따로 body에 사용자 정보 내려줘야 함)
+              store.commit("setLoginMode", "S");
               const mbr = res.data;
               store.commit("setAuthorization", null);
               store.commit("setMbrId", mbr.mbrId);

           } else {
             this.$router.push({ path: "/" });
           }
+
+          
         }
       } catch (error) {
         alert(error.response.data.message);

Add a comment

Open 0
Closed 0

List

...	...	@@ -20,6 +20,11 @@
20	20	import '../resources/scss/main.scss';
21	21
22	22	async function initVueApp() {
	23	+ const savedLoginMode = localStorage.getItem("loginMode");
	24	+ if (savedLoginMode) {
	25	+ store.commit("setLoginMode", savedLoginMode);
	26	+ }
	27	+
23	28	const router = await createAppRouter()
24	29	const vue = createApp(App)
25	30	.use(router)

...	...	@@ -148,13 +148,11 @@
148	148	roles: this.roles,
149	149	menuType: 'portal',
150	150	};
151		- console.log('params', params);
152	151	const res = await findBySysMenu(params);
153	152	if (res.status == 200) {
154	153	this.menuList = res.data.data.menuList;
155	154	// 전체 메뉴 트리 store에 저장
156	155	this.$store.commit('setMenuList', this.menuList);
157		- console.log('this.menuList', this.menuList);
158	156	this.fnMenuActive(this.$route.path);
159	157	}
160	158	} catch (error) {

...	...	@@ -126,8 +126,26 @@
126	126	next({ name: 'notfound' });
127	127	return;
128	128	}
129		- // 접근 제어 확인(미확인 시 이전 페이지로 이동)
130		- const accesCheck = await accessUrl(to.path);
	129	+
	130	+ // 로그인 모드 확인 (JWT 또는 SESSION)
	131	+ const loginMode = store.state.loginMode \|\| 'J'; // 기본값으로 JWT 설정
	132	+ console.log('loginMode', loginMode)
	133	+ // 로그인 상태 확인 (JWT 또는 SESSION)
	134	+ const isLogin = loginMode === 'J' ? store.state.authorization : store.state.mbrId;
	135	+ if (!isLogin && to.path !== '/login.page') {
	136	+ next({ path: "/login.page" });
	137	+ return;
	138	+ }
	139	+
	140	+ // 접근 제어 확인
	141	+ let accesCheck = false;
	142	+ if (loginMode === 'J') {
	143	+ // JWT 방식 접근 제어
	144	+ accesCheck = await accessUrl(to.path);
	145	+ } else if (loginMode === 'S') {
	146	+ // 세션 방식 접근 제어 (세션이 유효한지 확인)
	147	+ accesCheck = store.state.mbrId != null;
	148	+ }
131	149	console.log('accesCheck', accesCheck);
132	150	const roleCheck = isValidRole();
133	151	if (!accesCheck \|\| !roleCheck) {
...	...	@@ -146,10 +164,10 @@
146	164	next();
147	165	return;
148	166	}
149		- const isLogin = store.state.authorization; // 토큰 정보 호출(로그인 유무 확인)
150	167	const mbrAuth = store.state.roles.map(auth => auth.authority); // 사용자 권한 정보
151	168	const pageAuth = mergeAuth(mbrAuth, to.meta);
152	169	sessionStorage.setItem("redirect", to.fullPath);
	170	+
153	171	// 메인 페이지 or 로그인 페이지
154	172	if (to.path === '/' \|\| to.path.includes('/login.page') \|\| to.path.startsWith('/cmmn/') \|\| to.path.includes('/searchId.page') \|\| to.path.includes('/resetPswd.page')) {
155	173	let path = to.path;
...	...	@@ -185,7 +203,7 @@
185	203	return false;
186	204	}
187	205	});
188		- });
	206	+ });
189	207	// 권한이 있고 접근 가능한 경우
190	208	if (hasAcc) {
191	209	if (to.path.includes('.page')) {

...	...	@@ -66,7 +66,17 @@
66	66	const res = await logOutProc();
67	67	alert(res.data.message);
68	68	if (res.status == 200) {
	69	+ // 1. 상태 초기화
69	70	commit("setStoreReset");
	71	+ // 2. 로컬스토리지와 세션스토리지 초기화
	72	+ localStorage.clear();
	73	+ sessionStorage.clear();
	74	+
	75	+ // 3. 쿠키 삭제
	76	+ document.cookie = "refresh=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
	77	+ document.cookie = "Authorization=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
	78	+ // 4. 로그인 페이지로 이동
	79	+ window.location = "/login.page";
70	80	}
71	81	} catch(error) {
72	82	const errorData = error.response.data;

...	...	@@ -107,6 +107,7 @@
107	107	if (loginType === 'J') {
108	108	// JWT 방식
109	109	store.commit("setAuthorization", res.headers.authorization);
	110	+ store.commit("setLoginMode", "J");
110	111	const base64String = store.state.authorization.split(".")[1];
111	112	const base64 = base64String.replace(/-/g, "+").replace(/_/g, "/");
112	113	const jsonPayload = decodeURIComponent(
...	...	@@ -120,6 +121,7 @@
120	121	store.commit("setRoles", mbr.roles);
121	122	} else if (loginType === 'S') {
122	123	// 세션 방식 (서버에서 따로 body에 사용자 정보 내려줘야 함)
	124	+ store.commit("setLoginMode", "S");
123	125	const mbr = res.data;
124	126	store.commit("setAuthorization", null);
125	127	store.commit("setMbrId", mbr.mbrId);
...	...	@@ -139,6 +141,8 @@
139	141	} else {
140	142	this.$router.push({ path: "/" });
141	143	}
	144	+
	145	+
142	146	}
143	147	} catch (error) {
144	148	alert(error.response.data.message);

...	...	@@ -30,7 +30,11 @@
30	30	path: "",
31	31	};
32	32	},
33		- created() {},
	33	+ created() {
	34	+ const loginMode = localStorage.getItem("loginMode");
	35	+ if (loginMode) {
	36	+ this.$store.commit("setLoginMode", loginMode);
	37	+ }},
34	38	methods: {},
35	39	watch: {
36	40	$route(to, from) {

...	...	@@ -16,33 +16,20 @@
16	16	<div class="gd-12 pl0">
17	17	<label class="form-title">중복로그인 설정</label>
18	18	<div class="form-group">
19		- <div>
20		- <input type="checkbox" v-model="allowMultipleLogin" @change="saveByLoginPolicy" />
21		- <p>{{ allowMultipleLogin ? '중복 로그인을 허용하고 있습니다.' : '중복 로그인을 허용하지 않습니다.' }}</p>
22		- </div>
	19	+ <div class="check-area">
	20	+ <div class="form-check">
	21	+ <input type="radio" class="mr5" :value="true" v-model="allowMultipleLogin" @change="saveByLoginPolicy" />
	22	+ <label>허용</label>
	23	+ </div>
	24	+ <div class="form-check">
	25	+ <input type="radio" class="mr5" :value="false" v-model="allowMultipleLogin" @change="saveByLoginPolicy" />
	26	+ <label>비허용</label>
	27	+ </div>
	28	+ </div>
	29	+ <!-- <p>{{ allowMultipleLogin ? '중복 로그인을 허용하고 있습니다.' : '중복 로그인을 허용하지 않습니다.' }}</p>-->
23	30	<span style="color: red;"> ※ 로그인 방식을 변경하면 전체 사용자가 로그아웃됩니다.</span>
24	31	</div>
25	32	</div>
26		- <div>
27		- <label class="form-title">중복로그인 설정</label>
28		- <div class="form-group">
29		- <div>
30		- <input type="checkbox" v-model="allowMultipleLogin" @change="saveByLoginPolicy" />
31		- <p>{{ allowMultipleLogin ? '중복 로그인을 허용하고 있습니다.' : '중복 로그인을 허용하지 않습니다.' }}</p>
32		- </div>
33		- <span style="color: red;"> ※ 로그인 방식을 변경하면 전체 사용자가 로그아웃됩니다.</span>
34		- </div>
35		- </div>
36		- <div>
37		- <label class="form-title">중복로그인 설정</label>
38		- <div class="form-group">
39		- <div>
40		- <input type="checkbox" v-model="allowMultipleLogin" @change="saveByLoginPolicy" />
41		- <p>{{ allowMultipleLogin ? '중복 로그인을 허용하고 있습니다.' : '중복 로그인을 허용하지 않습니다.' }}</p>
42		- </div>
43		- <span style="color: red;"> ※ 로그인 방식을 변경하면 전체 사용자가 로그아웃됩니다.</span>
44		- </div>
45		- </div>
46	33	<div>
47	34	<label class="form-title">로그인 방식 설정</label>
48	35	<div class="form-group">
...	...	@@ -85,50 +72,51 @@
85	72	},
86	73	computed: {
87	74	loginModeLabel() {
88		- return this.loginMode === 'J' ? 'JWT' : 'SESSION';
	75	+ return this.lgnMode === 'J' ? 'JWT' : 'SESSION';
89	76	}
90	77	},
91	78	methods: {
92		- async findAll() {
93		- try {
94		- const res1 = await findAllByLoginPolicy();
95		- this.allowMultipleLogin = res1.data.data;
	79	+ async findAll() {
	80	+ try {
	81	+ const res1 = await findAllByLoginPolicy();
	82	+ this.allowMultipleLogin = res1.data.data;
96	83
97		- const res2 = await findAllByLoginMode();
98		- this.lgnMode = res2.data.data;
99		-
100		- } catch (err) {
101		- alert('설정 정보를 불러오는 데 실패했습니다.');
102		- }
	84	+ const res2 = await findAllByLoginMode();
	85	+ this.lgnMode = res2.data.data;
	86	+
	87	+ } catch (err) {
	88	+ alert('설정 정보를 불러오는 데 실패했습니다.');
	89	+ }
	90	+ },
	91	+ saveByLoginPolicy() {
	92	+ try {
	93	+ console.log("this.allowMultipleLogin", this.allowMultipleLogin);
	94	+ const loginPolicy = {};
	95	+ loginPolicy.allowMultipleLogin = this.allowMultipleLogin ? "Y" : "N";
	96	+ // await saveByLoginPolicy(loginPolicy);
	97	+ alert('중복 로그인 설정이 저장되었습니다.');
	98	+ } catch (err) {
	99	+ alert('중복 로그인 설정 저장 실패');
	100	+ }
103	101	},
104		- async saveByLoginPolicy() {
105		- try {
106		- const loginPolicy = {};
107		- loginPolicy.allowMultipleLogin = this.allowMultipleLogin ? "Y" : "N";
108		- // await saveByLoginPolicy(loginPolicy);
109		- alert('중복 로그인 설정이 저장되었습니다.');
110		- } catch (err) {
111		- alert('중복 로그인 설정 저장 실패');
112		- }
113		- },
114		- async saveByLoginMode() {
115		- const confirmed = confirm(
116		- '로그인 방식을 변경하면 전체 사용자가 로그아웃됩니다.\n계속하시겠습니까?'
117		- );
118		- if (!confirmed) return;
	102	+ saveByLoginMode() {
	103	+ const confirmed = confirm(
	104	+ '로그인 방식을 변경하면 전체 사용자가 로그아웃됩니다.\n계속하시겠습니까?'
	105	+ );
	106	+ if (!confirmed) return;
119	107
120		- try {
121		- const loginMode = {};
122		- loginMode.lgnMode = this.lgnMode;
123		- // await saveByLoginMode(loginMode);
124		- alert('로그인 방식이 변경되었습니다.\n다시 로그인해주세요.');
125		- store.commit("setStoreReset");
126		- window.location = '/login.page';
127		- return Promise.reject(refreshError);
128		- } catch (err) {
129		- alert('로그인 방식 저장 실패', err);
	108	+ try {
	109	+ const loginMode = {};
	110	+ loginMode.lgnMode = this.lgnMode;
	111	+ // await saveByLoginMode(loginMode);
	112	+ alert('로그인 방식이 변경되었습니다.\n다시 로그인해주세요.');
	113	+ store.commit("setStoreReset");
	114	+ window.location = '/login.page';
	115	+ return Promise.reject(refreshError);
	116	+ } catch (err) {
	117	+ alert('로그인 방식 저장 실패', err);
	118	+ }
130	119	}
131		- }
132	120	}
133	121	}
134	122	</script> (파일 끝에 줄바꿈 문자 없음)

Delete comment