로그인페이지를 구현했다면 생각해야 하는것이 누구에게 어떤 페이지를 보여줘야 하는지, 허용된 페이지가 아니라면 어떻게 처리해줘야 하는지를 생각해야 한다.
권한분기
작게는 비회원, 회원
크게는 비회원, 구매자, 판매자, 중개관리자 등등 여러가지의 회원 유형이 있을수 있고 해당 회원마다 볼수있는 페이지의 권한이 모두 달라야 한다.
이러한 권한에 따른 페이지 보여주기 및 권한이 없을때 처리해주는 과정이 바로 권한분기 이다.
권한분기 (예제)
로그인과정을 간단하게 다시 생각한다면 아래처럼 진행할수 있다.
export default function LoginSuccessPage() {
const router = useRouter();
const { data } = useQuery(FETCH_USER_LOGGED_IN);
const { userInfo, setUserInfo, accessToken } = useContext(GlobalContext);
useEffect(() => {
if (userInfo.email) return;
if (!accessToken) {
router.push("/quiz/21-01-login");
alert("로그인을 먼저 해주세요");
}
setUserInfo({
name: data?.fetchUserLoggedIn.name,
email: data?.fetchUserLoggedIn.email,
});
}, []);
return (
<>
{/* {!accessToken && <MyModal></MyModal>} */}
<div>환영합니다.</div>
<div>
당신의 이름은{data?.fetchUserLoggedIn.name} 이메일은
{data?.fetchUserLoggedIn.email} 입니다.
</div>
</>
);
}useEffect를 사용하는 부분에서 if문으로 조건을 검색한후 조건에 맞지 않는다면 다시 로그인 페이지로 이동시키는 방법이다.
다만 이런방법에는 조금의 문제가 있다.
만약 이러한 권한을 설정해줘야 하는페이지가 100개라면?
100개 모두 조건을 기재해 줘야 하고, router 페이지가 변경된다면 역시 모두 router값을 변경해줘야해서 운영이 어려워 진다.
이런문제를 해결하기 위해서 HOC,HOF 등의 방법을 사용해서 권한관련 설정을 하게된다.
클로저
HOC, HOF의 개념을 알기전에 먼저 클로저에 대한 개념을 알고 가야한다.
변수의 개념은 2가지가 있는데 전역변수는 컴포넌트 전체 어디에서든 사용할수 있는 변수이며, 지역변수는 함수 안에서 정의된 변수로써 함수 안에서만 사용이 되는 변수이다.
클로저란 내부함수에서 외부함수의 지역변수에 접근하는 것을 의미한다.
클로저 예제 코드
function A(){
const 지역변수 = 123
return function B(){
console.log(지역변수) // 123
}
}HOC
HOC(Higer Order Component)는 페이지의 권한을 처리할때 사용하게 된다.
위에서 설명한 예제코드는 useEffect의 부분에서 if문으로 체크하였는데 해당부분을 withAuth라는 컴포넌트로 분리시킨다.
withAuth 컴포넌트 예제코드
const withAuth = (Component) => (props) => {
const router = useRouter();
const { accessToken } = useContext(GlobalContext);
// 토큰체크
useEffect(() => {
if (!accessToken) router.push("/login");
}, []);
if (!accessToken) return <></>;
return <Component {...props} />;
};
export default withAuth;이렇게 작성후 권한을 확인할 index 페이지에서 다음과같이 작성해주면
import { withAuth } from "../../src/components/commons/hocs/withAuth";
import ProductsListContainer from "../../src/components/units/product/list/ProductsList.container";
const ProductWritePage = () => {
return <ProductsListContainer />;
};
export default withAuth(ProductWritePage);페이지가 그려지기전 withAuth가 먼저 실행되어 로그인 여부를 검증해 로그인이 되어있지 않다면 접속을 차단할수 있게 된다.
이런식으로 설정하면 매번 페이지에 if조건을 줄필요 없이 withAuth를 작성하는 부분만으로 페이지 권한분기 작업을 진행할수 있으며 권한이 없을때 이동할 페이지가 변경된다고 해도 withAuth 페이지만 변경하면 되기 때문에 매우 편리하게 사용할수 있다.
HOF
HOF(Higher Order Function)도 HOC와 동일하다. 단지 return값이 jsx가 아니라 일반함수를 의미한다.
버튼을 클릭했을때 id 값을 가져오고, 그 id 값으로 특정한 작업을 할때 event.target.id 이런식으로 작업을 했다.
이 방법의 문제점은 id값은 고유한 값이기 때문에 남발하면 안되고, 중복 작성된경우 오작동이 일어날 가능성이 있다.
HOF를 이용한다면 이러한 문제를 방지할수 있으며, id값을 가져와서 사용할때 프레임워크를 사용할때 발생했던 문제(ant design or Material UI를 사용할때 id값이 사라지는 문제)를 해결할수 있다.
event.target.id 방법
export default function Aaa(){
const onClickButton = (event) => {
console.log(event.target.id)
}
return <button id={123} onClick={onClickButton}>클릭</button>
}HOF 방법
export default function Bbb(){ const onClickButton = (id) => (event) => { console.log(id) } return <button onClick={onClickButton(123)}>클릭</button> }
