session 추가 공부 / 비구조할당문 /switch문 /
session 담는 부분
req.session.kakao=user.data;
구글,네이버,깃헙, 자체 로그인 등등..로그인이 4가지 방식 이상으로 되고 각각 사이트마다 주는 결과도 다르기 때문에 잘 모아서 처리해야함.
// req.session.kakao=user.data;
const authData = {
...token.data,
...user.data,
}
res.redirect('/');
})
새로 배우는 문법 비구조 할당문
* 비구조 할당문이란,, 배열, 객체 모두 사용 가능
좋은 점. 객체를 내 마음대로 바꿔서 저장 가능
복사할 때 장점이 많음.
굳이 비구조 할당문 쓰는 이유? -> 깊은 복사를 위해 사용한다. (값을 가져오지만, 원본의 값이 바뀌더라도 내가 복사하는 시점의 값을 변함없이 이용하고 싶을 때 )
let arr2 = [1,2,3];
let copy = arr2;
let copy2 = [...arr2];
arr2[0] = 'ingoo'
console.log(arr2)
console.log(copy) //내용이 ㅂㅏ뀜 // 얕은 복사
console.log(copy2) //원래 arr 내용. // 깊은 복사
메모리를 창조했냐 안했냐
얕은 복사 : arr2 안에 있는걸 그대로 복사하겠다. 변수 값을 가져오겠다. 내용이 바뀌면 바뀐걸 가져옴
깊은 복사 : 해당 [1,2,3]의 값을 가져온 것. 변수 내용이 바뀌어도 그대로 원 요소를 가지고 있음.
const authData = {
...token.data, //깊은 복사
...user.data,
}
res.redirect('/');
})
그래서 요것도 깊은 복사 한것.,.,
아래 req.session.authData 라는 속성에 아래처럼 쓰고 console.log로 한번 보기 !
// req.session.kakao=user.data;
const authData = {
...token.data, //깊은 복사
...user.data,
}
req.session.authData = {
//해당 로그인한 내용으로다가
["kakao"]:authData,
}
console.log(req.session)
res.redirect('/');
})
session안에는 cookie값이 존재
이제 ["kakao"] 부분처럼 네이버, local, google 등 의 공간을 따로 만들어 관리할 것
비구조할당문 + 내용 이쁘게 만들기
req 안에 있는 객체 session, query 변수에 담고
query안에 code 객체도 또 code 변수에 담아서 코드 줄이기
즉, req.session => session , req.query=>query / req.query.code => code
app.get('/auth/kakao/callback', async (req,res)=>{
const {session,query} = req; //req안에 session,query라는 객체가 있는데 저기에 담음
const {code} = query; //req.query.code => code 변수에 넣은것뿐,,
//req.session -> session 으로 줄임
let token;
try{
token=await axios({
method:'POST',
url:'https://kauth.kakao.com/oauth/token',
headers:{
'content-type':'application/x-www-form-urlencoded'
},
data:qs.stringify({
grant_type:'authorization_code',
client_id:kakao.clientID,
client_secret:kakao.clientSecret,
redirectUri:kakao.redirectUri,
code, //이전것 : code:req.query.code,
})
})
}catch(err){
res.json(err.data)
}
let user;
try{
user=await axios({
method:'GET',
url:'https://kapi.kakao.com/v2/user/me',
headers:{
Authorization:`Bearer ${token.data.access_token}`
}
})
}catch(err){
res.json(err.data)
}
// req.session.kakao=user.data;
const authData = {
...token.data, //깊은 복사
...user.data,
}
session.authData = { //이전 것 : req.session.authData = {~}
//해당 로그인한 내용으로다가
["kakao"]:authData,
}
console.log(session) //이전 것 : req.session
res.redirect('/');
})
2교시에는 info 쪾 ~
=====================================2교시===================================
info 수정하기
session부분 console
저 kakao:{} 부분이 따로 kakao만 관리하는 거
kakao값 가져오기
app.get('/auth/info', (req,res)=>{
const provider = Object.keys(req.session.authData)[0] //Object안에 keys()라는 매서드 사용
console.log(provider);
res.render('info.html');
})
req.session.authData.kakao 도 가능
if vs switch
if 문 비교연산자 boolean 반드시 필요
switch 안에 드러간 값이 무엇 이 냐
server.js
app.get('/auth/info', (req,res)=>{
const provider = Object.keys(req.session.authData)[0] //Object안에 keys()라는 매서드 사용
console.log(provider);
let userinfo={}
switch(provider){
case "kakao" :
userinfo={
userid:req.session.authData[provider].properties.nickname,
}
break;
}
res.render('info.html',{
userinfo,
});
})
provider 이 변수의 값이 kakao일 때 실행하고 나가라 ~
info.html
당신의 id는 {{userinfo.userid}}입니다.
프로필 사진
<!--<img src="{{profile_image}}">-->
server on -> localhost:3000 로그인 -> 회원정보 -> 내용이 뜸 !
req.session 안의 authData 객체를 변수에 담아서 코드 줄이기
app.get('/auth/info', (req,res)=>{
const {authData}=req.session;
const provider = Object.keys(authData)[0] //Object안에 keys()라는 매서드 사용
console.log(provider);
let userinfo={}
switch(provider){
case "kakao" :
userinfo={
userid:authData[provider].properties.nickname,
}
break;
}
res.render('info.html',{
userinfo,
});
})
Switch 문이란 ?
if 문에서 == 만 활용할 때, 같다 표현이 복수일 때
가독성이 좋음
기능적인 면에는 차이가 크게 없
console.log('switch문 이해하기');
let gender = '남자';
if(gender=='남자'){
console.log(1);
}else if (gender=='여자'){
console.log(2);
}
switch(gender){
case '남자' :
console.log(1);
break;
case '여자' :
console.log(2);
}
break 용이함
default 값 : if문의 else{} 기능
If vs switch 조금 다른 점
switch 문은break으로 꼭 끊어야 아래쪽으로 더 안내려감
if 는 break; 쓸 수 있지만 굳이 안써도 continue; 되지 않음
switch 문 설명 및 예제
https://blckchainetc.tistory.com/190
로그인 여부 체크
const authMiddleware = (req,res,next)=>{
const {session} = req;
if(session.authData==undefined){
console.log('로그인이 안되어 있음 ');
res.redirect('/?msg=로그인 안되어 있음')
}else{
console.log('로그인 되어 있음 ')
next();
}
}
app.get('/auth/info',authMiddleware, (req,res)=>{
const {authData}=req.session;
const provider = Object.keys(authData)[0] //Object안에 keys()라는 매서드 사용
auth/info 들어오면 -> authMiddleware 로 감 -> session값 존재 안하면 돌려보내기 -> 있으면 console찍고 next() -> /auth/info아래쪽 다 실행
server on -> 로그인 안하고 회원정보 누르면 -> 로그인 안되어 있음 나옴
로그인 하고 회원정보 누르면 - > 로그인 되어 있음 console.log에 나옴.
카카오 회원 탈퇴 ? data를 통해
views - index.html 버튼 추가
<a href="/auth/kakao">카카오 로그인</a>
<a href="/auth/info">회원정보</a>
<a href="/auth/kakao/unlink">카카오 탈퇴</a>
위의 /auth/kakao/unlink를 받는 라우터 만들기
server.js
app.get('/auth/kakao/unlink',async(req,res)=>{
const {session} = req;
const {access_token} = session.authData.kakao;
console.log(access_token);
//요청 해야함 -> axios 이용해서 ! -> asynt & await 달아줘
//내용 담아서 kakao에 보내줘야해 ' 이제 회원 탈퇴 할거야~'
//카카오가 응답 줄거야
let unlink;
try{ //axios 요청 실패를 위해 try catch문 씀
unlink = await axios({ //unlink 변수에 요청값 담음
//await : axios 의 값 Promise 값이 resolved 뜰 때까지 기다리겠다.
method:'POST',
url:'https://kapi.kakao.com/v1/user/unlink', //여기로 보낼거다
headers: {
Authorization:`Bearer ${access_token}`
}
})
}catch(err){
res.json(err.data)
}
console.log(unlink)
})
access 토큰 활용하자 변수에 담아서 사용한것 !
<- 요 부분
server on -> 로그인 -> 탈퇴 눌러보기
우리가 필요한 값
-> data.id
data.id 값만 나오게 console.log 수정
console.log(unlink.data)
session 삭제 코드 추가
app.get('/auth/kakao/unlink',async(req,res)=>{
const {session} = req;
const {access_token} = session.authData.kakao;
console.log(access_token);
//요청 해야함 -> axios 이용해서 ! -> asynt & await 달아줘
//내용 담아서 kakao에 보내줘야해 ' 이제 회원 탈퇴 할거야~'
//카카오가 응답 줄거야
let unlink;
try{
unlink = await axios({
method:'POST',
url:'https://kapi.kakao.com/v1/user/unlink',
headers: {
Authorization:`Bearer ${access_token}`
}
})
}catch(err){
res.json(err.data)
}
console.log(unlink.data)
const {id} = unlink.data; //unlink안 data안의 객체 id를 변수 id에 담아 사용
// 요 값이 떨어진 이유 : kakao에서 이미 요청 아이디를 탈퇴 완료 시킨 것 (카카오 측에서)
// 우리쪽에서 할 일 : session 지워주기
if(session.authData["kakao"].id==id){
delete session.authData;
}
res.redirect('/?msg=로그아웃 되었습니다.')
})
server on -> 로그인 -> 탈퇴 -> url 변화값 쳌
msg get 값으로 보낸거 보완해보기
server.js ('/') 부분 추가
app.get('/', (req,res)=>{
const {msg} = req.query;
res.render('index.html',{
msg,
})
})
index.html
<a href="/auth/kakao">카카오 로그인</a>
<a href="/auth/info">회원정보</a>
<a href="/auth/kakao/unlink">카카오 탈퇴</a>
{% if msg %}
<script type = "text/javascript">
alert("{{msg}}")
</script>
{% endif %}
server on -> alert 뜸.
ㅇ
우리가 만든 middleware 방금 만든 unlink 쪽에 달기
app.get('/auth/kakao/unlink',authMiddleware ,async(req,res)=>{
->로그인 안된 상태에서 unlink 회원 탈퇴 누르면 '로그인 안되어 있씁니다' 나오도록
-> middleward 쓰면 js 로 일일이 안써도 됨 !
local login 만들기
views - index.html
<a href="/auth/kakao">카카오 로그인</a>
<a href="/auth/info">회원정보</a>
<a href ="/login">로그인</a>
<a href="/auth/kakao/unlink">카카오 탈퇴</a>
{% if msg %}
<script type = "text/javascript">
alert("{{msg}}")
</script>
{% endif %}
server.js login 추가
app.get('/', (req,res)=>{
res.render('login.html');
})
views - login.html 생성, 코드 추가
<form action ="/login" method="post">
<input type="text" name="userid">
<input type="password" name="userpw">
<input type="submit" value="로그인">
</form>
server.js에 post로 받는 /login 작성 -> bodyparser 설치
$npm install body-parser
server.js bodyparser 가져오기
const bodyParser=require('body-parser');
app.use(bodyParser.urlencoded({extended:false,}));
server on -> 로그인 -> 아이디 'root', 비번 'root' -> 성공 / else 실패
이제 오류고치기
info 쪽에 아직 kakao 밖에 없음
로그인하고 회원정보 보기 하면 안나와 -> info 에 local 추가
app.get('/auth/info',authMiddleware, (req,res)=>{
const {authData}=req.session;
const provider = Object.keys(authData)[0] //Object안에 keys()라는 매서드 사용
let userinfo={}
switch(provider){
case "kakao" :
userinfo={
userid:authData[provider].properties.nickname,
}
break;
case "local" :
userinfo ={
userid:authData[provider].userid,
}
break;
}
res.render('info.html',{
userinfo,
});
})
server on -> 로그인 -> 회원정보 들어가보면 이제 잘 뜸 !
로그인이 되었을 때 보이는 버튼들, session값이 없을 ㄸㅐ 보이는 버튼들 구분하기
server.js
app.get('/', (req,res)=>{
const {msg} = req.query;
console.log(req.session.authData);
res.render('index.html',{
msg,
loginInfo:req.session.authData,
})
})
server on -> 카카오 로그인 -> local 로그인 하면 login이 덮어씌워짐.
이런 경우 따로따로 (?) 뭔갈 하는게 좋다고 함. 근데 시간부족이면 다시 로그인 버튼 안보이게 만들기
index.html
{% if loginInfo ==undefined %}
<!--로그인 처리가 안됐을경우-->
<a href="/auth/kakao">카카오 로그인</a>
<a href ="/login">로그인</a>
{% else %}
<!--로그인 처리 됐을경우-->
<a href="/auth/info">회원정보</a>
<a href="/auth/kakao/unlink">카카오 탈퇴</a>
{% endif %}
{% if msg %}
<script type = "text/javascript">
alert("{{msg}}")
</script>
{% endif %}
server on -> 로그인해서 check !
local 로그아웃 버튼 만들기 -> 하나의 로그아웃 버튼으로 둘다 가능하게 만들기
index.html
{% if loginInfo ==undefined %}
<!--로그인 처리가 안됐을경우-->
<a href="/auth/kakao">카카오 로그인</a>
<a href ="/login">로그인</a>
{% else %}
<!--로그인 처리 됐을경우-->
<a href="/auth/info">회원정보</a>
<a href="/auth/logout">로그아웃</a>
<!-- <a href="/auth/kakao/unlink">카카오 탈퇴</a> -->
{% endif %}
{% if msg %}
<script type = "text/javascript">
alert("{{msg}}")
</script>
{% endif %}
server.js ('/auth/logout) kakao/ local 구분 하기
app.get('/auth/logout', (req,res)=>{
const {session} = req;
const {authData} = session;
const provider = Object.keys(authData)[0];
switch(provider){
case "local" :
//local 로그아웃 redirecteh 되지만 간단하니까
delete session.authData;
res.redirect('/?msg=로그아웃 되었습니다.')
break;
case "kakao" :
//카카오일 때 로그아웃
res.redirect('/auth/kakao/unlink')
break;
}
})
server on -> check !
전체 코드
server.js
const express=require('express');
const nunjucks=require('nunjucks');
const axios=require('axios');
const qs=require('qs');
const session=require('express-session');
const { urlencoded } = require('express');
const bodyParser=require('body-parser');
const app = express();
nunjucks.configure('views', {
express:app,
})
app.set('view engine','html');
app.use(bodyParser.urlencoded({extended:false,}));
app.use(session({
secret:'aa',
resave:true,
secure:false,
saveUninitialized:false,
}))
const kakao={
clientID : 'f219cecc72f1eb145e7aawedsfsdfzxbdfc0e323f',
clientSecret : 'ucuZ7zI3KKaeMiXZsdcsfwdfbdfgdaefsdvsnGBvi',
redirectUri : 'http://localhost:3000/auth/kakao/callback'
}
app.get('/', (req,res)=>{
const {msg} = req.query;
console.log(req.session.authData);
res.render('index.html',{
msg,
loginInfo:req.session.authData,
})
})
app.get('/auth/kakao', (req,res)=>{
const kakaoAuthURL = `https://kauth.kakao.com/oauth/authorize?client_id=${kakao.clientID}&redirect_uri=${kakao.redirectUri}&response_type=code&scope=profile,account_email`;
res.redirect(kakaoAuthURL);
})
app.get('/auth/kakao/callback', async (req,res)=>{
const {session,query} = req; //req안에 session,query라는 객체가 있는데 저기에 담음
const {code} = query; //req.query.code => code 변수에 넣은것뿐,,
//req.session -> session 으로 줄임
let token;
try{
token=await axios({
method:'POST',
url:'https://kauth.kakao.com/oauth/token',
headers:{
'content-type':'application/x-www-form-urlencoded'
},
data:qs.stringify({
grant_type:'authorization_code',
client_id:kakao.clientID,
client_secret:kakao.clientSecret,
redirectUri:kakao.redirectUri,
code, //이전것 : code:req.query.code,
})
})
}catch(err){
res.json(err.data)
}
let user;
try{
user=await axios({
method:'GET',
url:'https://kapi.kakao.com/v2/user/me',
headers:{
Authorization:`Bearer ${token.data.access_token}`
}
})
}catch(err){
res.json(err.data)
}
// req.session.kakao=user.data;
const authData = {
...token.data, //깊은 복사
...user.data,
}
session.authData = { //이전 것 : req.session.authData = {~}
//해당 로그인한 내용으로다가
["kakao"]:authData,
}
console.log(session)
res.redirect('/');
})
app.get('/login', (req,res)=>{
res.render('login.html');
})
app.post('/login', (req,res)=>{
console.log(req.body);
const {session,body} =req;
const {userid,userpw} = body;
//userid, userpw 값 가지고 db 조회 -> 일단 가정 db처리 되었다고 가정
//userid root userpw root일때 성공하는 시나리오 작성
if(userid =='root' && userpw == 'root'){
//로그인 성공 -> session 에 값을 담기
const data = {
userid,
}
session.authData = { //session에 내용 담기
["local"] : data,
}
res.redirect('/?msg = 로그인 성공!');
}else{
//로그인 실패
res.redirect('/?msg=아이디와 패스워드 확인해주세요')
}
})
const authMiddleware = (req,res,next)=>{
const {session} = req;
if(session.authData==undefined){
console.log('로그인이 안되어 있음 ');
res.redirect('/?msg=로그인 안되어 있음')
}else{
console.log('로그인 성공 ')
next();
}
}
app.get('/auth/info',authMiddleware, (req,res)=>{
const {authData}=req.session;
const provider = Object.keys(authData)[0] //Object안에 keys()라는 매서드 사용
let userinfo={}
switch(provider){
case "kakao" :
userinfo={
userid:authData[provider].properties.nickname,
}
break;
case "local" :
userinfo ={
userid:authData[provider].userid,
}
break;
}
res.render('info.html',{
userinfo,
});
})
app.get('/auth/kakao/unlink',authMiddleware ,async(req,res)=>{
const {session} = req;
const {access_token} = session.authData.kakao;
console.log(access_token);
//요청 해야함 -> axios 이용해서 ! -> asynt & await 달아줘
//내용 담아서 kakao에 보내줘야해 ' 이제 회원 탈퇴 할거야~'
//카카오가 응답 줄거야
let unlink;
try{
unlink = await axios({
method:'POST',
url:'https://kapi.kakao.com/v1/user/unlink',
headers: {
Authorization:`Bearer ${access_token}`
}
})
}catch(err){
res.json(err.data)
}
console.log(unlink.data)
const {id} = unlink.data; //unlink안 data안의 객체 id를 변수 id에 담아 사용
// 요 값이 떨어진 이유 : kakao에서 이미 요청 아이디를 탈퇴 완료 시킨 것 (카카오 측에서)
// 우리쪽에서 할 일 : session 지워주기
if(session.authData["kakao"].id==id){
delete session.authData;
}
res.redirect('/?msg=로그아웃 되었습니다.')
})
app.get('/auth/logout', (req,res)=>{
const {session} = req;
const {authData} = session;
const provider = Object.keys(authData)[0];
switch(provider){
case "local" :
//local 로그아웃 redirecteh 되지만 간단하니까
delete session.authData;
res.redirect('/?msg=로그아웃 되었습니다.')
break;
case "kakao" :
//카카오일 때 로그아웃
res.redirect('/auth/kakao/unlink')
break;
}
})
app.listen(3000,()=>{
console.log('server start port: 3000')
})
views - index.html
{% if loginInfo ==undefined %}
<!--로그인 처리가 안됐을경우-->
<a href="/auth/kakao">카카오 로그인</a>
<a href ="/login">로그인</a>
{% else %}
<!--로그인 처리 됐을경우-->
<a href="/auth/info">회원정보</a>
<a href="/auth/logout">로그아웃</a>
<!-- <a href="/auth/kakao/unlink">카카오 탈퇴</a> -->
{% endif %}
{% if msg %}
<script type = "text/javascript">
alert("{{msg}}")
</script>
{% endif %}
views - login.html
<form action ="/login" method="post">
<input type="text" name="userid">
<input type="password" name="userpw">
<input type="submit" value="로그인">
</form>
views-info.html
당신의 id는 {{userinfo.userid}}입니다.
프로필 사진
<!--<img src="{{profile_image}}">-->
consle.log 다 지우기
axios 대신 js 내장 객체 fetch 로 해보기
fetch 의 결과값 promise
server.js
login2 새로 생성
app.get('/login2',(req,res)=>{
console.log(req.headers);
res.send('ok')
})
login.html
<form action ="/login" method="post">
<input type="text" name="userid">
<input type="password" name="userpw">
<input type="submit" value="로그인">
</form>
<button id ="req" >요청테스트</button>
<span class="root">
</span>
<script type="text/javascript">
const btn = document.querySelector('#req');
btn.addEventListener('click',()=>{
console.log('req check');
//첫번째 인자값, 두번째 인자값 optional
fetch('http://localhost:3000/login2',{
method:'GET' ,
}) //promise object
.then(data=>{
console.log(data);
})
})
</script>
header란?
요청을 보낼 때 req -> headers / body 가 부분들이 있다.
req -> client -> server 보낸 요청
console.log 찍힌 data 내용에
accept : */* -> 모든 사용자 가능
referer : 내가 정확히 어떤 url인가
*HTTP 리퍼러를 정의한 RFC에서 'referrer'를 'referer'라고 잘못 친 것에서 기인하여 HTTP 리퍼러는 'HTTP referer'라고 불린다.
응답 내용을 바꿔서 보내는걸 해보기
app.get('/login2',(req,res)=>{
console.log(req.headers);
res.setHeader('Content-Type', 'application/x-www-form-urlencoded')
res.send('ok')
})
-> 안됨
-> 아래처럼 ㄱ ㄱ
응답이 application json으로 바뀜
문서를 주고 받을 때는 content type이 무엇인지 header에서 내용을 정의해서 보내기
응답에서 보낸 body값이 저 'ok' 부분이다
header : 내가 너희한테 어떤 데이터들로 값을 줄거야 라고 정의body: 실질적인 값을 담는 곳
server.js
app.get('/login2',(req,res)=>{
console.log(req.headers);
//res.setHeader('Content-Type', 'application/x-www-form-urlencoded')
console.log(req.get('user-agent'));
res.json({
test:'ok',
})
})
header에서 내가 사용하고 있는 윈도우, 브라우저 정보를 줌
header에 내용 담겨서 body 를 조작한다 (?)
login.html 에서 data console.log 확인
우리가 원하는 값은 boy 내용
status : 200 = 성공했어 뜻
console.log에는 조금 다른 정보 -> 잘 보면 body에 있긴함. 내용 꺼내오기 ->
요청 완료되면 처리결과에 대한 객체 반환 함
1. 요청에 대한 객체 반환
2. promise 로 반환
body에 있는 내용 확인 방법
login.html
<script type="text/javascript">
const btn = document.querySelector('#req');
btn.addEventListener('click',()=>{
console.log('req check');
//첫번째 인자값, 두번째 인자값 optional
fetch('http://localhost:3000/login2',{
method:'GET' ,
}) //promise object
.then(data=>{ // 처리결과 객체를 반환
console.log(data);
return data.json()
})
.then(json=>{ // json 인자값 받고 그걸 console.log하는거
console.log(json);
})
})
</script>
console.log -> test ok 뜸
login.html
<script type="text/javascript">
const btn = document.querySelector('#req');
btn.addEventListener('click',()=>{
console.log('req check');
//첫번째 인자값, 두번째 인자값 optional
fetch('http://localhost:3000/login2',{
method:'GET' ,
}) //promise object
.then(data=>{ // 처리결과 객체를 반환
console.log(data);
return data.json()
})
.then(json=>{ // json 인자값 받고 그걸 console.log하는거
console.log(json);
json.test
const root = document.querySelector('.root');
root.innerHTML = json.test;
})
})
</script>
server on -> check
실패로 만들기
app.get('/login2',(req,res)=>{
console.log(req.headers);
//res.setHeader('Content-Type', 'application/x-www-form-urlencoded')
console.log(req.get('user-agent'));
//req.set('content-type','application/x-www-form-urlencoded');
res.status(400).json({text:'error'});
})
상태 코드 header영역에서 status 값이 200대면 성공 300~400 대는 에러
다시 status - 200으로 바꾸면 console.log ok뜸
header정보를 우리가 임의대로 추가해서 넣기
post값 보내듯이 header도 우리가 변경해서 보낼 수 있다.
server.js
app.get('/login2',(req,res)=>{
console.log(req.headers);
//res.setHeader('Content-Type', 'application/x-www-form-urlencoded')
console.log(req.get('user-agent'));
//req.set('content-type','application/x-www-form-urlencoded');
res.set('token','aa');
res.status(200).json({text:'error'});
})
'aa' 라는 내용을 header에 담아서 보내면 ?
server on -> 요청 테스트 클릭 -> f12 네트워크 확인
-> aa 출력 됨.
이거 사용한 적이 있음
카카오에서 여기서 내용을 뽑아다 사용한 것
get값을 보내기 위해 url에다가 token보내기 위험하니 header에 넣은 거다! 더 정확한 이유는 낼..
위처럼 사용해보기
app.get('/login2',(req,res)=>{
console.log(req.headers);
//res.setHeader('Content-Type', 'application/x-www-form-urlencoded')
console.log(req.get('user-agent'));
//req.set('content-type','application/x-www-form-urlencoded');
res.set('token','aa');
res.set('Authorization', 'Bearer asklfasidh') //아무 글자
res.status(200).json({text:'error'});
})
server on -> networks -> response header에 내용 추가되어 있음
* header X -> headers O
이제 post로 해보기
server.js
login.html
login2 get -> post 변경 -> server.on -> check
post인 상태로 ㄱ ㄱ
두 번째 인자값 : body: { }
fetch('http://localhost:3000/login2',{
method:'POST' ,
headers:{
'Content-type' : 'application/json'
},
body:{
a:1,b:2
}
post 경우 form 을 받아서 보내는데 content type
받을 수 없어서 errer
fetch를 써서 post로 값 넘길 때 body 거쳐서 간다.
body에 내용을 넣어 요청보내고 요청을 받은 server는 header의 정보읽고, body 내용을 읽어서
get -> queryString으로 간다.
post경우
server.js (express) -> qs
js -> JSON
fetch('http://localhost:3000/login2',{
method:'POST' ,
headers:{
'Content-type' : 'application/json'
},
body:JSON.stringify({a:1,b:2})
}) //promise object
login
fetch('http://localhost:3000/login2',{
method:'POST' ,
/*headers:{
'Content-type' : 'application/json'
},*/
body:{a:1,b:2}
}) //promise object
headers 주석처리하고 보내봐 -> [Object Object]나옴
string으로 만들어야함. 그 역할이 JSON.stringify
fetch('http://localhost:3000/login2',{
method:'POST' ,
/*headers:{
'Content-type' : 'application/json'
},*/
body:JSON.stringify({a:1,b:2})
}) //promise object
server.js
app.post('/login2',(req,res)=>{
console.log(req.headers);
//res.setHeader('Content-Type', 'application/x-www-form-urlencoded')
console.log(req.get('user-agent'));
//req.set('content-type','application/x-www-form-urlencoded');
res.set('token','aa');
res.set('Authorization', 'Bearer askldfasidh')
res.json({text:'ok'})
})
?????????혼돈
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
[50일차] 20210525 HTTP post, get 공부 (0) | 2021.05.26 |
---|---|
[49일차 복습] JavaScript & Oauth 기능으로 kakao login 연결하기 (0) | 2021.05.25 |
[48일차 복습] JavaScript, node.js, Oauth 로 카카오 로그인 연결해보기 kakao login (0) | 2021.05.24 |
[48일차] 20210521 KAKAO Login Javascript node.js express 카카오 로그인 연결하기 (2) | 2021.05.21 |
[47일차]20210520 팀프로젝트 리뷰 / oAuth 2.0 Passport 찍먹 / 내일 다시 정확하게 배우기로 함. (0) | 2021.05.21 |