24. 9.4. 개발일지 // 커스텀 세션, 쿠키생성방법

* 커스텀 세션 개발

설계도

• 로그인시 쿠키 설정하기, 쿠키생성방법

//@PostMapping('/login')
login = async (req, res) => {
    const { loginId, password } = req.body;
    const loginMember = await this.loginService.login(loginId, password);

    if(loginMember === null ) {
        res.render('login/loginForm', { error: '아이디 또는 비밀번호가 맞지 않습니다.' });
        return;
    }

    sessionManager.createSession(loginMember,res);
    console.log(req.cookies);


    // res.status(200).send(`${loginMember.name}님 안녕하세요`);
    res.redirect('login/after-login');
}

response.cookie => {sessionId : uuid}를 쿠키로 생성

이후 컨트롤러에서 res.redirect하면, 쿠키가 포함된 응답을 보내는것으로 추측.

createSession(member, response) {
    const sessionId = uuidv4();
    this.sessionStore.set(sessionId, member);

    //쿠키 생성
    response.cookie(this.SESSION_COOKIE_NAME, sessionId);

    console.log('createSession: '+ this.sessionStore);
    return sessionId;
}

 

• 로그아웃시 세션 삭제
  • sessionStore : {uuid, member객체} 가 담겨있음
  • Cookie의 vlaue가 곧 uuid == key임. -> 그걸 sessionStore에서 삭제.

//@PostMapping('/login/logour')
logout = async (req, res) => {
    await sessionManager.expire(req);
    res.redirect('/');
}

expire(req){
    const sessionCookieVal = this.findCookie(req,this.SESSION_COOKIE_NAME);
    if(sessionCookieVal){
        this.sessionStore.delete(sessionCookieVal);
    }
    console.log('expired session: '+ this.sessionStore);
}

 

* 비인가 페이지 접근제한

• version 1 
  • 모든 컨트롤러앞에 if( not login ) return을 추가하는방법
  • 단점 : 새로운 페이지 개발시마다 앞에 저 코드를 반복적으로 추가해야함, 개발자 실수의 확률 up
• version 2
  • http 요청 -> was -> 필터 -> 필터(미들웨어) ... -> 컨트롤러  
  • 미들웨어를 두고, 컨트롤러에 http req가 도달하기전에 미리 거르는 방식 선택
  • whiteList => 로그인이 필요없는페이지 (로그인화면, 회원가입화면, css, js)는 허용

const whiteList = ['/login', '/login/register',  '/css', '/js', '/images'];
const sessionManager = require('../utils/SessionManager');

function isLoginCheckPath(url) {
    return !whiteList.some(path => url.startsWith(path));
}

function authMiddleware(req, res, next) {
    const requestURI = req.path;
    try{
        console.log(`인증 체크 필터 시작 ${requestURI}`);
        if(isLoginCheckPath(requestURI)) {
            console.log(`인증 체크 로직 실행 ${requestURI}`);
            const a = sessionManager.findCookie(req,sessionManager.SESSION_COOKIE_NAME);
            if(a === null){
                console.log(`미인증 사용자 요청 ${requestURI}`);
                //로그인으로 redirect
                res.redirect('/login');
                return; //미인증 사용자는 다음 미들웨어로 진행하지않고 끝!
            }
        }
        next(); //인증된 사용자는 다음 미들웨어로 진행
    }
    catch (e) {
        throw e; //error는 끝까지 보내줘야함.
    }
    finally {
        console.log(`인증 체크 필터 종료 ${requestURI}`);
    }

}

module.exports = authMiddleware;

//main.js에서 사용하면 필터가추가된다!
setupMiddlewares() {
    this.app.use(express.json());// for parsing application/json
    this.app.use(express.urlencoded({ extended: true }));// for parsing application/x-www-form-urlencoded
    this.app.use(cookieParser());
    this.app.use(authMiddleware);  // 새로 추가된 미들웨어
}

 

* 로그인 환영 메시지 구현

• ejs에 변수 넘기는법
  • res.render ('대상ejs 주소' , { 변수명 } ) 안에 변수를 넣고
  • <%= 변수명 %> 로 사용하면된다.
  • 객체전달후 . 연산자로 접근하는건 안된다. ( jsp에서는 되요 )

afterLoginForm = async(req, res) => {
    //쿠키로 멤버찾기
    const findCookieVal = sessionManager.findCookie(req, sessionManager.SESSION_COOKIE_NAME)
    const findMember = sessionManager.findMemberByCookieVal(findCookieVal);
    const name = findMember.name;

    res.render('login/afterLoginForm', { name } );
}

<div class="login-container">
    <h2>홈 화면</h2>
    <h2><%= name %> 님 안녕하세요</h2>

결과