개인 프로젝트 질문 드립니다.

[노현석]

안녕하십니까 스승님

Client : react 
Server : node.js (express)

개인 프로젝트 진행 중 입니다.
express 서버에서 express-session + express-mysql-session lib 사용하고
session 로그인 기능을 만들고 있는데 브라우저에 쿠키 자동 등록을 어떻게 하는지 모르겠어서 질문드립니다.
node.js 강의에서는 passport lib 사용해서 생략 되고 서버 사이드라 
react에서는 쿠키 관리를 어떻게 해야되는지 도저히 감이 안잡히고 있습니다.
목적은 react 웹 애플리케이션에서 세션 아이디를 쿠키로 저장하고 이를 바탕으로 페이지 전환 + 브라우저 껏다가 다시 켜도
로그인 유지 시키도록 하고 싶어서 입니다.
두서 없이 썻지만 저의 의도를 꿰뚫고 계실거라고 믿고 질문드립니다. 감사합니다 ㅠㅠ

[노현석]

react 코드 일부

function Login() {
    let LoginInfo = useSelector((state) => { return state.LoginInfo });
    let dispatch = useDispatch();
    let param = { isLogin: false, id: '' };

    //console.log(LoginInfo);

    const navigate = useNavigate();
    const [id, setId] = useState("");
    const [password, setPassword] = useState("");

    useEffect(() => {
        axios.get('/authcheck')
            .then((res) => {
                /* if (res.data.isLogin === "True") {
                    console.log("LOGIN: WELCOME : ", res.data); //test_log
                } else {
                    console.log("LOGIN: LOGIN : ", res.data);//test_log
                } */
                console.log("LOGIN: LOGIN : ", res.data);//test_log
            }).catch((err) => {
                console.error('error => authcheck :', err)
            })
    }, []);

    function auth(props) {
        const userData = {
            userId: id,
            userPassword: password,
        };

        console.log('id password: ', id, password);
        console.log('userData :', userData);
        axios({
            method: 'post',
            url: gvar.LOCAL_URL + '/login',
            data: userData,
            responseType: 'json',
        }).then((res) => {
            if (res.status != 200) {
                alert('통신 실패 : ', res.status)
            } else {
                console.log('hsnoh res.data : ', res.data);//test_log
                navigate('/layout');
                
            }
        });
     }

    return (
        <div className="login-bg">
            <div className='login-box blur-radius-box-shadow'>
                <div className="logo-centered">
                    < img src={process.env.PUBLIC_URL + "./images/red_logo_png.png"} />

                </div>
                <div className='login-text'>
                    
                    <div>
                        <input type='email' placeholder='Email' onChange={event => { setId(event.target.value); }}></input>
                    </div>
                    <div>
                        <input type='password' placeholder='Password' onChange={event => { setPassword(event.target.value); }}></input>
                    </div>
                    <div>
                        <Button onClick={() => {
                            auth();
                        }}>Login</Button>
                    </div>
                </div>
            </div>
        </div>
    )
}

서버 코드 일부

app.use(session({
    key: "session_cookie_name",
    //session 암호 값
    secret: 'password!',
    store: sessionStore,
    resave: false,
    saveUninitialized: true,
    cookie: {
        //httpOnly: true,
        maxAge: 60 * 60 * 24,
        //signed: true,
        path: '/',
    },
}))


app.post("/login", (req, res) => {
    const username = req.body.userId;
    const password = req.body.userPassword;
    const sendData = { isLogin: "" };
    console.log('username password', username, password);
    if (username && password) {
        db.connect(function (err) {
            if (err) console.error("mysql connection error : " + err);
            else console.log("mysql is connected successfully!");
        });
        const sql = `select us.id, us.login, us.auth, us.name, us.company_id, 
                    replace(fi.destin, 'contents', 'thumbs') as thumbnail
                    from users us
                    left join filepath fi on us.thumbnail_id = fi.id
                    where login = ? and useYN='Y' and 
                    pwd = password(?);`
        const param = [username, password];
        db.query(sql, param, function (err, result) {
            if (err) console.log("query is not excuted : " + err);
            else {
                console.log("query is excuted : ", result);
                if (result.length > 0) {
                    console.log('hsnoh req.sessionId', req.sessionID);
                    console.log('hsnoh req.session : ', req.session);
                    console.log('hsnoh req.body : ', req.body);
                 
                } else {
                    sendData.isLogin = "로그인 정보가 일치하지 않습니다."
                    res.send(sendData);
                    console.log("일치하는 계정이 없습니다.");
                }
            }
        });
    } else {
        sendData.isLogin = "아이디와 비밀번호를 입력하세요!";
        res.send(sendData);
    }
});

[codingapple]

passport쓰면 passport.authenticate() 쓰면 세션생성해주고 쿠키까지 알아서 발행잘됩니다
쿠키직접만들어주려면 res.cookie(어쩌구, 저쩌구) 하면 생성됩니다

[노현석]

react routerprovider 사용해서 페이지 전환 구현해서
보통 node.js(express) 에서 서버 구현하면 라우팅을 서버에서 해주는 자료들만 있더라구요

passport 사용하면 클라이언트에서 라우터 페이징 했을때나  링크,
다른 aixos 요청있을시 브라우저가 알아서 인증 해주나요?

[codingapple]

passport 셋팅해놓으면 서버로 요청시 서버에서 로그인여부 자동으로 확인해줍니다

[글쓴이]

글