inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] React로 NodeBird SNS 만들기

게시글, 댓글 작성하기

Error: Request failed with status code 401 (Unauthorized)

해결된 질문

5957

비오

작성한 질문수 5

0

안녕하세요 제로초님. 혼자 해결해보려고 했는데 도저히 못찾겠어서 또 질문드립니다.

isLoggedIn 미들웨어를 추가한 후, 로그아웃(혹은 포스트작성)시에 다음과 같은 오류가 뜹니다.

미들웨어를 빼더라도, req.user.id 값이 undefined로 뜨구요.

리덕스툴로 확인해 봤을때 로그인할때  state값은 문제없이 잘 들어갑니다.

/passport/index.js와 middlewares.js에 콘솔을 넣은 결과 제 나름대로 deserializeUser가 호출되지 않는거라고 결론을 내렸어요. (맞는지 모르겠네요) 코드 보여드릴게요.

/passport/index.js

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

module.exports = () => {
  passport.serializeUser((userdone=> { 
    console.log('serializeUser');
    done(nulluser.id);
  });

  passport.deserializeUser(async (iddone=> {
    console.log('deserializeUser');
    try {
      const user = await User.findOne({ where: { id }});
      done(nulluser); // req.user
    } catch (error) {
      console.error(error);
      done(error);
    }
  });

  local();
};

/routes/middlewares.js

exports.isLoggedIn = (reqresnext=> {
  if (req.isAuthenticated()) {
    next();
  } else {
    console.log(req.isAuthenticated());
    res.status(401).send('로그인이 필요합니다.');
  }
};

exports.isNotLoggedIn = (reqresnext=> {
  if (!req.isAuthenticated()) {
    next();
  } else {
    res.status(401).send('이미 로그인되어 있습니다.');
  }
};

콘솔

서버연결 후 로그인과 로그아웃을 실행했을때의 콘솔입니다. 로그아웃은 401에러가 뜨면서 실패했구요.

false는 

exports.isLoggedIn = (reqresnext=> {
if (req.isAuthenticated()) {
    next();
  } else {
    console.log(req.isAuthenticated());

여기에 있는 콘솔입니다. 

serialize에서 처음 찍은 콘솔은 로그인시 실행되는 것을 콘솔창에서 확인할 수 있는데, deserialize는 로그아웃시 실행되지 않습니다.

제가 이해한 바로는 로그인 이후에는, 라우터를 실행하기 전에 deserialize가 실행되어 req.user에 정보가 들어가야하는데,

이 부분이 실행되지 않는것 같아요.

인터넷에 찾아본 결과 deserialize user 가 실행이 되지 않는 경우는 크게 두가지 원인이 있다고 하던데 (1. CORS 문제, 2. Cookie 의 secure 설정이 true 인 경우), 코드를 바꿔봐도 문제가 해결되지 않습니다. 

deserializeUser가 실행되지 않아서 발생하는 문제가 맞을까요? 맞다면 어떻게 해결해야할까요?ㅜㅜ

app.js 코드도 여기 첨부할게요.

const express = require('express');
const cors = require('cors');
const userRouter = require('./routes/user');
const postRouter = require('./routes/post');
const db = require('./models');
const passportConfig = require('./passport');
const session = require('express-session');
const cookieParser = require('cookie-parser');
const passport = require('passport');
const dotenv = require('dotenv');

dotenv.config();
const app = express();

db.sequelize.sync()
.then(() => {console.log('db 연결 성공');})
.catch(console.error);
passportConfig();

app.use(cors({
  origin: '*',
}));
app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
  saveUninitialized: false,
  resave: false,
  secret: process.env.COOKIE_SECRET,
  cookie: { //2번째 이유를 해결하고자 추가한 코드
    httpOnly: true,
    secure: false,
  }
}));
app.use(passport.initialize());
app.use(passport.session());

app.get('/', (reqres=> {
  res.send('hello express');
});

app.use('/user'userRouter);
app.use('/post'postRouter);

app.listen(3065, () => {
  console.log('서버 실행 중');
});

항상 감사합니다.

 

nodejs react express redux Next.js

답변 8

0

비오

바로 다음 강의에 있는 내용이었네요 ^^ ;;;;  앞으로 다음강의도 확인해봐야겠어요...ㅎ.ㅎㅎ

0

비오

이렇게하니까 되네요!ㅠㅠ 감사합니다!

0

제로초(조현영)

함수 자리를 정확히 지키셔야 합니다. 데이터가 없으면 null이라도 넣어야합니다. 강좌에서 설명을 한 부분인데 왠지 그 강좌까지 진도 나가기 전이신 것 같네요.

0

비오

콘솔은 routes/post.js에서

router.post('/'async (reqresnext=> {
  console.log(req.user);
  try {
    const post = await Post.create({
      content: req.body.content,
      UserId: req.user.id,
    });
    res.status(201).json(post);
  } catch (error) {
    console.error(error);
    next(error);
  }
});

이렇게 콘솔을 찍었고, 서버쪽 콘솔에서 

undefined

TypeError: Cannot read property 'id' of undefined

이렇게 떴어요.

0

비오

아직 강의에서 morgan 설정 하는 부분 안나왔어요, 이후에 강의를 듣다보면 해결이 될까요?ㅜㅜ

넵 로그아웃은 데이터가 없어서 

function logOutAPI() {
  return axios.post('/user/logout', { withCredentials: true });
}

이렇게 넣었어요.

0

제로초(조현영)

서버에 morgan 설정은 안 하셨나요? 어떤 라우터에 어떤 콘솔인지 확인하시면 더 도움이될듯합니다.

그리고 보여주신 건 로그인이고 로그아웃도 withCredentials하셨나요?

0

비오

function logInAPI(data) {
  return axios.post('/user/login'data, { withCredentials: true });
}

이렇게 작성했는데도 여전히 로그아웃 시 401에러가 떠요ㅜㅜ (cors에서도 credential 설정했어요)

post라우터에서도  isLoggedIn 미들웨어빼고 req.user을 콘솔로 찍어보면 여전히 undefined가 뜹니다.

0

제로초(조현영)

프론트에서 서버로 쿠키를 안 보내서 그럴 수 있습니다. axios 요청에 withCredentials: true 넣어야 보냅니다.

넥스트 버젼 질문

0

79

2

로그인시 401 Unauthorized 오류가 뜹니다

0

91

1

무한 스크롤 중 스크롤 튐 현상

0

178

1

특정 페이지 접근을 막고 싶을 때

0

105

2

createGlobalStyle의 위치와 영향범위

0

97

2

인라인 스타일 리렌더링 관련

0

93

2

vsc 에서 npm init 설치시 오류

0

150

2

nextjs 15버전 사용 가능할까요?

0

160

1

화면 새로고침 문의

0

124

1

RTK에서 draft, state 차이가 있나요?

0

156

2

Next 14 사용해도 될까요?

0

454

1

next, node 버전 / 폴더 구조 질문 드립니다.

0

350

1

url 오류 질문있습니다

0

212

1

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

0

382

1

sudo certbot --nginx 에러

0

1282

2

Minified React error 콘솔에러 (hydrate)

0

472

1

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

0

249

1

프론트서버 배포 후 EADDRINUSE에러 발생

0

330

1

npm run build 에러

0

520

1

front 서버 npm run build 중에 발생한 에러들

0

384

1

서버 실행하고 브라우저로 들어갔을때 404에러

0

339

2

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

0

289

1

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

0

243

2

해시태그 검색에서 throttle에 관해 질문있습니다.

0

203

1