💻 코딩 일기 : [스프링 게시판 with React] '로그인 및 로그아웃 구현' 편

ybk·2024년 5월 23일

React Spring

spring

목록 보기

39/55

🔔 '로그인 및 로그아웃 구현'에 대해서 알아보자!

💟 로그인

MemberLogin.jsx(React)

export function MemberLogin() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const toast = useToast();
  const navigate = useNavigate();

  function handleLogin() {
    axios
      .post("/api/member/token", { email, password })
      .then((res) => {
        localStorage.setItem("token", res.data.token);
        toast({
          status: "success",
          description: "로그인 성공하였습니다.",
          position: "top-right",
          duration: 1000,
        });
        navigate("/");
      })
      .catch((err) => {
        localStorage.removeItem("token");
        toast({
          status: "error",
          description: "로그인 실패하였습니다.",
          position: "top-right",
          duration: 1000,
        });
      })
  }

  return (
    <Box>
      <Box>
        <FormControl>
          <FormLabel>이메일</FormLabel>
          <Input onChange={(e) => setEmail(e.target.value)} />
        </FormControl>
      </Box>
      <Box>
        <FormControl>
          <FormLabel>비밀번호</FormLabel>
          <Input type={"password"} onChange={(e) => setPassword(e.target.value)} />
        </FormControl>
      </Box>
      <Box>
        <Button onClick={handleLogin} colorScheme={"blue"}>
          로그인
        </Button>
      </Box>
    </Box>
  );
}

로그인 성공하면 localStorage에 토큰 저장 후 메인으로 이동하고 실패하면 localStorage에서 토큰을 삭제합니다.

MemberController.java

@PostMapping("token")
public ResponseEntity token(@RequestBody Member member) {
    Map<String, Object> map = service.getToken(member);


    if (map == null) {
        return ResponseEntity.status(HttpStatus.UNAUTHORIZED).build();
    }
    return ResponseEntity.ok(map);

}

클라이언트로부터 member 객체를 받아와서 service.getToken(member)를 호출하여 member 객체에 대한 토큰을 생성하거나 가져옵니다. 이 결과는 Map<> 형태로 map 변수에 저장합니다.

MemberService.java

public Map<String, Object> getToken(Member member) {

    Map<String, Object> result = null;

    Member db = mapper.selectByEmail(member.getEmail());

    if (db != null) {
        if (passwordEncoder.matches(member.getPassword(), db.getPassword())) {
            result = new HashMap<>();
            String token = "";

            // 토큰 만드는 코드
            JwtClaimsSet claims = JwtClaimsSet.builder()
                    .issuer("self")
                    .issuedAt(Instant.now())
                    .expiresAt(Instant.now().plusSeconds(60 * 60 * 24 * 7)) //일주일
                    .subject(db.getId().toString())
                    .claim("scope", "") //권한
                    .claim("nickName", db.getNickName())
                    .build();
            token = jwtEncoder.encode(JwtEncoderParameters.from(claims)).getTokenValue();
            result.put("token", token);
        }
    }
    return result;
}

public Map<String, Object> getToken(Member member) 메서드는 주어진 member 객체의 이메일과 비밀번호를 검증하여, 인증에 성공하면 JWT 토큰을 생성하고 반환하는 로직을 구현한 메서드입니다.

Map<String, Object> result = null;:
- 결과를 담을 맵 객체를 선언합니다. 초기 값은 null입니다.
Member db = mapper.selectByEmail(member.getEmail());:
- mapper.selectByEmail 메서드를 호출하여 데이터베이스에서 주어진 이메일로 회원 정보를 조회합니다.
- 조회된 Member 객체는 db에 저장됩니다.
if (db != null) {:
- 조회된 회원 정보가 존재하는지 확인합니다. 존재하지 않으면 result는 null 상태로 반환됩니다.
if (passwordEncoder.matches(member.getPassword(), db.getPassword())) {:
- passwordEncoder.matches 메서드를 사용하여 입력된 비밀번호(member.getPassword())와 데이터베이스에 저장된 비밀번호(db.getPassword())가 일치하는지 확인합니다.
- 비밀번호가 일치하면 JWT 토큰 생성을 시작합니다.
result = new HashMap<>();:
- 결과를 담을 맵 객체를 초기화합니다.
JWT 토큰 생성:
- JwtClaimsSet.builder()를 사용하여 JWT 클레임 세트를 구성합니다.
- issuer("self"): 토큰 발행자를 "self"로 설정합니다.
- issuedAt(Instant.now()): 토큰 발행 시간을 현재 시간으로 설정합니다.
- expiresAt(Instant.now().plusSeconds(60 * 60 * 24 * 7)): 토큰 만료 시간을 일주일 후로 설정합니다.
- subject(db.getId().toString()): 토큰 주제를 DB에 들어 있는 member의 id로 설정ㅇ합니다.
- claim("scope", ""): 권한 정보를 빈 문자열로 설정합니다. (실제 애플리케이션에서는 필요한 권한 정보를 추가해야 합니다.)
- claim("nickName", db.getNickName()): 닉네임을 클레임에 추가합니다.
token = jwtEncoder.encode(JwtEncoderParameters.from(claims)).getTokenValue();:
- jwtEncoder.encode 메서드를 사용하여 JWT 토큰을 인코딩하고, getTokenValue() 메서드로 토큰 값을 가져옵니다.
result.put("token", token);:
- 결과 맵에 생성된 JWT 토큰을 추가합니다.
return result;:
- 결과 맵을 반환합니다. 만약 인증에 실패하면 null을 반환합니다.

이 메서드는 이메일과 비밀번호를 검증하여, 인증에 성공하면 JWT 토큰을 생성하고 이를 결과 맵에 담아 반환합니다. 인증에 실패하면 null을 반환합니다. 이 JWT 토큰은 주로 클라이언트가 이후의 요청에서 인증을 위해 사용할 수 있습니다.

💟 로그아웃

Navbar.jsx(React)

<Button
  onClick={() => {
    localStorage.removeItem("token");
    navigate("/login");
  }}
  cursor={"pointer"}
  _hover={{ bgColor: "gray.200" }}
  colorScheme="teal"
>
  로그아웃
</Button>

로그아웃을 할 때는 localStorage에서 토큰을 제거하면 됩니다.

💟 Context 사용해서 로그인/로그아웃 구현

LoginProvider 컴포넌트를 통해 로그인 상태와 관련된 다양한 함수와 상태를 Context로 관리합니다. LoginContext를 사용하여 애플리케이션의 다른 컴포넌트에서 로그인 상태와 관련된 정보와 함수를 쉽게 접근할 수 있습니다.

LoginProvider.jsx(React)

import React, { createContext, useEffect, useState } from "react";
import { jwtDecode } from "jwt-decode";

export const LoginContext = createContext(null);

export function LoginProvider({ children }) {
  const [id, setId] = useState("");
  const [nickName, setNickName] = useState("");
  const [expired, setExpired] = useState(0);
  const [authority, setAuthority] = useState([]);

  useEffect(() => {
    const token = localStorage.getItem("token");
    if (token === null) {
      return;
    }
    login(token);
  }, []);

  // isLoggedIn
  function isLoggedIn() {
    return Date.now() < expired * 1000;
  }

  // 권한 있는 지? 확인
  function hasAccess(param) {
    return id == param;
  }

  function isAdmin() {
    return authority.includes("admin");
  }

  // login
  function login(token) {
    localStorage.setItem("token", token);
    const payload = jwtDecode(token);
    setExpired(payload.exp);
    setId(payload.sub);
    setNickName(payload.nickName);
    setAuthority(payload.scope.split(" ")); // "admin manager user"
  }
  // logout
  function logout() {
    localStorage.removeItem("token");
    setExpired(0);
    setId("");
    setNickName("");
    setAuthority([]);
  }

  return (
    <LoginContext.Provider
      value={{
        id
        nickName
        login
        logout
        isLoggedIn
        hasAccess
        isAdmin
      }}
    >
      {children}
    </LoginContext.Provider>
  );
}

isLoggedIn : 현재 로그인이 된 상태인지 확인합니다. 현재 시간이 토큰 만료 시간보다 작은지 비교합니다.
login : 로그인을 할 때는 JWT 토큰을 localStorage에 저장하고 토큰의 페이로드를 디코팅하여 디코딩된 페이로드에서 만료시간, 아이디, 닉네임을 가져옵니다.
logout : 로그아웃을 할 때는 아이디, 만료시간, 닉네임 상태를 초기화시킵니다.
hasEmail : 현재 로그인된 사용자의 아이디이 특정 아이디와 일치하는지 확인합니다.
useEffect() : useEffect 훅을 사용하여 컴포넌트가 처음 렌더링될 때 localStorage에서 JWT 토큰을 가져와 로그인 상태를 설정합니다. 이를 통해 사용자가 페이지를 새로고침하거나 다시 방문하더라도 로그인 상태가 유지될 수 있습니다.

MemberLogin.java

function handleLogin() {
    axios
      .post("/api/member/token", { email, password })
      .then((res) => {
        account.login(res.data.token);
        toast({
          status: "success",
          description: "로그인 성공하였습니다.",
          position: "top-right",
          duration: 1000,
        });
        navigate("/");
      })
      .catch((err) => {
        account.logout();
        toast({
          status: "error",
          description: "로그인 실패하였습니다.",
          position: "top-right",
          duration: 1000,
        });
      });
  }

로그인 : 기존 코드에서는 POST 요청 후 로그인을 성공하면 바로 localStorage에서 토큰을 저장했지만(localStorage.setItem("token", res.data.token)) 수정된 코드에서는 LoginProvider에 작성된 컴포넌트를 가져와서 작성합니다.
로그아웃도 마찬가지입니다.

Navbar.jsx

import { useNavigate } from "react-router-dom";
import { Box, Button, ButtonGroup, Flex, Spacer } from "@chakra-ui/react";
import React, { useContext } from "react";
import { LoginContext } from "./LoginProvider.jsx";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser } from "@fortawesome/free-regular-svg-icons";

export function Navbar() {
  const navigate = useNavigate();
  const account = useContext(LoginContext);

  return (
    <Flex minWidth="max-content" alignItems="center" gap="3">
      <Box
        onClick={() => navigate("/")}
        cursor={"pointer"}
        _hover={{ bgColor: "gray.200" }}
      >
        Home
      </Box>
      {account.isLoggedIn() && (
        <Box
          onClick={() => navigate("/write")}
          cursor={"pointer"}
          _hover={{ bgColor: "gray.200" }}
        >
          글쓰기
        </Box>
      )}
      <Spacer />
      {account.isLoggedIn() && (
        <Box>
          <FontAwesomeIcon icon={faUser} />
          {account.nickName}
        </Box>
      )}
      {account.isLoggedIn() || (
        <Box
          onClick={() => navigate("/member/list")}
          cursor={"pointer"}
          _hover={{ bgColor: "gray.200" }}
        >
          회원목록
        </Box>
      )}

      <Spacer />
      <ButtonGroup gap="1">
        {account.isLoggedIn() || (
          <Button
            onClick={() => navigate("/signup")}
            cursor={"pointer"}
            _hover={{ bgColor: "gray.200" }}
            colorScheme="teal"
          >
            회원가입
          </Button>
        )}
        {account.isLoggedIn() || (
          <Button
            onClick={() => navigate("/login")}
            cursor={"pointer"}
            _hover={{ bgColor: "gray.200" }}
            colorScheme="teal"
          >
            로그인
          </Button>
        )}
        {account.isLoggedIn() && (
          <Button
            onClick={() => {
              account.logout();
              navigate("/login");
            }}
            cursor={"pointer"}
            _hover={{ bgColor: "gray.200" }}
            colorScheme="teal"
          >
            로그아웃
          </Button>
        )}
      </ButtonGroup>
    </Flex>
  );
}

Navbar.jsx에서 LoginProvider에서 작성한 isLoggedIn을 사용해서 화면에 보이게 합니다.
account.isLoggedIn() && ~ : 로그인이 된 상태
account.isLoggedIn() || ~ : 로그인이 안된 상태

ybk

개발자 준비생~

이전 포스트

💻 코딩 일기 : [스프링 게시판 with React] '회원정보 수정(Update)' 편

다음 포스트