본문 바로가기

Web

로그인 / 로그아웃

# 로그인을 한 후 , 로그인 된 상태로 강제로 로그인 페이지 접속 시 막기

- 로그인 된 상태로 강제로 로그인 페이지 접속 시 개발자가 원하는 페이지로 이동시키기

1. session을 이용해 로그인 한 id 값을 가져와서 id 값의 유무로 강제접속여부를 판단
2. 강제 접속일 때 원하는 페이지로 이동시키기
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
        <!-- 
        로그인을 최초로 할 경우 해당 페이지가 출력
        로그인을 한 상황에서 해당 페이지를 강제로 url 로 접속시
        자동으로 메인 페이지로 이동을 하는 상황을 재현

         -->
         <%
            HttpSession hs = request.getSession();
            String mid = (String)hs.getAttribute("mid");
            if(mid != null){
                out.print("<script>location.href='./login.jsp';</script>");
            }

         %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>로그인</title>
    </head>
    <!-- button에 type이 없을 경우 기본 submit이 작동됨. 
    단, 기본 button 태그는 전송방식은 get, SPA(single page application) 
    형태로 페이지가 이동됩니다. -->
    <body>
    <form id="frm_login" onsubmit="return logins()"> 
    아이디 : <input type = "text" name="mid"><br>
    패스워드 : <input type="password" name="mpass"><br>
    <input type="checkbox" name="autologin" value="Y">자동 로그인
    <button>로그인</button>
    </form>
    </body>
    <script>
    function logins() {
        if(frm_login.autologin.checked==true){
            if(confirm("PC방 및 공공장소에서는 자동 로그인을 권장하지 않습니다.")){
                frm_login.method="post";
                frm_login.action="./loginok.do";
                frm_login.submit();
            }else{
                return false;
            }	
        }else{
            frm_login.submit();
        }
    }
    //로그인 화면 접속시 storage를 자동으로 제일 먼저 확인함
    var id = localStorage.getItem("mid");
    var pass = localStorage.getItem("mpass");
    var ck = localStorage.getItem("autologin");
    //자동 로그인을 체크 후 다시 해당 웹 페이지 재접속
    if(id!=null && pass!=null && ck!=null){
        frm_login.mid.value=id;
        var sp = pass.split("/");
        if(sp[1]=="auto"){
            frm_login.mpass.value=sp[0];
            frm_login.autologin.checked=true; //자동 로그인 체크 유지
            frm_login.method="post";
            frm_login.action="./loginok.do";
            frm_login.submit();
        }
        console.log(sp);
    }
    </script>
    </html>

 

 

# 아이디 저장 체크박스 

※ 브라우저 특성상 로그인 시도 후 history.go(-1)로 페이지를 돌리게되면 체크박스의 체크 유무와 관계 없이 아이디 입력란에 시도했던 아이디가 남게 되므로 정확하게 특정 페이지로 이동시켜줘야함 

 1 .localStorage 에 아이디 저장 체크박스 의 체크 유무를 저장 후 그 유무에 따라서 아이디 저장되도록 함
 2 .자동로그인 체크박스,. 아이디 저장 체크박스 체크 유지

    <%@page import="java.util.ArrayList"%>
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%
        HttpSession hs_in = request.getSession();//가져와야함
        String id = (String)hs_in.getAttribute("id");
        String ck = (String)hs_in.getAttribute("auto");
    %>
    <form id="frm_top" method="post" action="./login.do" onsubmit="return login_btn();">
    <aside class="popup" id="popup" style="display:none;">

        <div class="login">
            <span class="close" onclick="pop_close();">X</span>
            <p>MEMBER-LOGIN</p>
            <ol>
            <li><input type="text" class="login_input" name="mid" value="" id="login_id" placeholder="아이디를 입력하세요"></li>
            <li><input type="password" class="login_input" name="mpw" id="login_pw" placeholder="패스워드를 입력하세요"></li>
            <li><label><input type="checkbox" class="login_check" name="login_auto" value="" id="login_auto" onclick="auto_check()"> 자동로그인</label></li>
            <li><input type="submit" value="로그인" class="login_btn"></li>
            <li class="login_info">
            <span onclick="page_location(1)">아이디 찾기</span>
            <span onclick="page_location(2)">회원가입</span>
            </li>
            </ol>
        </div>
        </form>
        <script>
    $(function(){
        var ck = localStorage.getItem("auto");
        var autoid = localStorage.getItem("auto_id");
        if(ck!=null){
            document.getElementById("login_id").value = autoid;
            frm_top.login_auto.checked=true;
        }
    })
    </script>​


 

 

# 메인페이지에서 자동로그인 해제 

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
        <%
            HttpSession hs = request.getSession();
            String mid =(String)hs.getAttribute("mid"); //object 때리면 처음부터 에러 안남
        %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>메인 페이지에서 자동 로그인 해제</title>
    </head>
    <body>
    <%=mid%> 님 환영합니다. 
    <a href="javascript:void storage()">[자동 로그인 해제]</a> 
    <a href="javascript:void logout()">[로그아웃]</a>
    </body>
    <script>
    function storage() {
        //localStorage.clear() : 전체 스토리지를 모두 삭제
        localStorage.removeItem("mid");	 //특정 스토리지값만 삭제
        localStorage.removeItem("mpass");
        localStorage.removeItem("autologin");
        alert("자동 로그인을 해제 하셨습니다.");
    }
    function logout() {
        location.href='./logout.jsp';
    }
    </script>
    </html>

 

 

# 로그아웃

=>  jsp로도, java로도 간단히 코드작성
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%
        HttpSession hs = request.getSession();
        //hs.invalidate(); 모든 세션을 초기화
        hs.removeAttribute("mid"); //특정 세션만 삭제

    %>
    <script> alert('정상적으로 로그아웃 되셨습니다.'); location.href='./login.jsp';</script>​