안녕하세요 회원가입 후 메인페이지 이동 질문입니다

[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지

카카오로 로그인하기

작성

566

회원가입 성공 후 메인 페이지로 이동할려고 합니다

템플릿 엔진을 쓰지 않아 res.sendFile로 메인 페이지로

이동하려고 합니다

user: req,user를 이렇게 작성하면 오류가 생겨

어떻게 작성해야 할지 잘 모르겠습니다

routes/page.js

const express = require('express');

const router = express.Router();

router.use((req, res, next)=>{
res.locals.user = null;
next();
})

router.get('/', (req, res)=>{
res.sendFile(path.join(__dirname, 'static/login_html/login.html'))
});

router.get('/', (req, res)=>{
res.sendFile(path.join(__dirname, 'static/login_html/join.html'))
});

router.get('/', (req, res)=>{
res.sendFile(path.join(__dirname, 'static/login_html/find.html'))
});

회원가입성공하면 이 페이지가 로드 되야합니다
router.get('/', (req, res, next)=>{
res.sendFile(path.join(__dirname, 'static/mainpage_html/mainpage.html'))
,req.user
})
user: req.user는 빨간줄이 생깁니다
 

module.exports = router;

오류 코드는 그냥 get요청이 실패했다고만 와서

뭐가 틀렸는지 유추하기가 어렵네요

nodejs mysql mongodb Sequelize

답변 5

제로초(조현영)

지식공유자

저기에 , req.user가 왜 들어가나요? sendFile에는 데이터를 보낼 수 없습니다. 그럴 때 템플릿엔진 쓰는겁니다.

김윤진

질문자

그러면 , req.user만 하기 위해서

템플릿 엔진 사용하고 나머지는 html 그대로

사용해도 괜찮나요?

제로초(조현영)

지식공유자

네 괜찮습니다. 근데 나머지는 그대로라는게 불안하네요 ㅎㅎ

김윤진

질문자

안녕하세요 질문 부탁드립니다

passport.serializeUser((user, done)=>{
//user id만 뽑아서 done 해준다
console.log("로그인네번째")
// done(null, user.id); 
console.log(user.id)
done(null, user.id); //세션에 user의 id만 저장
//done이 실행되면 auth로 간다
});

passport serialize하면

session에 id:1, 'connect.sid' .....이렇게 저장된다고

하셨는데

이렇게 id가 들어가지 않습니다

console에서 찍어보면

Executing (default): SELECT `id`, `number`, `password`, `birth`, `provider`, `gender`, `createdAt`, `updatedAt`, `deletedAt` FROM `Users` AS `User` WHERE (`User`.`deletedAt` IS NULL AND `User`.`number` = '01012341234');

로그인세번째

로그인네번째

로그인다섯번째

POST /auth/login 200 277.213 ms - 25

id가 잘 찍히긴 합니다

왜 그런건가요?

혹시 리다이렉트 안 써서 그런건가요?

추가로 유저의 마이 페이지로 들어갈 때 세션에 있는 정보를 통해 deserialize 로 해서 유저 정보를 마이페이지에 보여주는 것

로그인 하면 마이페이지 프론트로 유저 정보 보내줘서

마이페이지 들어가면 유저 정보를 보여주게 하는 것

둘 다 가능한건가요?

제로초(조현영)

지식공유자

세션은 서버 메모리에 존재하는 것입니다. 쿠키가 아닙니다.

둘 다 가능합니다.

김윤진

질문자

안녕하세요

회원가입 성공하면 로그인페이지로 돌아가게 할려 합니다

그래서 로그인 url인 login_htnl.login.html을

redirect 했더니 304 뜨면서 성공했지만

페이지 이동은 되지 않았습니다

터미널에서도 304라고만 나오고

다만 network tap에서 status code가

304 not modified라고 나왔습니다 수정되지 않음

리다이렉트를 저렇게 하면 안 되는 건가요?

왜 페이지가 이동하지 않는건가요?

auth.js

router.post('/join', isNotLoggedIn, async(req, res, next)=>{
console.log(req)
const { number, password, birth, gender } = req.body;
try{
const exUser = await User.findOne({where : {number}});
if(exUser){
// return res.sendStatus(444);
return res.redirect('/join?error=exist');
}
const hash = await bcrypt.hash(password, 12);
await User.create({
number,
birth,
gender,
password: hash,
});
console.log('회원가입 성공')
return res.redirect('/login_html/login.html');
}catch(error){
console.error(error);
return next(error);
}
});

제로초(조현영)

지식공유자

url이 진짜 저게 맞나요? 로그인 라우터를 만드신 거 아닌가요? router.get(로그인주소) 그걸 입력하세요. 라우터 없이 html으로 하시는 거면 브라우저에 뜨는 주소를 입력하시고요.

김윤진

질문자

일단

페이지 라우터에 router.get(로그인주소) 을 바꾸고 실행 했더니

GET /login_html/login.html 304 뜨면서 성공하는데 페이지는 이동하지 않습니다

흠..뭐가 틀린걸까요?

app.js

app.use('/page', pageRouter);
app.use('/auth', authRouter);

page.js(페이지 라우터)

const express = require('express');
const { isLoggedIn, isNotLoggedIn } = require('./middlewears');

const router = express.Router();

router.use((req, res, next)=>{
res.locals.user = null;
next();
})

router.get('/login_html/login.html', isNotLoggedIn, (req, res)=>{
res.sendFile(path.join('static/login_html/login.html'))
});

router.get('/join', isNotLoggedIn, (req, res)=>{
res.sendFile(path.join('static/login_html/join.html'))
});

router.get('/find', isNotLoggedIn, (req, res)=>{
res.sendFile(path.join('static/login_html/find.html'))
});


router.get('/done',isLoggedIn, (req, res, next)=>{
res.sendFile(path.join('static/mainpage_html/mainpage.html'))
 
})

// router.get('/', (req, res) => {
// res.sendFile(__dirname, 'static/mainpage_html/profile.html')
// });


//로그인 페이지

module.exports = router;

auth.js (로그인/회원가입 라우터)

const express = require('express');
const passport = require('../passport');
const bcrypt = require('bcrypt');
const { isLoggedIn, isNotLoggedIn } = require('./middlewears');
const User = require('../models/user');

const router = express.Router();

router.post('/join', isNotLoggedIn, async(req, res, next)=>{
console.log(req)
const { number, password, birth, gender } = req.body;
try{
const exUser = await User.findOne({where : {number}});
if(exUser){
// return res.sendStatus(444);
return res.redirect('/join?error=exist');
}
const hash = await bcrypt.hash(password, 12);
await User.create({
number,
birth,
gender,
password: hash,
});
console.log('회원가입 성공')
return res.redirect('/login_html/login.html');
}catch(error){
console.error(error);
return next(error);
}
});

//프론트에서 로그인요청 보내면 이 라우터에 걸린다
router.post('/login', isNotLoggedIn, (req, res, next)=>{
console.log("로그인첫번째")
//(1)passport.authenticate('local',여기까지 실행되면 passport가 localstrategy를 찾는다
passport.authenticate('local', (authError, user, info)=>{
//(3)

console.log("로그인세번째")
if(authError){
console.error(authError);
return next(authError);
}
if(!user){
return res.redirect(`/?loginError=${info.message}`);
}
//로그인 성공한 경우 passport/index 로 간다
return req.login(user, (loginError)=> {
//(5) 최종적으로 로그인에러가 있나 확인한다
if(loginError){
console.error(loginError);
return next(loginError);
}
console.log("로그인다섯번째")
return res.redirect('/')
//여기서 세션쿠키를 브라우저로 보내준다
//그래서 그 다음 요청부터 세션 쿠키가 보내져서 서버가 요청을 누가 보냈는지 알 수 있게(로그인 상태)
//로그인 성공
 
})
})(req, res, next);//미들웨어 확장
})

router.get('/logout', isLoggedIn, (req, res)=>{
//로그아웃하면 서버에서 세션쿠키를 지운다
req.logout();
req.session.destroy();
// res.redirect('/');
})

module.exports = router;

제로초(조현영)

지식공유자

path.join 사용법이 완전히 틀렸습니다. 3강 강좌 다시 봐주세요.

김윤진

질문자

router.get('/login_html/login.html', isNotLoggedIn, (req, res)=>{
res.sendFile(path.join(__dirname, '/login.html'))
});

이거 맞지 않나요... 결과는 같습니다

그리고 한가지 궁금한게 있습니다

npm start해서 8880포트에서 서버 실행해서

예를들어 page라우터에 join페이지를 불러올려면

app.js

app.use('/page', pageRouter);

page.js

router.get('/join', isNotLoggedIn, (req, res)=>{
res.sendFile(path.join(__dirname, '/join.html'))
});

이렇게 했다면

url을 localhost8880/page/join 이렇게 하는게 왜 틀린건가요?

/page/join 이거는 redirect할 때 경로 같은거 의미하는 건가요?

localhost8880/login_html/join.html이렇게 해야 페이지가 불러와집니다

제로초(조현영)

지식공유자

__dirname은 현재 폴더입니다. 현재 폴더 안에 join.html이나 login.html이 없으니까요. 그 파일들이 있는 경로로 찾아가셔야 합니다. .이나 .. 사용해서요. 그런 주소 합쳐주는게 path.join이고요.

김윤진

질문자

전부 수정했습니다

전에는 localhost8880/login_html/login.html 이렇게 url을 작성했지만

이제 localhost8880/page/login 이렇게 동작합니다

하지만 회원가입 성공하고

 
return res.redirect('/page/login');

이 동작은 여전히 304가 뜹면서 페이지가 이동하지 않습니다

터미널에서는 304만 출력합니다

로그인도 마친가지로 200 성공하고 페이지는 이동하지 않습니다

page.js(페이지 라우터)

const express = require('express');
const path = require('path');
const { isLoggedIn, isNotLoggedIn } = require('./middlewears');

const router = express.Router();

router.use((req, res, next)=>{
res.locals.user = null;
next();
})

router.get('/login', isNotLoggedIn, (req, res)=>{
res.render(path.join(__dirname,'..','/static','/login_html','/login.html'))
});

router.get('/join', isNotLoggedIn, (req, res)=>{
res.sendFile(path.join(__dirname, '..','/static','/login_html','/join.html'))
});

router.get('/find', isNotLoggedIn, (req, res)=>{
res.sendFile(path.join(__dirname, '..','/static','/login_html','/find.html'))
});


router.get('/main',isLoggedIn, (req, res, next)=>{
res.sendFile(path.join(__dirname, '..','/static','/mainpage_html','/mainpage.html'))
 
})

// router.get('/', (req, res) => {
// res.sendFile(__dirname, 'static/mainpage_html/profile.html')
// });


//로그인 페이지

module.exports = router;

제로초(조현영)

지식공유자

저기 네트워크탭에서 login요청 preview 눌러보면 뭐가 보이시나요?

김윤진

질문자

css,js 적용이 안되는 것 같습니다

그리고 로그인하면 마찬가지로 이동하지는 않는데 로그인된 상태로 변합니다

제로초(조현영)

지식공유자

css는 경로문제일겁니다. 로그인된 상태라느누것은.어떻게 판단하셨나요?

김윤진

질문자

로그인하고 페이지 이동은 되지 않지만 isLoggedIn으로 설정한 메인페이지로

제가 url 검색해서 들어가면 들어가집니다

그리고 isNotLoggedIn으로 설정한 로그인페이지나 회원가입 페이지를

검색하면 에러 창으로 이동합니다

페이지 이동은 왜 안 될까요...

제로초(조현영)

지식공유자

혹시 로그인 요청이 ajax요청인가요? ajax요청은 redirect가 안됩니다.

김윤진

질문자

axios입니당

제로초(조현영)

지식공유자

axiso는 ajax입니다. redirect 안 됩니다. 프론트에서 location.href = '서버주소' 해야 해요.

김윤진

질문자

로그인 성공하면 특정 메세지를 프론트로 보내서 로그인 버튼을 누를 때 그 메세지가 온다면 버튼이 동작하도록 하면 되는 건가요?

axios말고 뭐 써야 리다이렉트 되는 건가요?

제로초(조현영)

지식공유자

그냥 html의 form 쓰셔야합니다. axios로 할거면 then에서 location.href 하셔야하고요

김윤진

질문자

.then으로 해서 성공했습니다!

눈물이 다 나네욬ㅋㅋ

감사합니다!

김윤진

질문자

안녕하세요

회원가입 성공하면 다시 로그인 페이지로 돌아갈려고 합니다

auth.js

const express = require('express');
const passport = require('../passport');
const bcrypt = require('bcrypt');
const { isLoggedIn, isNotLoggedIn } = require('./middlewears');
const User = require('../models/user');

const router = express.Router();

router.post('/join', isNotLoggedIn, async(req, res, next)=>{
console.log(req)
const { number, password, birth, gender } = req.body;
try{
const exUser = await User.findOne({where : {number}});
if(exUser){
return res.redirect('/join?error=exist');
}
const hash = await bcrypt.hash(password, 12);
await User.create({
number,
birth,
gender,
password: hash,
});
console.log('회원가입 성공')
return res.redirect('/page/login');
}catch(error){
console.error(error);
return next(error);
}
});

app.js

app.use('/page', pageRouter);
app.use('/auth', authRouter);

page.js

const express = require('express');
const { isLoggedIn, isNotLoggedIn } = require('./middlewears');

const router = express.Router();

router.use((req, res, next)=>{
res.locals.user = null;
next();
})

router.get('/login', isNotLoggedIn, (req, res)=>{
res.sendFile(path.join(__dirname, 'static/login_html/login.html'))
});