Node.js 가볍게 배워보기(로그인 구현 + 토큰 관리)

짜스의 하루 ·2024년 7월 15일

URL에 회원가입 한 사람의 id 넣기

원래는 로그인하면 /home 으로만 이동했는데, 10명이 가입했는데 10명 모두 /home으로 보이면 누가 로그인 했는지 로그인 정보를 넘겨주지 않는 것 같아서 로그인 한 사람의 id(고유한)를 파라미터에 추가해보도록 했다!

먼저 login 컴포넌트에서 ILoginData()에 data (email, password)를 넘겨준 뒤,

이에 해당하는 userId를 가져온 뒤, 만약 userId가 있다면, /home?id=${userId}로 이동할 수 있도록 코드를 짰다

그럼, ILoginData()에서는 어떤걸 할까?
사용자가 로그인할 때 서버에 요청을 보내고, 성공적으로 로그인하면 사용자의 고유 ID를 반환하는 역할을 하는 코드이다.

로그인 요청

로그인 엔드포인트(/login)에 이메일과 비밀번호를 포함한 POST 요청을 보냄.
요청 헤더에 JSON 형식으로 데이터를 전송할 것을 명시.

응답 처리:

response.data에서 token을 추출.
token이 존재하면 이를 sessionStorage에 저장하여 세션 동안 유지.

사용자 데이터 요청:

axios.get: 로그인 후 사용자 정보를 가져오기 위해 /user 엔드포인트에 GET 요청을 보냄.
Authorization 헤더에 Bearer ${token}을 포함하여 인증 정보를 제공.
응답에서 사용자 데이터를 추출하여 userData._id를 반환.

하는 과정을 거쳐서 사용자의 로그인이 성공하면, userId를 가져올 수 있도록 처리해 주었다.

그럼 여기서 엔드포인트 /user 를 살펴보자

app.get('/user', loginAuth, async (req, res) => {
  try {
    const token = req.header('Authorization').replace('Bearer ', '');
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    const userId = decoded.id; // JWT 토큰에서 추출한 사용자 ID

    const user = await User.findById(userId);

    if (!user) {
      return res.status(404).json({ message: '사용자를 찾을 수 없습니다.' });
    }

    // 사용자 정보 응답
    return res.status(200).json({ user });
  } catch (error) {
    console.error('사용자 정보를 가져오는 중 오류 발생:', error.message);
    return res.status(500).json({ error: error.message });
  }
});

app.use(loginAuth);

간단하게 설명하자면, 엔드포인트(/user)에 대한 요청을 처리하고, 인증된 사용자의 정보를 반환하는 기능을 구현한다.

토큰 추출

req.header('Authorization'): 요청 헤더에서 Authorization 헤더를 추출
replace('Bearer ', ''): Bearer 접두사를 제거하여 실제 토큰 값을 얻는다.
jwt.verify(token, process.env.JWT_SECRET): JWT 토큰을 검증하고 디코딩하여 사용자 ID를 추출합니다. process.env.JWT_SECRET는 JWT 서명을 확인하기 위한 비밀 키

사용자 정보 조회:

User.findById(userId): 데이터베이스에서 userId에 해당하는 사용자를 조회

요약
1 . /user 경로로 GET 요청이 들어오면 loginAuth 미들웨어로 인증을 확인
2 . Authorization 헤더에서 JWT 토큰을 추출하고 검증하여 사용자 ID를 얻는다
3 . 데이터베이스에서 해당 사용자 ID로 사용자를 조회하고, 사용자 정보를 반환
4 . 각 단계에서 오류가 발생하면 적절한 상태 코드와 메시지를 반환