-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
axios 통신 오류
22.05.24 19:54 작성 조회수 419
0
안녕하세요. 로그아웃 기능을 구현하는데 axios통신이 되지 않아서 질문드립니다. 회원가입까지는 되고 이후에 toolbar에서 로그아웃을 클릭하면 첨부한 사진과 같이 axios 통신에러가 나는데 왜 그런지 잘 모르겠습니다.... 저는 로그아웃을 patch로 하지 않고 서버와 클라이언트에서 모두 post로 구현을 했습니다. patch로 바꿔바도 결과가 그대로 오류가 나옵니다.... 코드까지 올리겠습니다..
AuthContext.js
import React, { createContext, useState, useEffect } from "react";
import axios from "axios";
export const AuthContext = createContext() //context 객체 만들기
export const AuthProvider = ({children}) => { //provider
const [user, setUser] = useState() //유저 로그인 정보를 받기 위한 저장소
useEffect(()=>{
if(user) axios.defaults.headers.common.sessionid=user.sessionId //user가 있을 경우 기본값으로 header에 sessionId를 입력
else delete axios.defaults.headers.common.sessionid //user가 없는 경우 sessionid를 삭제
}, [user])
return (
<AuthContext.Provider value={[user, setUser]}> {/*provider를 통해 state와 set함수를 넘겨줌.*/}
{children}
</AuthContext.Provider>
)
}
toolbar.js
import React, { useContext } from "react";
import { Link } from "react-router-dom";
import { AuthContext } from "../context/AuthContext";
import axios from 'axios'
const ToolBar = () => {
const [user, setUser] = useContext(AuthContext) //context 사용을 설정
const Logout = async()=>{
try{
await axios.post('/users/logout') //로그아웃으로 post
setUser() //
console.log("로그아웃 완료")
}catch(err){
console.log(err)
}
}
return (
<div>
<Link to='/'>
<span style={{ marginRight: 10 }}>홈</span>
</Link>
{user ? //이전에 공유하는 user가 존재 유무
(<span onClick={(e)=>{Logout()}}>로그아웃</span>) :
(<>
<Link to='/auth/login'>
<span style={{ marginRight: 10 }}>로그인</span>
</Link>
<Link to='/auth/register'>
<span >회원가입</span>
</Link>
</>)
}
</div>
)
}
export default ToolBar
userRouter.js
const { Router } = require('express')
const userRouter = Router()
const User = require('../models/User')
const { hash, compare } = require('bcryptjs')
const mongoose = require('mongoose')
userRouter.post('/register', async (req, res) => {
try {
if (req.body.password.length < 6) {
throw new Error("6자리 이상으로 비밀번호를 입력하세요.")
}
if (req.body.username.length < 3) {
throw new Error("3자리 이상으로 유저 이름을 입력하세요.")
}
const hashedPassword = await hash(req.body.password, 10) //비밀번호를 hash로 만들어 줌
const user = await new User({ //user 객체를 생성
name: req.body.name,
username: req.body.username,
hashedPassword: hashedPassword, //입력받은 req데이터를 객체에 저장.
sessions: [{createdAt: new Date()}]
}).save()
const session = user.sessions[0] //회원가입이기 때문에 무조건 첫번째로 생성된 세션을 기준으로 잡음.
res.json({
message: "회원가입 완료",
sessionId: session._id,
name: user.name })
} catch (err) {
res.status(400).json({message: err.message})
}
})
userRouter.post('/login', async (req, res)=>{
try{
const user = await User.findOne({username: req.body.username}) //mongoose의 내장함수로 요청정보에 맞는 유저를 찾는다.
const isValid = await compare(req.body.password, user.hashedPassword) //요청된 비밀번호와 해쉬번호를 비교
if(!isValid) throw new Error("잘못된 입력입니다.")
user.sessions.push({createdAt: new Date()}) //유저의 세션을 추가
const session = user.sessions[user.sessions.length-1] //session은 가장 최근에 만든 세션을 기준으로 잡음.
await user.save() //user모델을 DB에 저장
res.json({message: "로그인 성공!", sessionId:session._id, name:user.name})
}catch(err){
res.status(400).json({message: err.message})
}
})
userRouter.post('/logout', async (req, res)=>{
try{ //미들웨어를 갔다 온 뒤 처리
if(!req.user) throw new Error("유효하지 않은 세션입니다.")
await User.updateOne({_id:req.user.id}, //저장된 user의 id와 스키마의 id 같은 것을 찾아서 업데이트 함.
{$pull: {sessions: {_id:req.headers.sessionid}}} //세션들 중 로그아웃할 세션id와 같은 세션을 pull을 통해 삭제함
)
res.json({success: "성공!"})
}catch(err){
res.status(400).json({message: err.message})
}
})
module.exports = { userRouter }
답변을 작성해보세요.
답변 0