Skip to content

Commit

Permalink
total test
Browse files Browse the repository at this point in the history
  • Loading branch information
@cjs1301
cjs1301 committed May 6, 2021
1 parent 17bfe8a commit 3e59623
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 89 deletions.
126 changes: 53 additions & 73 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -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})
Expand All @@ -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) => {
// ! 구글 로그인
Expand All @@ -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 (
<div>
<button onClick={refreshTokenRequest}>리프레쉬 토큰</button>
Expand All @@ -153,8 +148,8 @@ export default function App() {
path="/Waiting"
render={() => (
<Waiting
isLogIn={isLogIn}
loginCheck={loginCheck}
//isLogIn={isLogIn}
refreshTokenRequest={refreshTokenRequest}
hendleLogout={hendleLogout}
userInfo={userInfo}
accessToken={accessToken}
Expand All @@ -165,8 +160,8 @@ export default function App() {
path="/MyPage"
render={() => (
<MyPage
isLogIn={isLogIn}
loginCheck={loginCheck}
//isLogIn={isLogIn}
refreshTokenRequest={refreshTokenRequest}
userInfo={userInfo}
accessToken={accessToken}
/>
Expand All @@ -176,8 +171,8 @@ export default function App() {
path="/room"
render={() => (
<InGame
isLogIn={isLogIn}
loginCheck={loginCheck}
//isLogIn={isLogIn}
refreshTokenRequest={refreshTokenRequest}
userInfo={userInfo}
accessToken={accessToken}
/>
Expand All @@ -197,18 +192,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" />;
}}
/>; */
}
7 changes: 0 additions & 7 deletions src/MainPages/components/Signin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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
Expand All @@ -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) {
Expand Down
5 changes: 0 additions & 5 deletions src/MyPages/MyPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,6 @@ function MyPage({ accessToken, isLogIn, loginCheck, userInfo }) {
}
};

useEffect(() => {
return () => {
loginCheck(isLogIn);
};
});



Expand Down
10 changes: 6 additions & 4 deletions src/WaitingPages/Waiting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,9 @@ import '../main.css';

export default function Waiting({
accessToken,
isLogIn,
loginCheck,
hendleLogout,
userInfo,
refreshTokenRequest
}) {
const [createModal, setCreateModal] = useState(false);

Expand Down Expand Up @@ -49,7 +48,10 @@ export default function Waiting({
});
}, [locationKeys]);
useEffect(() => {
loginCheck(isLogIn);
refreshTokenRequest()
if(accessToken.accessToken===null){
history.push('/')
}
},[]);

return (
Expand All @@ -70,7 +72,7 @@ export default function Waiting({
<MyPageBtn />
</div>
<div className="waiting_signout_btn">
<Signout isLogIn={isLogIn} hendleLogout={hendleLogout} />
<Signout hendleLogout={hendleLogout} />
</div>
</div>
</div>
Expand Down

0 comments on commit 3e59623

Please sign in to comment.