인프런 커뮤니티 질문&답변

• 로그인 후 개발자 도구 쿠키에 x_auth 정상적으로 확인

• DB에도 토큰 정상적으로 값 입력된 것 확인

• 로그아웃 버튼을 클릭 시 401 에러 발생, 토큰 삭제 x

  

server/index.js

app.post('/api/users/login', async (req, res) => {
    try {
        const user = await User.findOne({ email: req.body.email });
        if (!user) {
            return res.json({ loginSuccess: false, message: "제공된 이메일에 해당하는 유저가 없습니다." });
        }
        // 비밀번호가 일치하는지 확인한다.
        const isMatch = await user.comparePassword(req.body.password);
        if (!isMatch) {
            return res.json({ loginSuccess: false, message: "비밀번호가 틀렸습니다." });
        }
        // 비밀번호가 일치하다면 토큰을 생성한다.
        const tokenUser = await user.generateToken();
        res.cookie("x_auth", tokenUser.token)
            .status(200)
            .json({ loginSuccess: true, userId: user._id });
    } catch (err) {
        return res.status(400).send(err);
    }
});

app.post('/api/users/logout', auth, async(req, res) => {
    try {
        await User.findOneAndUpdate({ _id: req.user._id }, { token: "" });
        res.clearCookie("x_auth");
        return res.status(200).send({ logoutSuccess: true });
    } catch (err) {
        return res.json({ logoutSuccess: false, message: err.message });
    }
});

User.js

userSchema.methods.comparePassword = function(plainPassword, cb) {
    const user = this;
    return bcrypt.compare(plainPassword, user.password);
};

userSchema.methods.generateToken = function() {
    var user = this;
    // jsonwebtoken을 이용해서 토큰을 생성한다.
    var token = jwt.sign(user._id.toJSON(), 'secretToken');
    user.token = token;
    
    return user.save();
};

userSchema.statics.findByToken = async function(token) {
    const user = this;
    try {
        // 토큰을 decode합니다.
        const decoded = jwt.verify(token, 'secretToken');
        
        // 디코딩된 정보를 이용해 유저를 찾습니다.
        const userData = await user.findOne({
            "_id": decoded,
            "token": token
        });
        return userData;
    } catch (err) {
        throw new Error("유효하지 않은 토큰입니다.");
    }
};

auth.js

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

function auth(req, res, next) {
    // 인증 처리한다.
    // 클라이언트 쿠키에서 토큰을 가져온다.
    const token = req.cookies.x_auth;

    if (!token) {
        return res.status(401).json({
            isAuth: false,
            message: "토큰이 제공되지 않았습니다."
        });
    }

    // 토큰을 복호화한 후 유저를 찾는다.
    User.findByToken(token)
    .then((user) => {
        if (!user) {
            return res.status(401).json({
                isAuth: false,
                message: "유효하지 않은 토큰입니다."
            });
        }

        // 토큰과 유저정보를 다음 단계로 전달한다.
        req.token = token;
        req.user = user;
        next();
    })
    .catch((err) => {
        return res.status(401).json({
            isAuth: false,
            message: err.message
        });
    })
};

module.exports = { auth };

• 서버의 경로를 절대 경로로 기입하지 않으면 404 에러 발생

• 5000 포트로 데이터 전송, cors로 3000 포트로 이동하도록 설정
  

const corsOptions = {
    origin: 'http://localhost:3000', // 클라이언트 주소
    credentials: true // 쿠키를 포함하도록
};

app.use(cors(corsOptions));