analogcoding

7/30 - 4주 프로젝트 / GraphQL , JWT , PASSPORT 본문

Be well coding/In Immersive

7/30 - 4주 프로젝트 / GraphQL , JWT , PASSPORT

be well 2019. 7. 30. 16:09

Toy 40번 문제. 200p 만들기 

1p piece 2p piece 5p piece 10p piece 20p piece 50p piece £1 (100p) £2 (200p) 로
200p 를 만들 수 있는 경우의 수를 모두 구하는 문제. 구현 실패.


graphQL 에서 JWT 를 미들웨어로 사용하는 부분을 해결했다.

 

graphQL 에서 middleware 분기를 하면서 생긴 문제점은 먼저 restful 과 차이점에 있다.

restful API 의 경우 특정 endpoint 마다 선택적으로 middleware 를 흘려줄 수 있었지만 graphQL 은 하나의 endpoint 만이 존재한다.

 

이 문제에 대해서 2가지의 해결방안이 나왔다.

 

첫번 째는 미들웨어에 배열에 resolver 를 담아주는 방법.

 

이 방법은 마땅한 레퍼런스를 찾지 못했고 시도했지만 번번히 실패했다. 이제 막 graphQL 을 접한지라 문법 자체를 읽는데 어려움이

컸다.. 부족한 내 실력 탓.. 참고한 레퍼런스의 일부만 첨부한다.

yarn add graphql-middleware
function applyMiddlewareToDeclaredResolvers(
  schema: GraphQLSchema,
  ...middleware: (IMiddleware | MiddlewareGenerator)[]
): GraphQLSchema & {
  schema?: GraphQLSchema
  fragmentReplacements?: FragmentReplacement[]
}

두번 째는 token 을 verify 하는 과정에서 토큰이 있을 때와 없을 때 , 다를 때 세 가지의 경우를 분기해주고 최종적으로 

 

필요한 부분은 resolver 함수에서 확인하는 방법이다. 이 방법은 처음에 얘기가 나왔던 방법이지만 효율적이지 못하다고 생각했고

 

어느 부분에서 시도를 해야할 지 정확히 감을 잡지 못했었지만 결국 이 방법을 택해서 해결하게 되었다.

 

클라이언트에서 토큰에 header에 "x-jwt" 라는 키의 값으로 토큰을 담아보내면 상태에 따라 값을 리턴하는 것을 

graphQL playground 에서 확인했다.

export const decodeJWT = token => {
  return jwt.verify(token, process.env.PRIVATE_KEY, (err, decode) => {
    if (err) {
      // console.log("decode 함수에서 에러 발생");
      return err;
    }
    // console.log("decode 함수에서 에러 없음");
    return decode.nickName;
  });
};

이처럼 토큰 verify 에서 유효한 토큰인 지를 검사해주고

const JWT = async (req, res, next) => {
  const token = req.get("x-jwt");

  // 요청에서 토큰을 찾는다??
  if (!token) {
    // console.log("미들웨어에서 겟한 토큰이 없음");
    return next();
    // 없다면 패쓰
  }
  // else console.log("미들웨어에서 겟한 토큰-->", token);
  try {
    const nickName = await decodeJWT(token);
    req.nickName = nickName;
    // console.log(req.nickName);
    return next();
    // 있다면 에러처리하고 패쓰!
  } catch (error) {
    console.log("err");
    return error;
  }
};

middleware 로 토큰이 없을  때와 있을 때 , 에러가 발생할 때를 분기해서 req 에 토큰화 되기 전 값을 담아서 next() 로 넘겨주었다.


Kakao passport 구현 중

 

passport DOCS 를 보면서 현재 console 로 내 데이터가 넘어오는 것 까진 확인했다.

이제 넘어온 데이터를 이용해서 회원가입과 로그인을 구현할 일만 남았다. 내일도 화이팅!

'Be well coding > In Immersive' 카테고리의 다른 글

8/1 - 4주 프로젝트  (0) 2019.08.01
7/31 - 4주 프로젝트  (0) 2019.08.01
7/29 - 4주 프로젝트  (0) 2019.07.29
7/27 - 4주 프로젝트  (0) 2019.07.27
7/26 - 4주 프로젝트  (0) 2019.07.26
Comments