[MAC] Node/React 기초 — Authentication 기능 구현하기

출처 : 인프런_따라하며 배우는 노드, 리액트 시리즈 — 기본 강의

 

 

Auth route 를 만들어보자.

로그인 된 유저만 게시판에 글을 쓸 수 있게 한다던가, 지정된 페이지에 접근할 수 있게 하는 기능을 위한것이다.

 

 

- 저번 시간 복습

 

- 토큰 생성 후 User 정보에 넣고 Server에는 UserDB에 넣고, Client에서는 쿠키에 저장했다.

- 그리고 Server의 Token과 Client의 Toekn을 계속 비교하면서 맞는지 체크한다. 

 

- 만약 유저가 A page -> B page 로 이동할때, B page에 접근 가능한지 체크하는 과정

     1) Client에서 쿠키에 담긴 정보를 Server에 전달한다.

     2) Server는 Encode 된 쿠키를 받아서 Decode를 하고 그러면 User ID 가 나온다. ID 가 Server 쪽의 User DB에 있으면 인증되는 것이다. ('user._id + 'secrete Token' 해서 토큰을 생성했음. 디코드할때는 secretToken을 넣으면 user._id가 나옴.

그래서 user)

 

 

[결론]

1. Cookie에서 저장된 Token을 Server에서 가져와서 복호화를 한다.

2. 복호화를 하면 User ID가 나오는데 그 User ID를 이용해서 데이터베이스 User Collection에서 유저를 찾은 후 쿠키에서 받아온 token이 유저도 갖고 있는지 확인한다.

3. 쿠키가 일치하면 Authentication이 true이다. 그리고 그에 해당하는 유저의 정보들을 

 

 

Step 1) findByToken 메소드 작성

- 가져온 토큰을 디코드하는 findByToken 메소드를 User.js에 정의해보자 

userSchema.statics.findByToken = function(token,cb){
    var user = this;

    //가져온 토큰(token)을 디코드한다.
    jwt.verify(token, 'secretToken', function(err,dcoded) {

        //유저 아이디(decoded)를 이용해서 유저를 찾은 다음,
        //클라이언트에서 가져온 token과 DB에 보관된 token이 일치하는지 확인


        //findOne()는 MongoDB에 이미 있는 함수임. id와 token으로 찾을것
        user.findOne({"_id" : decoded, "token": token}, function(err,user){
            if(err) return cb(err)  //에러 있으면 콜백으로 에러 전달
            cb(null, user)          //에러 없으면 유저 정보 전달
        })
    })
}

 

 

아래의 형식으로 디코드한다. (참고 : www.npmjs.com/package/jsonwebtoken)

jwt.verify(token, 'shhhhh', function(err, decoded) {
        console.log(decoded.foo) // bar
      });

 

 

 

 

 

Step2) 미들웨어 생성

middleware폴더를 생성하고 그 아래에 auth.js 파일을 생성한다. 이곳에서 유저 인증을 처리해보자.

 

      - 미들웨어 : endpoint에서 request를 받은 다음 call back function 실행 전에 중간에서 실행되는 것. 

 

작성한 코드는 아래와 같다.

const { User } = require('../models/User');



let auth = (req, res, next) => {


    //인증 처리를 하는 곳 
    //1. 클라이언트 쿠키에서 토큰을 가져온다. cooike-parser 이용
    let token = req.cookies.x_auth;

    //2. 토큰을 복호화한 후 유저를 찾는다. 유저 모델에서 메소드 만들어서 
    User.findByToken(token, (err,user) => {
        if(err) throw err;
        if(!user) return res.json({ isAuth: false, error: true})    //유저가 없을 때. 클라이언트에 전해줌.


        //유저가 있으면 유저 정보 넣어줌 ~> User.js에서 req를 통해 유저 정보에 접근 가능해짐 
        req.token = token;
        req.user = user;
        next(); //미들웨어 끝나고 다음으로 넘어갈 수 있도록 해줌 
         
    })
    //3. 유저가 있으면 인증 Ok
    //4. 유저가 없으면 인증 NO

}

module.exports = {auth};     //auth를 다른 파일에서도 쓸 수 있게 해줌

 

 

 

 

 

Step 3) index.js- 인증 부분 추가

//Authentication 인증 부분
app.get('/api/users/auth', auth , (req,res) => {    //auth : 미들웨어 -> 


    //미들웨어 auth에 문제 생겨서 false가 되면 미들웨어내에서 return돼서 다른 곳으로 빠져나감. 
    //즉, 여기까지 미들웨어를 통과해 왔다는 얘기는 Authentication이 True 라는 말
    //True니까 유저 정보를 클라이언트에 전달해주면 됨

    res.status(200).json({
        _id: req.user._id,
        isAdmin: req.user.role === 0 ? false : true,        //관리자 유저인지 아닌지. role이
        isAuth: true,
        email: req.user.email,
        name: req.user.name,
        lastname: req.user.lastname,
        role: req.user.role,
        image: req.user.image

    })

})

 

 

만약, A page 의 어드민의 role이 1이고, B page의 어디민의 role이 2이라면 그때에 따라 isAdmin 줄의 코드는 다르게 작성할 수 있다.

지금은 role==0이면 일반 유저, role != 0 이면 관리자라고 가정해서 위와 같이 코드를 작성했다.