강디너의 개발 일지

프로젝트_v7 Express JWT으로 로그인 인증 + 모듈화 본문

Javascript/토이프로젝트

프로젝트_v7 Express JWT으로 로그인 인증 + 모듈화

강디너 2019. 2. 2. 22:19
728x90

JWT 으로 로그인 인증을 하겠습니다.

 

우선 jsonwebtoekn 모듈을 다운받겠습니다.

이 모듈은 jwt를 편하게 만들수 있도록 도와줍니다.

 

 

JWT 로그인

1. user 테이블에서 user_pwd를 가져온 뒤

2. hash 해서 hash 한 값과 가져온 값과 비교 하고 맞으면

3. Token 을 만듭니다.

토큰이 성공적으로 만들어지면 성공 메시지와 함께 토큰을 보내줍니다.

 

app.post('/auth/login', (req, res) => {
  // 로그인 인증
  User.user_id = req.body.id;
    User.user_pwd = req.body.pwd;
    let jwt_secret = 'DinnerKang';
    console.log(req.body.id);
    if (User.user_id) {
      connection.query(`SELECT user_pwd, user_role FROM user WHERE user_id = "${User.user_id}"`, function (error, results, fields) {
        if (error) {
          console.log(error);
        }
        console.log(results);

        const hash = crypto.createHmac('sha256', secret)
          .update(req.body.pwd)
          .digest('base64');
        User.user_role = results[0].user_role;
        if (hash == results[0].user_pwd) {
          const getToken = new Promise((resolve, reject) => {
            jwt.sign({
                id: User.user_id,
                role: User.user_role
              },
              jwt_secret, {
                expiresIn: '7d',
                issuer: 'Dinner',
                subject: 'userInfo'
              }, (err, token) => {
                if (err) reject(err)
                resolve(token)
              })
          });
          
          getToken.then(
            token => {
              res.status(200).json({
                'status': 200,
                'msg': 'login success',
                token
              });
            }
          );
        } else {
          res.status(400).json({
            'status': 400,
            'msg': 'password 가 틀림'
          });
        }
      });
    } else {
      res.status(400).json({
        'status': 400,
        'msg': 'id값이 없음'
      });
    }
});

 

토큰이 아래와 같은 형식으로 보내지게됩니다.

(form에서 role은 빼주세요 코드 수정했습니다)

 

 

 

로그인 체크

1. 프론트단에서 헤더에 토큰을 보내고 서버단에서 확인할 것입니다.

2. verify 를 이용해서 jwt를 디코딩 한다음에 token을 다시 보내줍니다.

3. 디코딩한 token 에는 사용자 정보가 담겨져있습니다.

 

app.get('/auth/check', (req, res) => {
  // 인증 확인
  const token = req.headers['x-access-token'] || req.query.token;
  let jwt_secret = 'DinnerKang';

  if (!token) {
    res.status(400).json({
      'status': 400,
      'msg': 'Token 없음'
    });
  }
  const checkToken = new Promise((resolve, reject) => {
    jwt.verify(token, jwt_secret, function (err, decoded) {
      if (err) reject(err);
      resolve(decoded);
    });
  });

  checkToken.then(
    token => {
      console.log(token);
      res.status(200).json({
        'status': 200,
        'msg': 'success',
        token
      });
    }
  )
});

아래와 같이 token 에 정보가 담겨져 있습니다.

 

여태까지 app.js 파일에 전부 작성했는데 모듈화를 해볼겁니다.
 
1. 우선 api 폴더를 만들고 하위에 auth, users 폴더를 만듭니다.
2. 그 아래에 auth.js, auth.controller.js / user.js, user.controller.js 파일을 만듭니다.
3. 이제 api가 users면 user.controller 에 auth면 auth.controller에 넣습니다.
4. 이제 app.js 파일은 아래와 같이 간소화 할수 있습니다.
 

 

 

5. user.js 와 auth.js 는 각각 컨트롤러와 연결해주는 통로로 만듭니다.

 

6. user.controller.js 에 작업한 api들을 넣어줍니다. (경로들 잘 수정해주세요)

7. 마찬가지로 auth.controller 에도 같이 api를 넣어줍니다.

8. Insomnia 로 API 테스트를 한 후 잘 작동하는지 확인 하시면 끝입니다.

 

 

 

 

반응형
Comments