Merge : accesstoken refreshtoken #26

Merge : accesstoken refreshtoken

client/src/_reducers/user.js

@@ -1,15 +1,17 @@
 import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
 import axios from "axios";
 
+const httpClientForCredentials = axios.create({
+  baseURL: "https://nodestudy-34u2.onrender.com",
+  // 서버와 클라이언트가 다른 도메인일 경우 필수
+  withCredentials: true,
+});
 const asynsLoginFetch = createAsyncThunk(
   "userSlice/asynLoginFetch",
   async (formdata) => {
-    const resp = await axios.post(
-      "https://nodestudy-34u2.onrender.com/api/users/login",
-      formdata,
-      {
-        withCredentials: true, // 쿠키 전송을 허용하는 옵션
-      }
+    const resp = await httpClientForCredentials.post(
+      "/api/users/login",
+      formdata
     );
     return resp.data;
   }
@@ -28,9 +30,7 @@ const asynsRegisterFetch = createAsyncThunk(
 );
 
 const asynsAuth = createAsyncThunk("userSlice/asynsAuth", async () => {
-  const response = await axios.get(
-    "https://nodestudy-34u2.onrender.com/api/users/auth"
-  );
+  const response = await httpClientForCredentials.get("/api/users/auth");
   return response.data;
 });
 
@@ -50,6 +50,9 @@ export const userSlice = createSlice({
     builder.addCase(asynsLoginFetch.fulfilled, (state, action) => {
       state.value = action.payload;
       state.status = "complete";
+      httpClientForCredentials.defaults.headers.common[
+        "Authorization"
+      ] = `Bearer ${action.payload.accestoken}`;
     });
     builder.addCase(asynsLoginFetch.rejected, (state, action) => {
       state.status = "fail";

client/src/components/views/RegisterPage/RegisterPage.js

@@ -47,7 +47,6 @@ function RegisterPage() {
 
   return (
     <Wapper>
-      <h1>cloudfront 캐시 무력화 확인</h1>
       <common.Form onSubmit={handleSubmit(onSubmit)}>
         <common.Title>Sign Up</common.Title>
         <common.InputBox>

server/index.js

@@ -87,10 +87,11 @@ app.post("/api/users/login", async (req, res) => {
       sameSite: "None",
       secure: true,
     };
-    res
-      .cookie("x_auth", userdata.token, options)
-      .status(200)
-      .json({ loginSuccess: true, userId: userdata._id });
+    res.cookie("refreshtoken", userdata.token, options).status(200).json({
+      accestoken: userdata.token,
+      loginSuccess: true,
+      userId: userdata._id,
+    });
   } catch (err) {
     return res.status(400).send(err);
   }

server/middleware/auth.js

@@ -2,7 +2,14 @@ const { User } = require("../models/User");
 // 인증 처리를 하는곳
 let auth = async (req, res, next) => {
   // 클라이언트에서 토큰을 가져온다
-  let token = req.cookies.x_auth;
+  let token = req.headers.authorization;
+  if (token) {
+    const userdata = await User.findByToken(token);
+    req.user = userdata;
+    return next();
+  } else {
+    // refresh 토큰으로 access 토큰 재발급
+  }
   try {
     // 토큰을 복호화 한후 유저를 찾는다.
     const userdata = await User.findByToken(token);