Merge : logout 구현

Merge : logout 구현

client/src/_reducers/user.js

@@ -3,6 +3,7 @@ import axios from "axios";
 
 const httpClientForCredentials = axios.create({
   baseURL: "https://nodestudy-34u2.onrender.com",
+
   // 서버와 클라이언트가 다른 도메인일 경우 필수
   withCredentials: true,
 });
@@ -34,6 +35,11 @@ const asynsAuth = createAsyncThunk("userSlice/asynsAuth", async () => {
   return response.data;
 });
 
+const asynsLogout = createAsyncThunk("userSlice/asynsLogout", async () => {
+  const response = await httpClientForCredentials.get("/api/users/logout");
+  return response.data;
+});
+
 export const userSlice = createSlice({
   name: "user",
   initialState: { value: {}, auth: {} },
@@ -65,9 +71,14 @@ export const userSlice = createSlice({
         ] = `Bearer ${action.payload.accesstoken}`;
       }
     });
+    builder.addCase(asynsLogout.fulfilled, (state, action) => {
+      state.auth = action.payload;
+      // accesstoken default삭제
+      httpClientForCredentials.defaults.headers.common["Authorization"] = "";
+    });
   },
 });
 
 export const { login } = userSlice.actions;
-export { asynsLoginFetch, asynsRegisterFetch, asynsAuth };
+export { asynsLoginFetch, asynsRegisterFetch, asynsAuth, asynsLogout };
 export default userSlice.reducer;

client/src/components/views/Header/Header.js

@@ -3,7 +3,8 @@ import styled from "styled-components";
 import SvgIcon from "@mui/material/SvgIcon";
 import NightlightIcon from "@mui/icons-material/Nightlight";
 import { useNavigate } from "react-router-dom";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import { asynsLogout } from "../../../_reducers/user";
 
 const Wapper = styled.div`
   position: fixed;
@@ -178,6 +179,7 @@ const Span = styled.span`
 function Header() {
   const isLogin = useSelector((state) => state.user.auth.isAuth);
   const navigate = useNavigate();
+  const dispatch = useDispatch();
   return (
     <Wapper>
       <Burger>
@@ -199,6 +201,7 @@ function Header() {
           <LoginBtn
             onClick={() => {
               //로그아웃
+              dispatch(asynsLogout());
             }}
           >
             <Span>logout</Span>

server/index.js

@@ -109,14 +109,10 @@ app.get("/api/users/auth", auth, (req, res) => {
   });
 });
 
-app.get("/api/users/logout", auth, async (req, res) => {
-  // mongodb user를 찾고 내용을 바꾸는 메소드
+app.get("/api/users/logout", async (req, res) => {
   try {
-    await User.findOneAndUpdate(
-      { _id: req.user._id },
-      // 바꿀 내용 token을 없앤다.
-      { token: "" }
-    );
+    // cookie에 저장된 refreshtoken 삭제
+    res.clearCookie("refreshtoken");
     return res.status(200).send({
       success: true,
     });