Session

 

 

 

 

 

 

서버에서 session 정보를 삭제 했을 때

 서버에서 session 정보를 보관하기 때문에 서버에서 session을 삭제 하게 되면 로그인 시 에러가 발생된다.

 

 

 

 

 

 

 

 

 

서버에서 session 설정

app.use(
  session({
    secret: "session secret", // 암호화 할 때 열쇠와 같은 문자열
    resave: false, // 내용의 변경이 없어도 저장을 할 건지
    saveUninitialized: false, // 요청의 내용이 비어 있을 때 저장을 할 건지
  })
);

 

 

Session 이름 설정

app.use(
  session({
    secret: "session secret", 
    resave: false, 
    saveUninitialized: false,
    name: "session_id",   // 세션의 이름 설정
  })
);

 

로그인 요청 후 개발자 도구에서 확인 시 

개발자도구 > application 탭에서 쿠키 정보를 보면 이름이 적용 된 것을 볼 수 있다.

 

로그인 요청(클라이언트) 및 Session 생성(서버)

< 로그인 요청 >

로그인 요청 --> 세션저장소에 정보저장 --> 저장완료 --> 세션 ID 전달 --> 정보요청 --> 세션ID 확인 --> 유저 데이터전달

function login() {
  const userId = idInput.value;                     // 유저아이디와
  const userPasswor = passwordInput.value;          // 비밀번호를

  return axios.post("http://localhost:3000", { userId, userPasswor }); // 서버에 post 요청한다.
}


loginButton.onclick = () => {
  login()                      // login 함수 실행으로 위의 login 함수 실행
    .then(() => getUserInfo())
    .then((res) => {
      console.log(res);
      renderUserInfo(res.data);
    });
};

 

 

 

서버에서는 클라이언트로 부터 전달받은 아이디와 비번으로 로 찾은 userInfo 정보를 세션에 저장해서 다시 클라이언트로 전달한다.

로그인 요청 --> 세션저장소에 정보저장 --> 저장완료 --> 세션 ID 전달 --> 정보요청 --> 세션ID 확인 --> 유저 데이터전달

app.post("/", (req, res) => {
  const { userId, userPasswor } = req.body;
  const userInfo = users.find(
    (el) => el.user_id === userId && el.user_password === userPasswor
  );
  if (!userInfo) {
    res.status(401).send("로그인 실패");
  } else {
    req.session.userId = userInfo.user_id; // req 세션객체에 id 값 저장 쿠키도 자동으로 전달된다.
    res.send("세션 생성 완료");               //  응답값에 세션도 포함하여 전달됨
  }
});

 

이후 클라이언트 요청 시에는 별도 설정 없이 seesion 도 같이 보내진다.

 

 

Session 정보 보내고 받기

 

<클라이언트 코드>

로그인 요청 --> 세션저장소에 정보저장 --> 저장완료 --> 세션 ID 전달 --> 정보요청 --> 세션ID 확인 --> 유저 데이터전달

function getUserInfo() {
  return axios.get("http://localhost:3000");
}

loginButton.onclick = () => {
  login().then(() => getUserInfo());  // 로그인 후 then 으로 get 요청을 보낸다.
};

 

 

 

 

<서버 코드 get request 처리>

get 요청을 받아서 콘솔로 확인 해 보면

app.get("/", (req, res) => {
  console.log(req.session);
});

 

세션에 아래와 같은 객체가 들어온다.

Session {
  cookie: { path: '/', _expires: null, originalMaxAge: null, httpOnly: true },
  userId: 'test'
}

 

 

완성된 get request 코드

확인된 객체를 통해 유저 ID 와 Password 를 조회 하여 일치하는 유저 정보를 변수에 담아서 josn 파일로 클라이언트에 보내준다.

로그인 요청 --> 세션저장소에 정보저장 --> 저장완료 --> 세션 ID 전달 --> 정보요청 --> 세션ID 확인 --> 유저 데이터전달

app.get("/", (req, res) => {
  const userInfo = users.find((el) => el.user_id === req.session.userId);
  return res.json(userInfo);
});

 

 

Session 삭제

 

<클라이언트 코드>

function logout() {
  return axios.delete("http://localhost:3000");    // 서버로 delete 요청
}

logoutButton.onclick = () => {
  logout().then((res) => {
    console.log(res);
    renderLoginForm();              // 화면을 다시 그려주는 함수
  });
};

 

 

 

<서버코드>

app.delete("/", (req, res) => {
  req.session.destroy();                // delete 요청이 들어오면 session 삭제
  res.clearCookie("session_id");        // 클라이언트 측 쿠키 삭제
  return res.send("세션 삭제 완료");       
});