이 기세를 몰아 로그인 기능도 완성하자!
1) input이 비워져있을 경우 입력하라고 뜸
2) 아이디나 비밀번호가 틀리면 틀리다고 뜸
3) 로그인이 될 경우
ㄴ 원래 페이지로 돌아가고 "로그인"이 "로그아웃"으로 바뀐다, 세션을 반환한다
4) 로그아웃을 할 경우
ㄴ 원래 페이지로 돌아가고 "로그아웃"이 "로그인"으로 바뀐다, 세션을 지운다
로그인을 할 때 실행되는 함수
$(document).ready(function () {
$('#loginBtn').click(function () {
let id = document.getElementById('id').value;
let pwd = document.getElementById('pwd').value;
if(id == "") {
alert("아이디를 입력해주세요");
document.getElementById("id").focus();
return false;
}
if(pwd == "") {
alert("비밀번호를 입력해주세요");
document.getElementById("pwd").focus();
return false;
}
$.ajax({
type: 'POST', //요청한 메서드
url: '/login', //요청하는 url
contentType : "application/json", //내 데이터는 JSON으로 보내는 거야
data: JSON.stringify({id:id, pwd:pwd}), //JSON으로 직렬화(문자열화) 해준다
dataType: 'text', //받을 땐 text로 받을 거야->자매품 json
success: function (result) {
if(result=="LOGIN OK") {
location.href="/";
} else {
alert(result);
}
},
error: function () { //응답 실패하면 호출될 내용
alert("로그인 실패");
}
});
})
})
Controller
@ResponseBody
@PostMapping("/login")
public String login(@RequestBody MemberDto dto, HttpServletRequest request) {
// dto 잘 들어왔는지 확인
System.out.println("dto = " + dto);
// dto 널체크
if(dto!=null) {
try{
MemberDto memberDto = service.login(dto);
// memberDto 널체크
if(memberDto!=null) {
String id1 = dto.getId();
String id2 = memberDto.getId();
String pwd1 = dto.getPwd();
String pwd2 = memberDto.getPwd();
// 두 객체의 id, pwd 값이 같다면 로그인 성공
if(id1.equals(id2) && pwd1.equals(pwd2)) {
HttpSession session = request.getSession();
session.setAttribute("id", id1);
return "LOGIN OK";
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
return "ID OR PWD CHECK PLZ";
}
로그아웃을 했을 때 실행되는 Controller
@GetMapping("/logout")
public String logout(HttpSession session) {
// 세션 종료
session.invalidate();
return "redirect:/";
}
index 페이지(홈페이지)
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page session="false" %>
<!-- getSession(false) == session이 있으면 그걸 반환하고, 없으면 새로 생성 안하고 null반환 -->
<!-- getSession(),(true) == session이 있으면 그걸 반환하고, 없으면 새로 생성해서 반환 -->
<c:set var="loginId" value="${request.getSession(false)==null ? '' : request.session.getAttribute('id')}"/>
<c:set var="loginLink" value="${loginId=='' ? '/login' : '/logout'}"/>
<c:set var="loginOut" value="${loginId=='' ? '로그인' : '로그아웃'}"/>
<html>
<head>
<title>Hi</title>
</head>
<body>
<h1>
Hello world!
</h1>
<div>
<h3><a href="<c:url value="${loginLink}"/>">${loginOut}</a></h3>
<h3><a href="<c:url value="/signUp"/>">회원가입</a></h3>
<h3><a href="">게시판</a></h3>
</div>
</body>
</html>
<c:set> 태그로 session에서 id 값을 가져와서
세션이 null이면 loginId 값도 없게하고 세션이 있으면 세션에 넣은 id값을 가져온다
그래서 loginLink는 loginId가 없으면 /login 페이지로, 있으면 /logout 페이지로 연결되게 하고
loginOut은 loginId가 없으면 로그인, 있으면 로그아웃 글자로 표시되게 하는 것이다!!
결과
DB에 해당 값이 없으면 요 화면이 뜨고
로그인을 하면 이 화면이 뜬다
로그아웃을 누르면 이 화면이 뜬다!!
야호^0^/
이렇게 술술 풀려도 되는건가? 싶게
하루만에 아이디 중복확인부터 로그인까지 구현...!!
회원가입보다 로그인이 훨씬 쉬웠다...
이제 센빠이가 주문한 비밀번호 암호화를 구현하러 출발^0^...!!
728x90
'혼자서 개발새발' 카테고리의 다른 글
| Spring) 게시판 만들기 첫 단추 - DB Table, DTO, DAO, Mapper 만들기 (0) | 2022.11.18 |
|---|---|
| Spring) 회원가입 비밀번호 암호화를 도전해보자! (0) | 2022.11.16 |
| Spring) 아이디 중복 확인 기능을 구현해보자! (0) | 2022.11.16 |
| Spring) 3편:ajax와 button으로 회원 가입 기능을 완성하다!! (0) | 2022.11.15 |
| Spring) 1편 : ajax로 DTO 받아서 회원가입 만들고 싶었던 사람... (0) | 2022.11.11 |
