블로그에서 스프링 시큐리티를 붙여나가는 과정을 보기 위해 시큐리티 관련된 내용을 모두 제외한 프로젝트 - 프론트도 sessionStorage에 id 담아두도록 변경 ㅋ

Author: nahwasa

src/main/webapp/WEB-INF/views/dashboard.jsp

@@ -16,13 +16,11 @@
     <h3 class="form-signin-heading text-center mb-5">nahwasa.com</h3>
 
     <h3 class="overview-normalize">접속 아이디</h3>
-    <p>
-        ${loginId}
+    <p id='login_id'>
     </p>
     <hr/>
     <h3 class="overview-normalize">역할</h3>
-    <p>
-        ${loginRoles}
+    <p id='pw'>
     </p>
     <hr/>
     <h3 class="overview-normalize">역할에 따른 페이지 이동 권한 확인</h3>
@@ -32,8 +30,18 @@
     </p>
     <hr/>
     <form method="post" action="/logout">
-        <button class="btn btn-sm btn-danger btn-block" type="submit">로그아웃</button>
+        <button class="btn btn-sm btn-danger btn-block" type="submit" id="logout_btn">로그아웃</button>
     </form>
+
+    <script>
+        const loginId = document.getElementById('login_id');
+        loginId.innerHTML = sessionStorage.getItem('userid');
+
+        const logoutBtn = document.getElementById('logout_btn');
+        logoutBtn.addEventListener('click', () => {
+            sessionStorage.setItem('userid', '');
+        });
+    </script>
 </div>
 </body>
 </html>

src/main/webapp/WEB-INF/views/login.jsp

@@ -27,12 +27,20 @@
             <label for="password" class="sr-only">비밀번호</label>
             <input type="password" id="password" name="pw" class="form-control" placeholder="비밀번호" required="">
         </p>
-        <button class="btn btn-lg btn-primary btn-block" type="submit">로그인</button>
+        <button class="btn btn-lg btn-primary btn-block" type="submit" id="login_btn">로그인</button>
     </form>
 
     <form class="form-signin" method="get" action="/view/join">
         <button class="btn btn-lg btn-warning btn-block" type="submit">회원가입하기</button>
     </form>
+
+    <script>
+        const loginBtn = document.getElementById('login_btn');
+
+        loginBtn.addEventListener('click', () => {
+            sessionStorage.setItem('userid', document.getElementById('username').value);
+        });
+    </script>
 </div>
 </body>
 </html>