인증된 사용자만이 할 수 있는 기능들이 있기 때문에 이를 위해서 인증 체크를 하려고 한다.
들어갈 수 있는 페이지들에 대한 통제를 위해 HOC를 이용해야 한다.
Higher Order Component.
다른 컴포넌트를 받아 새로운 컴포넌트를 반환하는 컴포넌트로, 유저가 해당 페이지에 들어갈 자격이 되는지를 알아낸 후 자격이 된다면 해당 컴포넌트로 가게 해주고 아니라면 다른 페이지로 보내버림
그러니 우리는 우리가 가지고 있는 페이지(현재는 랜딩페이지/로그인페이지/회원등록 페이지의 세 가지 페이지가 있다)를 HOC안에 다 넣어버릴 것이다.
이렇게 auth컴포넌트에서 요청을 보내 백엔드로 하여금 확인하도록 한다.
HOC(auth.js)만들기
기존에 만들어 뒀던 hoc폴더에 auth.js 파일을 만들자.
import React from 'react';
export default function (SpecificComponent, option, adminRoute = null) {
return AuthenticationCheck;
}AuthenticationCheck라는 function을 return해 줄 것이다. 그럼 안에 이 function을 작성해줘야겠지? 인자로 보내는 것들은.. 무슨 의미인지 아직 잘 모르겠다..
우린 AuthenticationCheck를 통해 backend에 request를 날려 사람의 현재 상태를 가져와야한다. 이를 위해 useEffect를 이용하자.
import React from 'react';
import Axios from 'axios';
export default function (SpecificComponent, option, adminRoute = null) {
function AuthenticationCheck(props){
React.useEffect(() => {
Axios.get()
}, [])
}
return AuthenticationCheck;
}우린 이미 server/index.js에 auth api를 구현해둔 바 있다.
get request로 요청을 주면 현재 사람이 어떤 상태인지를 auth미들웨어를 통해서 인증처리하고, 쿠키에 토큰을 넣어줄 것임. 그리고 이 쿠키를 통해서 이 유저가 로그인을 했는지 안했는지 확인하고 res를 보내준다.
그러니 이것을 이용하면 될것. Axios.get에 동일한 엔드포인트(/api/users/auth)를 이용해주면 되는데, 우린 axios말고 redux를 사용하겠다.
- useDispatch를 import하고 틀을 잡아주자.
- dispatch에는 action이 들어가야 하니까 auth 액션 만들 것을 생각해서 import해주자.
import React from 'react';
import Axios from 'axios';
import { useDispatch } from 'react-redux';
import { auth } from '../_actions/user_action';
export default function (SpecificComponent, option, adminRoute = null) {
const dispatch = useDispatch();
function AuthenticationCheck(props){
React.useEffect(() => {
dispatch(auth());
Axios.get('/api/users/auth');
}, [])
}
return AuthenticationCheck;
}그리고 이제 action에 가서 auth action만들 준비를 하는데
user_action.js
import { LOGIN_USER, REGISTER_USER, AUTH_USER } from "./types";
...
export function auth(){
...
return {
type: AUTH_USER,
payload: request,
}
}여기도 type명 import, types에도 적어주고, user_reducer에도 import해줘야 함.
그리고 내용을 작성하는데 이번에는 .get메서드로 요청하기 때문에 body가 필요없다고 한다. .get('/api/users/auth')로 엔드포인트만 넘겨주고 있음
(이 얘기에 대해선 더 이해하기로)
user_reducer에서 최종적으로 받을 정보 이름은 userData라고 처리해줬다. 왜냐면 auth 미들웨어를 거쳐서 오는 정보들이 다 user에 대한 data이기 때문에.
그리고 auth.js에서 dispatch(auth()).then((response) => {console.log(response});형태로 정보를 처리해주자.
여기까지 했더니, /api/users/auth로 접속했을 때 console이 아닌 창 자체에 pre라는 엘리먼트가 생성되고 그 안에 정보가 들어있게 되던데 이건 왜 그런걸까
그리고 auth.js내부의 AuthenticationCheck에 props를 넘겨준다고 표시된 게 있는데 이걸 사용하고 있지도 않고.. 뭐가 뭔지 모르겠음
useNavigate를 사용할 때도 강의에서는 navigate가 아닌 history.push인가를 사용하면서 props를 넘겨주던데 이번엔 다른 기능을 사용하는 게 아니니 일단 똑같이 props넘겨주긴 했는데 어디에 쓰이고 있는 거지🤔
auth.js에 다른 컴포넌트 넣어주기
근데 우리는 HOC을 만들기만 했지 다른 컴포넌트를 넣어주질 않았다.
이 점을 처리해보자.
App.js로 가면 우리가 만든 컴포넌트들을 볼 수가 있는데, 여기에 auth도 import해주자.
이렇게 해주었고 하단 Routes부분에
<Routes>
<Route path='/' element={Auth(LandingPage)} />
...이런 식으로 Auth를 통해 컴포넌트를 감싸줄 건데 이외에 다른 옵션도 줄 것이다.
위에서 auth.js의
인자들에 대해 궁금해한 바가 있었는데, 지금 감싸준 LandingPage컴포넌트가 저 인자들 중 SpecificComponent인 것이다.
그럼 option은 뭔가?
option에는 3가지가 있는데,
1. null: 아무나 출입이 가능한 페이지
2. true: 로그인한 유저만 출입이 가능한 페이지
3. false: 로그인한 유저는 출입 불가능한 페이지
와 같다.
LandingPage는 아무나 출입이 가능하기 때문에 null 옵션을, LoginPage와 registerPage에는 각각 false옵션을 주면 된다.
만약 adminUser만 들어갈 수 있는 페이지라면 3번째 인자로 true를 넘겨주면 된다. {Auth(AdminPage, false, true)}이런 식으로.
우리는 adminRoute는 기본적으로 null을 주었음
그런데 여기까지 한 다음 메인페이지로 가봤는데 아무것도 안 뜬다.
다음 강의에서 어떻게 나오는지 봐야겠다.
