[session] sprint-auth-session

🔥 서버열기와 Client 는 앞 선 sprint-auth-cookie 와 동일!!! cookie → session 으로 바뀔 뿐이다! 참고로 같이 넣어 두겠습니다. 바로 Server 보시면 됩니다.

 

💡 서버열기

 

HTTPS 프로토콜을 사용할 수 있도록

서버의 index.js 파일을 확인해보면 인증서를 불러오는 코드가 있는데,

// 인증서 파일들이 존재하는 경우에만 https 프로토콜을 사용하는 서버를 실행합니다.
// 만약 인증서 파일이 존재하지 않는경우, http 프로토콜을 사용하는 서버를 실행합니다.
// 파일 존재여부를 확인하는 폴더는 package.json이 위치한 server 폴더입니다.
let server;
if (fs.existsSync("./key.pem") && fs.existsSync("./cert.pem")) {
  const privateKey = fs.readFileSync(__dirname + "/key.pem", "utf8");
  const certificate = fs.readFileSync(__dirname + "/cert.pem", "utf8");
  const credentials = {
    key: privateKey,
    cert: certificate,
  };

해당 폴더에 인증서가 없기 때문에 HTTPS 서버가 아닌 그냥 HTTP 서버가 열려서

• 서버 폴더 안에서 mkcert를 사용해 인증서를 만들어서 HTTPS 서버로 변경
• mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1

나머지 건들지 말고 corsOptions 에 Cors 설정해준다.

server/index.js

const corsOptions = {
  /* TODO: CORS 설정이 필요합니다. 클라이언트가 어떤 origin인지에 따라 달리 설정할 수 있습니다.
   * 메서드는 GET, POST, OPTIONS를 허용합니다.
   */
  // client는 <http://localhost:3000> 을 이용하게 됩니다.
  origin: "<http://localhost:3000>",

  // cookie는 인증 정보를 포함하는 경우가 많으므로 credentials도 설정해줍니다.
  credentials: true,

  // 허용할 메소드를 배열에 담아서 작성해줍니다.
  methods: ["GET", "POST", "OPTION"],
};

app.use(cors(corsOptions));

app.post("/login", controllers.login);
app.post("/logout", controllers.logout);
app.get("/userinfo", controllers.userInfo);

혹시 크롬 https 에러가 뜬다면

→

크롬 업데이트 해줍시다(안된 이유 저는,,)

아래 링크에 또 자세히 설명! 참조

 

10 Ways to Fix the NET::ERR_CERT_DATE_INVALID Error

 

 

🍪 Client

 

client/app.js

→ 전달 해 줄 props 받아 내려오기

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "./pages/Login";
import Mypage from "./pages/Mypage";
import React, { useEffect, useState } from "react";
import axios from "axios";

// 모든 요청에 withCredentials가 true로 설정됩니다.
axios.defaults.withCredentials = true;

function App() {
  const [isLogin, setIsLogin] = useState(false);
  const [userInfo, setUserInfo] = useState(null);

  const authHandler = () => {
    return axios
      .get("<https://localhost:4000/userinfo>")
      .then((res) => {
        setIsLogin(true);
        setUserInfo(res.data);
      })
      .catch((err) => {
        console.log(err.response.data);
      });
  };

  useEffect(() => {
    // 컴포넌트 생성 시 아래 함수가 실행됩니다.
    authHandler();
  }, []);

  return (
    <BrowserRouter>
      <div className="main">
        <Routes>
          <Route
            path="/"
            element={
              isLogin ? (
                <Mypage
                  /*
                TODO: 렌더링에 필요한 App의 상태와 이를 하위 컴포넌트에서 변경할 수 있도록 props를 전달하세요. 
                */
                  userInfo={userInfo}
                  setIsLogin={setIsLogin}
                  setUserInfo={setUserInfo}
                />
              ) : (
                <Login
                  /*
                TODO: App의 상태를 변경할 수 있도록 props를 전달하세요. 
                */
                  setIsLogin={setIsLogin}
                  setUserInfo={setUserInfo}
                />
              )
            }
          />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

client/pages/Login.js

→ props로 전달 받은 것 적용

→ 로그인 버튼에 넘겨줄 핸들러

export default function Login({ setIsLogin, setUserInfo }) {
  const [loginInfo, setLoginInfo] = useState({
    userId: "",
    password: "",
  });
  const [checkedKeepLogin, setCheckedKeepLogin] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");
  const handleInputValue = (key) => (e) => {
    setLoginInfo({ ...loginInfo, [key]: e.target.value });
  };
  const loginRequestHandler = () => {
    // TODO: Login 컴포넌트가 가지고 있는 state를 이용해 로그인을 구현합니다.
    // 로그인에 필요한 유저정보가 충분히 제공되지 않았다면 에러메시지가 나타나도록 구현하세요.
    if (!loginInfo.userId || !loginInfo.password) {
      setErrorMessage("아이디와 비밀번호를 입력하세요");
      // 입력되지 않은 값이 있는거니까 요청을 보내볼 필요도 없이 바로 리턴해줍니다.
      return;
    }
    return axios
      .post("<https://localhost:4000/login>", { loginInfo, checkedKeepLogin })
      .then((res) => {
        // 로그인에 성공했다면 응답으로 받은 데이터가 Mypage에 렌더링되도록 State를 변경하세요.
        setIsLogin(true);
        setUserInfo(res.data);
        //여기에서 에러 초기화
        setErrorMessage("");
      })
      .catch((err) => {
        // 로그인에 실패했다면 그에 대한 에러 핸들링
        if (err.response.status === 401) {
          setErrorMessage("로그인에 실패했습니다.");
          alert('로그인에 실패했습니다!')
        }
      });
  };

client/pages/Mypage.js

→ props로 전달 받은 것 적용

→ 로그아웃은 로그인과 반대로

 ➡️ setIsLogin(false); setUserInfo(null);

 

export default function Mypage({ userInfo, setIsLogin, setUserInfo }) {
  const logoutHandler = () => {
    // TODO: Logout 버튼을 눌렀을 시 Login 페이지로 돌아갈 수 있도록 구현하세요.
    return axios
      .post("<https://localhost:4000/logout>")
      .then((res) => {
        // 로그아웃에 성공했다면 App의 상태를 변경하세요.
        setIsLogin(false);
        setUserInfo(null);
      })
      .catch((err) => {
        // 로그아웃에 실패했다면 그에 대한 에러 핸들링을 구현하세요.
        console.log(err.response.data);
        alert(err);
      });
  };

 

 

 

 

 🍪 Server

 

index.js 는 맨 첫부분 서버 열기에서 확인!

server/controllers/users/login.js

const { USER_DATA } = require("../../db/data");
module.exports = (req, res) => {
  const { userId, password } = req.body.loginInfo;
  const { checkedKeepLogin } = req.body;
  const userInfo = {
    ...USER_DATA.filter(
      (user) => user.userId === userId && user.password === password
    )[0],
  };
  /*
   * TODO: 로그인 로직을 구현하세요.
   *
   * userInfo에는 요청의 바디를 이용해 db에서 조회한 유저정보가 담겨있습니다. 콘솔에서 userInfo를 출력해보세요.
   * 유저의 정보가 출력된다면 해당 유저가 존재하는 것임으로 로그인 성공에 대한 응답을 전송해야합니다.
   * 만약 undefined가 출력된다면 해당하는 유저가 존재하지 않는 것임으로 로그인 실패에 대한 응답을 전송해야합니다.
   *
   * 로그인 성공 시에는 클라이언트에 세션 아이디를 전송해야합니다.
   * req.session을 사용해 세션 객체에 userInfo.id를 저장하세요.
   * 영속성있는 쿠키로 세션 아이디를 보내려면 max-age 또는 expires 옵션을 설정하세요.
   *
   * 클라이언트에게 바로 응답을 보내지않고 서버의 /useinfo로 리다이렉트해야 합니다.
   * express의 res.redirect 메서드를 참고하여 서버의 /userinfo로 리다이렉트 될 수 있도록 구현하세요.
   */
  if (!userInfo.id) {
    res.status(401).send("Not Authorized");
  } else if (checkedKeepLogin) {
    req.session.sessionId = userInfo.id;

    // 세션 구조 들여다보기 -> 터미널에 표시됩니다
    console.log(req.session);

    // 쿠키 옵션 설정하기
    req.session.cookie.maxAge = 1000 * 60 * 30;

    res.redirect("/userinfo");
  } else {
    req.session.sessionId = userInfo.id;
    res.redirect("/userinfo");
  }
};

server/controllers/users/logout.js

→

module.exports = (req, res) => {
  /*
   * TODO: 로그아웃 로직을 구현하세요. 로그아웃 요청은 세션을 삭제하는 과정을 포함해야 합니다.
   *
   * 세션 아이디를 통해 고유한 세션 객체에 접근할 수 있습니다.
   * 앞서 로그인시 세션 객체에 저장했던 값이 존재할 경우, 이미 로그인한 상태로 판단할 수 있습니다.
   * 세션 객체에 담긴 값의 존재 여부에 따라 응답을 구현하세요.
   */

    req.session.destroy();
    res.status(205).send("Logged Out Successfully");

};

server/controllers/users/userInfo.js

→

const { USER_DATA } = require("../../db/data");

module.exports = (req, res) => {
  /*
   * TODO: 세션 객체에 담긴 값의 존재 여부에 따라 유저 정보를 전달하는 로직을 구현하세요.
   *
   * 세션 객체에 담긴 정보가 궁금하다면, req.session을 콘솔로 출력해보세요.
   * 로그인 시 세션 객체에 저장한 userInfo.id를 이용해 해당하는 유저를 조회할 수 있습니다.
   */
  const sessionId = req.session.sessionId;
  const userInfo = {
    ...USER_DATA.filter((user) => user.id === sessionId)[0],
  };

  if (!sessionId || !userInfo.id) {
    res.status(401).send("Not Authorized");
  } else {
		// 세션에서는 패스워드를 제거 해준다
    delete userInfo.password;
    res.send(userInfo);
  }
};

 

 

npm test → 테스트 통과ㄱㄱ