credentials로 cookie 공유하기

로그인을 하거나 로그아웃을 할 때 또는 어떤 이벤트가 발생할때, middleware를 만들어 router를 검사하고 로그인 여부에 따라
접근가능 여부를 검사했다.

그런데 로그인을 해도 서비스를 이용할때 로그인이 필요하다는 401 에러가 발생한다. 이유는 cookie가 공유가 안돼서 그렇다.
그렇다면 로그인 후 cookie를 어떻게 공유할까? 그전에 브라우저의 원리에 대해 이해가 필요하다.

 

이전에 브라우저와 서버와의 도메인이 달라 CORS문제를 겪은바가 있다. cookie를 공유하는 것도 브라우저와 서버의 도메인이 다르면 cookie 전달이 안된다. cookie가 전달이 되어야 백엔드 서버가 지금 요청을 보낸 사용자가 누구인지 알 수가 있다.

이 문제를 해결하기 위해 proxy방식을 사용할 수 있지만 cors 모듈을 활용해 해결할 수 있다.

---

back/app.js

const express = require('express');
const server = express();

const cors = require('cors');

const postRouter = require('./routes/post');
const userRouter = require('./routes/user');

server.use(
  cors({
    origin: '*', // credentials 사용 시 요청을 받을 정확한 도메인을 입력해야 함
    credentials: true, // default: false
  })
);

server.use('/user', userRouter);
server.use('/post', postRouter);

server.listen(3065, () => {
  console.log('서버를 실행중입니다.');
});

cors 모듈에 credentials의 기본 값은 false이다. 값을 true로 바꾸어주면 credentials로 cookie를 공유할 수 있다.

여기서 주의할 점은 credentials를 통해 cookie를 주고 받을 때, cors의 origin이 *(전체허용)이면 안된다.
정확하게 허용할 도메인을 입력해줘야 한다.

이제 프론트에서도 해줘야 할 것이 있다. 백엔드 서버의 url에 요청을 보낼 때(axios 사용) {withCredentials: true} 를 보내는 data
뒤에 붙여주면 된다.

axios.post('/user/post', data, {withCredentials: true})
   .then(res => {
      console.log(res);
   }).catch(e => {
      alert('실패');
   })

redux-saga에서 axios를 통해 data를 주고 받는다면, 하나하나 코드를 붙여주기에는 중복이되니 index.js에서 axios의 기본
default 값으로 axios.defaults.withCredentials = true 를 작성해주면 된다.

import { all, fork } from 'redux-saga/effects';
import axios from 'axios';

import userSaga from './user';
import postSaga from './post';
import { backURL } from '../config/config';

axios.defaults.baseURL = backURL;
axios.defaults.withCredentials = true; // withCredentials: true

// '*' : generator - using yield
// rootSaga 하나 만들어 놓고 만들고싶은 비동기 액션을 하나씩 넣어준다
export default function* rootSaga() {
  yield all([
    fork(userSaga), // call
    fork(postSaga),
  ]);
} // all은 배열을 받고 배열안에 받은 것들을 한방에 실행해준다

이제 axios를 통해 data를 주고 받을 때 cookie가 공유 될 것이다.