diff --git a/src/App.js b/src/App.js index 020c736..d9f8141 100644 --- a/src/App.js +++ b/src/App.js @@ -11,7 +11,8 @@ import './main.css'; 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, @@ -23,29 +24,48 @@ export default function App() { }); const history = useHistory(); + //로그인 상태 관리하기-------------------------------- + useEffect(() => { + refreshTokenRequest() + if(accessToken.accessToken!==null){ + history.push('/Waiting') + } + },[]); + const loginHandler = (data) => { + issueAccessToken(data.data.accessToken); + history.push('/Waiting') + }; + const handleGeuetLogin = () => { setUserInfo({ nickname: '게스트' }); + history.push('/Waiting') }; - const loginCheck = (isLogIn) => { - if (!isLogIn) { - history.push('/'); - }else if(isLogIn){ - 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 @@ -78,11 +98,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}) @@ -94,44 +110,13 @@ 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); }; - - 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) => { // ! 구글 로그인 @@ -143,8 +128,18 @@ export default function App() { }); console.log(resp.data) issueAccessToken(resp.data.accessToken) - history.push('/Waiting') }; +//구글 로그인 코드 받기-------------------------------- + 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); + } + }); + return (
@@ -153,8 +148,8 @@ export default function App() { path="/Waiting" render={() => ( ( @@ -176,8 +171,8 @@ export default function App() { path="/room" render={() => ( @@ -197,18 +192,3 @@ export default function App() {
); } - -// 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 -{ - /* { - if (isLogin) { - return ; - } - return ; - }} -/>; */ -} diff --git a/src/MainPages/components/Signin.js b/src/MainPages/components/Signin.js index bbd48c4..0ebd9a8 100644 --- 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 index 0aa00fa..92020bf 100644 --- a/src/MyPages/MyPage.js +++ b/src/MyPages/MyPage.js @@ -40,11 +40,6 @@ function MyPage({ accessToken, isLogIn, loginCheck, userInfo }) { } }; - useEffect(() => { - return () => { - loginCheck(isLogIn); - }; - }); diff --git a/src/WaitingPages/Waiting.js b/src/WaitingPages/Waiting.js index f5b9132..8b913e1 100644 --- a/src/WaitingPages/Waiting.js +++ b/src/WaitingPages/Waiting.js @@ -11,10 +11,9 @@ import '../main.css'; export default function Waiting({ accessToken, - isLogIn, - loginCheck, hendleLogout, userInfo, + refreshTokenRequest }) { const [createModal, setCreateModal] = useState(false); @@ -49,7 +48,10 @@ export default function Waiting({ }); }, [locationKeys]); useEffect(() => { - loginCheck(isLogIn); + refreshTokenRequest() + if(accessToken.accessToken===null){ + history.push('/') + } },[]); return ( @@ -70,7 +72,7 @@ export default function Waiting({
- +