Merge pull request #98 from cjs1301/dev

total test
codestates · May 6, 2021 · b3d2fa2 · b3d2fa2
2 parents 501b337 + 30d93a9
commit b3d2fa2
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 91 deletions.
diff --git a/src/App.js b/src/App.js
@@ -12,7 +12,8 @@ import Bgm from './Bgm';
 const axios = require('axios');
 
 export default function App() {
-  const [isLogIn, setIsLogIn] = useState(false);
+  //const [isLogIn, setIsLogIn] = useState(false);
+  //localStorage.setItem('isLogIn',false)
   const [accessToken, setAccessToken] = useState({ accessToken: null });
   const [userInfo, setUserInfo] = useState({
     id: null,
@@ -24,29 +25,48 @@ export default function App() {
   });
   const history = useHistory();
 
-  const handleGuestLogin = () => {
-    setUserInfo({ nickname: '게스트' });
+  //로그인 상태 관리하기--------------------------------
+  useEffect(() => {
+    refreshTokenRequest()
+    if(accessToken.accessToken!==null){
+      history.push('/Waiting')
+    }      
+  },[]);
+  const loginHandler = (data) => {
+    issueAccessToken(data.data.accessToken);
+    history.push('/Waiting')
   };
-  const loginCheck = (isLogIn) => {
-    if (!isLogIn) {
-      history.push('/');
-    }else if(isLogIn){
-      history.push('/Waiting');
-    }
+
+  const handleGeuetLogin = () => {
+    setUserInfo({ nickname: '게스트' });
+    history.push('/Waiting')
   };
+//로그 아웃--------------------------------------------------------
   const hendleLogout = () => {
-    setIsLogIn(false);
-    setAccessToken({ accessToken: null });
     axios
         .get(
-          'http://localhost:4000/login',
+          'http://localhost:4000/user/logout',
           {
-            headers: { 'Content-Type': 'application/json' },
-            withCredentials: true,
+            headers:{
+              'Content-Type': 'application/json',
+              'Clear-Site-Data': "cookies"
+            },
           }
         ).then((res) => {})
+    setUserInfo({
+      id: null,
+      nickname: null,
+      email: null,
+      profile_image: Character1,
+      comment: null,
+      room_id: null,
+    })
+    setAccessToken({ accessToken: null });
+    history.push('/')
   };
 
+
+//토큰 관리----------------------------------------------------------------------------------------------
   const accessTokenRequest = (accessToken) => {
     // ! 유저 정보를 알려달라는 코드
     axios
@@ -79,11 +99,7 @@ export default function App() {
         withCredentials: true,
       })
       .then((res) => {
-        if (res.data.message !== 'ok') {
-          const message =
-            'refresh token이 만료되어 불러올 수 없습니다. 다시 로그인 해주시기 바랍니다.';
-          //return this.setState({ email: message, createdAt: message });
-        }
+        if (res.data.message !== 'ok') {}
         const { nickname, email, profile_image } = res.data.data.userInfo;
         console.log(res.data.data.accessToken)
         setAccessToken({accessToken:res.data.data.accessToken})
@@ -95,57 +111,36 @@ export default function App() {
       });
   };
 
-  const loginHandler = (data) => {
-    // !
-    setIsLogIn(true);
-    issueAccessToken(data.data.accessToken);
-  };
-
   const issueAccessToken = (token) => {
     setAccessToken({ accessToken: token });
     accessTokenRequest(token);
+    history.push('/Waiting')
     console.log(token);
   };
+//구글 로그인----------------------------------------------------------------
 
+  const getAccessToken = async (authorizationCode) => {
+    // ! 구글 로그인
+    let resp = await axios.post('http://localhost:4000/googlelogin',
+    {
+      authorizationCode: authorizationCode,
+    },{
+      withCredentials: true
+    });
+    console.log(resp.data)
+    issueAccessToken(resp.data.accessToken)
+  };
+//구글 로그인 코드 받기--------------------------------
   useEffect(() => {
     const url = new URL(window.location.href);
     const authorizationCode = url.searchParams.get('code');
-
     console.log('accessToken', accessToken);
     console.log('userInfo:', userInfo);
     if (authorizationCode) {
       getAccessToken(authorizationCode);
     }
   });
 
-  useEffect(() => {
-    console.log('엑세스 토큰', accessToken.accessToken);
-    // if (accessToken.accessToken !== null) {
-    //   setIsLogIn(true);
-    // }
-    // console.log('로그인상태', isLogIn);
-    //엑세스 토큰이 없을때
-    if(accessToken.accessToken===null){
-      setIsLogIn(true)
-      loginCheck(isLogIn)
-      refreshTokenRequest()
-      console.log('로그인상태',isLogIn)
-      }
-    console.log('로그인상태',isLogIn)
-  },);
-
-  const getAccessToken = async (authorizationCode) => {
-    // ! 구글 로그인
-    let resp = await axios.post('http://localhost:4000/googlelogin',
-    {
-      authorizationCode: authorizationCode,
-    },{
-      withCredentials: true
-    });
-    console.log(resp.data);
-    issueAccessToken(resp.data.accessToken);
-    history.push('/Waiting');
-  };
   return (
     <div>
       <Bgm />
@@ -154,8 +149,8 @@ export default function App() {
           path="/Waiting"
           render={() => (
             <Waiting
-              isLogIn={isLogIn}
-              loginCheck={loginCheck}
+              //isLogIn={isLogIn}
+              refreshTokenRequest={refreshTokenRequest}
               hendleLogout={hendleLogout}
               userInfo={userInfo}
               accessToken={accessToken}
@@ -166,8 +161,8 @@ export default function App() {
           path="/MyPage"
           render={() => (
             <MyPage
-              isLogIn={isLogIn}
-              loginCheck={loginCheck}
+              //isLogIn={isLogIn}
+              refreshTokenRequest={refreshTokenRequest}
               userInfo={userInfo}
               accessToken={accessToken}
             />
@@ -177,8 +172,8 @@ export default function App() {
           path="/room"
           render={() => (
             <InGame
-              isLogIn={isLogIn}
-              loginCheck={loginCheck}
+              //isLogIn={isLogIn}
+              refreshTokenRequest={refreshTokenRequest}
               userInfo={userInfo}
               accessToken={accessToken}
             />
@@ -198,18 +193,3 @@ export default function App() {
     </div>
   );
 }
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-{
-  /* <Route
-  path="/"
-  render={() => {
-    if (isLogin) {
-      return <Redirect to="/mypage" />;
-    }
-    return <Redirect to="/login" />;
-  }}
-/>; */
-}
diff --git a/src/MainPages/components/Signin.js b/src/MainPages/components/Signin.js
@@ -9,7 +9,6 @@ const axios = require('axios');
 export default function Signin({ isOpen, close, loginHandler }) {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [isSigin, setIsSignin] = useState(true);
   const [isNone, setIsNone] = useState(true);
   const history = useHistory();
 
@@ -21,10 +20,6 @@ export default function Signin({ isOpen, close, loginHandler }) {
     setPassword(e.target.value);
   };
 
-  // const handleSignin = () => {
-  //   history.push('/Waiting');
-  // };
-
   const loginRequestHandler = (e) => {
     if (e.key === 'Enter' || e.type === 'click') {
       axios
@@ -37,9 +32,7 @@ export default function Signin({ isOpen, close, loginHandler }) {
           }
         )
         .then((res) => {
-          console.dir(loginHandler);
           loginHandler(res.data);
-          history.push('/Waiting');
         })
         .catch((err) => {
           if (err) {

diff --git a/src/MyPages/MyPage.js b/src/MyPages/MyPage.js
@@ -41,11 +41,6 @@ function MyPage({ accessToken, isLogIn, loginCheck, userInfo }) {
     }
   };
 
-  useEffect(() => {
-    return () => {
-      loginCheck(isLogIn);
-    };
-  });
 
   const MyPageSaveData= async () =>{
     const PhotoNum = PhotoData.findIndex(nowPhoto)

diff --git a/src/WaitingPages/Waiting.js b/src/WaitingPages/Waiting.js
@@ -9,10 +9,9 @@ import { useHistory } from 'react-router-dom';
 
 export default function Waiting({
   accessToken,
-  isLogIn,
-  loginCheck,
   hendleLogout,
   userInfo,
+  refreshTokenRequest
 }) {
   const [createModal, setCreateModal] = useState(false);
   const { token } = accessToken;
@@ -54,7 +53,10 @@ export default function Waiting({
   }, [locationKeys]);
 
   useEffect(() => {
-    loginCheck(isLogIn);
+    refreshTokenRequest()
+    if(accessToken.accessToken===null){
+        history.push('/')
+      }      
   },[]);
 
   return (
@@ -75,7 +77,7 @@ export default function Waiting({
           <MyPageBtn nickname={nickname} />
         </div>
         <div className="waiting_signout_btn">
-          <Signout isLogIn={isLogIn} hendleLogout={hendleLogout} />
+          <Signout hendleLogout={hendleLogout} />
         </div>
       </div>
     </div>