Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- vuex
- 신상마켓
- express
- vue login
- 정리
- extension
- react
- database
- plugin
- vue
- 기획
- 배포
- react-query
- PWA
- vsCode
- 회고록
- 셋팅
- Git
- Docker
- Firebase
- 프론트
- 로그인
- 토이프로젝트
- 플러그인
- javascript
- AWS
- 뷰
- nginx
- jwt
- login
Archives
- Today
- Total
강디너의 개발 일지
프로젝트_v7 Express JWT으로 로그인 인증 + 모듈화 본문
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 테스트를 한 후 잘 작동하는지 확인 하시면 끝입니다.
반응형
'Javascript > 토이프로젝트' 카테고리의 다른 글
프로젝트_v9 AWS에 Nginx 설치해서 띄워보기 (0) | 2019.03.08 |
---|---|
프로젝트_v8 Vue Login 기능 만들기 (4) | 2019.02.05 |
프로젝트_v6 Express CRUD 만들기 + 암호화 (0) | 2019.01.31 |
프로젝트_5 Express API 개발 (0) | 2019.01.29 |
프로젝트_4 Docker에 MySQL 셋팅 및 DB 만들기 (0) | 2019.01.25 |
Comments