React - SpringBoot 연결하기 (회원가입+todo리스트 만들기) 4

로그인 + 로그아웃 기능 추가하기

 

로그인

 

todo-mapper.xml 파일 구문 추가

<select id="login">
    SELECT * FROM TODO_MEMBER WHERE ID = #{id} AND PW = #{pw}
</select>

 

TodoService 구문 추가

//방법 1
//TodoMember login(String id, String pw);

//방법 2
Map<String, Object> login(TodoMember todoMember);

//두 가지 중 하나 추가

 

TodoServiceImpl 구문 추가

/*
방법 1
@Override
public TodoMember login(String id, String pw) {
    return todoMapper.login(id, pw);
}
*/

//방법 2
@Override
public Map<String, Object> login(TodoMember todoMember) {
    TodoMember loginMember = todoMapper.login(todoMember);

    Map<String, Object> map = new HashMap<>();
    map.put("loginMember", loginMember);

    return map;
}

//둘 중 하나 구문 추가

 

TodoMapper 구문 추가

//방법 1
//TodoMember login(@Param("id") String id, @Param("pw") String pw);

//방법 2
TodoMember login(TodoMember todoMember); //해도 됨

//둘 중 하나 추가

 

TodoController 구문 추가

/*
방법 1
@PostMapping(value="/login")
public TodoMember login(@RequestBody Map<String, String> login) {
    String id = login.get("id");
    String pw = login.get("pw");
    return todoService.login(id, pw);
}
*/

//방법 2
@PostMapping("/login")
public Map<String, Object> login(@RequestBody TodoMember todoMember){
    return todoService.login(todoMember);
}

 

TodoList.js

import React from "react";

function TodoList(){
    return (
        <div>
            <h1>할 일 목록 보기</h1>
        </div>
    )
}
export default TodoList;

 

Login.js에 다음 구문 추가

const logout = () => {
    setLoginMember(null);
}

{loginMember && (
    <button onClick={logout}>로그아웃</button>
)}

 

 

App.js에 다음 구문 추가

  <h1>Todo List</h1>
  {/* 로그인을 해야 TodoList 보이도록 */}
  <Login/>
  <hr/>
  {/* 로그인이 됐을 때 로그인 한 회원의 todoList 출력 */}
  {loginMember !== null && (<TodoList/>)}

 

비 로그인 시 화면

로그인 성공 시 화면

로그아웃 시 화면