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

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

카카오로 로그인하기

21.09.18 21:31 작성

555

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

템플릿 엔진을 쓰지 않아 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

제로초(조현영)

지식공유자

2021. 09. 18. 21:38

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

김윤진

질문자

2021. 09. 18. 21:56

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

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

사용해도 괜찮나요?

제로초(조현영)

지식공유자

2021. 09. 18. 23:28

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

김윤진

질문자

2021. 09. 30. 20:43

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

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 로 해서 유저 정보를 마이페이지에 보여주는 것

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

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

둘 다 가능한건가요?

제로초(조현영)

지식공유자

2021. 09. 30. 21:54

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

둘 다 가능합니다.

김윤진

질문자

2021. 09. 22. 21:12

안녕하세요

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

그래서 로그인 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);
}
});

제로초(조현영)

지식공유자

2021. 09. 22. 21:27

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

김윤진

질문자

2021. 09. 24. 20:44

일단

페이지 라우터에 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;

제로초(조현영)

지식공유자

2021. 09. 24. 20:52

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

김윤진

질문자

2021. 09. 24. 21:28

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이렇게 해야 페이지가 불러와집니다

제로초(조현영)

지식공유자

2021. 09. 24. 21:51

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

김윤진

질문자

2021. 09. 26. 19:52

전부 수정했습니다

전에는 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;

제로초(조현영)

지식공유자

2021. 09. 26. 23:37

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

김윤진

질문자

2021. 09. 27. 19:03

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

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

제로초(조현영)

지식공유자

2021. 09. 27. 20:57

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

김윤진

질문자

2021. 09. 27. 21:08

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

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

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

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

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

제로초(조현영)

지식공유자

2021. 09. 27. 21:51

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

김윤진

질문자

2021. 09. 27. 21:57

axios입니당

제로초(조현영)

지식공유자

2021. 09. 27. 23:08

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

김윤진

질문자

2021. 09. 28. 07:06

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

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

제로초(조현영)

지식공유자

2021. 09. 28. 10:57

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

김윤진

질문자

2021. 09. 28. 20:38

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

눈물이 다 나네욬ㅋㅋ

감사합니다!

김윤진

질문자

2021. 09. 20. 21:17

안녕하세요

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

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'))
});