[Node.js & React] node.js 세션 풀림 오류 #credentials #withCredentials

# 문제

( 전체 코드가 아닌 일부분입니다 )

1. front에서 로그인을 위한 요청 (post : /api/users/login)

// 인증 코드를 사용하여 백엔드 서버로 요청
axios.post(`${process.env.REACT_APP_API_BASE_URL}/api/users/login`, reqData)
    .then(res => {
        if (res.status !== 200) {
            alert(res.data.resultMsg);
        }

        // sessionStorage.setItem('loginUser', JSON.stringify(userInfo));  // 세션 저장
        navigate(res.data.redirectUrl);
    })
    .catch(error => {
        alert(error.response.data.resultMsg);
        navigate('/');
    });

 

2. server에서 로그인 처리 후 세션 저장 (req.session.loginUser)

// 로그인 및 회원가입
router.post('/api/users/login', async (req, res) => {

    let resultMsg = "로그인 중 문제가 발생했습니다. 다시 시도해주세요.";
    let status = 500;
    let redirectUrl = "/";

    try {

        const { userInfo } = req.body;
        const resUsers = await queries.getUsers(undefined, undefined, undefined, undefined, userInfo.social_id);    // 사용자 조회
        const isUserExists = resUsers.length > 0;

        if (!isUserExists) {    // 신규 회원 -> 회원가입
            const result = await queries.insertUser(userInfo.email, userInfo.user_nm, userInfo.social_type, userInfo.social_id);  // 회원가입
            
            req.session.loginUser = result.result ? result.userInfo : null;    // 회원가입 성공 시 세션 저장
            
            status = result.result ? 200 : 500;
            redirectUrl = result.result ? '/memories/connection' : '/'; // 회원가입 성공 시 리다이렉트 경로
        } else {    // 기존 회원 -> 로그인
            req.session.loginUser = resUsers[0]; // 세션 저장
            status = 200;
            redirectUrl = '/memories/connection';
            resultMsg = '';
        }

    } catch (error) {
        // 오류 발생 시 500 에러 응답
    } finally {
        res.status(status).json({ redirectUrl: redirectUrl, resultMsg : resultMsg});
    }

});

 

3. 로그인 완료 후 front에서 로그인이 정상적으로 되어있는지 확인하는 요청 (get : /api/users/login/check)

// 로그인 확인
export async function loginCheck() {

    const errorMsg = '해당 페이지는 로그인이 필요한 서비스입니다. 로그인 후 이용해주세요.';

    try {
        const res = await axios.get(`${process.env.REACT_APP_API_BASE_URL}/api/users/login/check`);
        if (!res.data.result) {
            handleLoginFailure(errorMsg);
        }
    } catch (error) {
        handleLoginFailure(errorMsg);
    }
}

function handleLoginFailure(errorMsg) {
    sessionStorage.clear();
    alert(errorMsg);
    window.location.href = '/';
}

 

4. server : /api/users/login/check 여기서 저장한 세션 콘솔로 확인

// 로그인 확인
router.get('/login/check', async (req, res) => {
    const loginUser = req.session.loginUser;
    console.log(loginUser);
});

 

 

이 과정을 거쳤는데 저장한 세션이 undefined... 2번에서 세션 저장 후 콘솔 출력하여 제대로 저장되는 것도 확인했는데...

 

 

 

# 해결방법 1

1. server 설정 파일의 corsOption에 세션 쿠키 허용하도록 설정(credentials: true)

// CORS 사용
const cors = require('cors');
const corsOption = {
  origin: process.env.REACT_APP_CLIENT_BASE_URL,
  credentials: true, // 세션 쿠키를 허용하도록 설정
  optionSuccessStatus: 200,
};
app.use(cors(corsOption));

 

2. axios 요청 보낼 때 { withCredentials: true} 같이 보내기

// 로그인 확인
export async function loginCheck() {

    const errorMsg = '해당 페이지는 로그인이 필요한 서비스입니다. 로그인 후 이용해주세요.';

    try {
        const res = await axios.get(`${process.env.REACT_APP_API_BASE_URL}/api/users/login/check`, { withCredentials: true });
        if (!res.data.result) {
            handleLoginFailure(errorMsg);
        }
    } catch (error) {
        handleLoginFailure(errorMsg);
    }
}

function handleLoginFailure(errorMsg) {
    sessionStorage.clear();
    alert(errorMsg);
    window.location.href = '/';
}

 

 

💡GET, POST, PUT, DELETE 마다 요청 방식 다름!
data 부분에는 같이 보낼 데이터 넣어주면 됨 ( 없으면 null )

• GET 요청:
  • 형식: axios.get(url, { withCredentials: true })
• POST 요청:
  • 형식: axios.post(url, data, { withCredentials: true })
• DELETE 요청:
  • 형식: axios.delete(url, { withCredentials: true })
• PUT 요청:
  • 형식: axios.put(url, data, { withCredentials: true })

 

#  해결방법 2

• 해결 방법 1의 경우 axios 요청 시 매번 { withCredentials: true } 이 옵션을 추가해줘야 하는데 불편함
• axios 인스턴스를 만들어 사용하면 편리함
• baseURL은 서버 쪽 URL(http://localhhost:8080 이런 식으로)

[axiosInstance.js]
import axios from 'axios';

const axiosInstance = axios.create({
    baseURL: process.env.REACT_APP_API_BASE_URL,
    withCredentials: true
});

export default axiosInstance;

• axiosInstance.js를 import 하고 사용하면 됨
  • axiosInstance.get( url )
  • axiosInstance.post( url, data )
  • axiosInstance.put( url, data )
  • axiosInstance.delete( url )

import axios from "axios";
import axiosInstance from 'utils/axiosInstance';

// 로그인 확인
export async function loginCheck() {

    const errorMsg = '해당 페이지는 로그인이 필요한 서비스입니다. 로그인 후 이용해주세요.';

    try {
        const res = await axiosInstance.get('/api/users/login/check');
        if (!res.data.result) {
            handleLoginFailure(errorMsg);
        }
    } catch (error) {
        handleLoginFailure(errorMsg);
    }
}

function handleLoginFailure(errorMsg) {
    sessionStorage.clear();
    alert(errorMsg);
    window.location.href = '/';
}