로그인 프로세스(JS클로저, 권한분기,React HOC vs HOF)

로그인 Token 발급, 전달하기

로그인 기능을 공부해보았다.

기본적으로 아이디 비밀번호를 입력해서 로그인한다고 해보자.

아이디와 비밀번호를 받았으면 로그인을 시도해보자

이미 만들어져있는 로그인 API이다. password와 email을 variables로 넘겨주고 로그인 했다는 것을 증명받아야 한다. (accessToken을 발급받는다.)

AccessToken을 받았다는 것은 해당 사용자에 대한 검증이 완료 (이메일과 비밀번호가 일치) 되었다는 것을 뜻한다.

그렇다면 이제 받아온 Token을 들고 나는 이 토큰을 갖고있으니 로그인 인증완료된 사용자야!! 라는 말을 해줘야 한다. 어떻게 하면 좋을까?

페이지를 열때 가장 먼저 작동하는 app.tsx에 작업을 해주면 된다.

app.tsx에 createUploadLink 코드에

headers 로 AccessToken 을 담아서 넘겨준다.

이때, authorization 의 키 값으로 시작하며

관례상 Bearer 을 함께 사용해준다.

(우선 로그인페이지에서 app.tsx로 AccessToken 값을 주어야 하니 ContextAPI를 활용하여 전달해준다.)

headers 는 서버와의 통신을 설정하는 부분이다.

이때, headers 에 authorization (인증) 이란 데이터의 값으로

AccessToken 을 담아서 넘겨줄 수 있다.

그렇게 되면, 해당 서버에서는 authorization 으로 AccessToken 을 받은 후,

AccessToken 이 아직 유효하다면 사용자가 로그인을 했다고 판단한 후

사용자의 인증이 필요한 데이터들을 클라이언트로 보내주게 된다.

권한분기

로그인 한 사람과 로그인을 하지 않은 사람들에 대한 권한을 분리시켜주어야 한다. 이를 처리할 때 가장 대표적인 방법은 HOC를 활용하는 것인데, HOC를 사용해보기 전에 클로저에 대한 개념을 알아야 한다.

Closures

우선 클로저는 내부 함수에서 외부 함수의 지역변수에 접근하는 것을 의미한다.

전역변수는 해당 컴포넌트 (= 페이지) 안이라면

어디서든 사용할 수 있는 변수를 의미하고.

지역변수는 함수 안에서 정의된 변수로써,

해당 함수 안에서만 사용되는 변수를 의미하는데,

function A(){
const 지역변수 = 123

return function B(){
	console.log(지역변수)     // 123		
}

}

이처럼 function B 에서 functionA의 지역변수를 가져오는 것 자체를 클로저라고 한다.

클로저를 활용하여 권한분기를 해보자.

클로저를 활용하는 페이지의 권한처리에서 HOC라는 개념이 자주 나오는데,

HOC는 Higher Order Component 이고 위의 클로저로부터 확장된 개념이다.

예를들어

const UserPage = (props) => {
return

export default withAuth(UserPage);

로그인이 되었는지, 안되어있는지를 먼저 체크한 후, 로그인이 되어있다면 회원페이지를 보여주고, 로그인이 되어있지 않다면 로그인을 회원페이지를 보여주지 않아야 한다고 생각해보자.

UserPage로 들어가면서 먼저 withAuth를 거치게 하는 방식이다.

withAuth라는 다른 컴포넌트를 활용하여 로그인이 되었는지 안되었는지 (Token이 유효한지 아닌지) 를 먼저 판단해주고 결과에 따라 UserPage를 보여준다.

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;

추가로 HOF 라는 것이 있다. HOF 역시 HOC와 비슷하다. 단지 최종 return 값이 JSX인지, JSX가 아닌지로 구분됩니다.

Component대신 Function이려면 최종으로 return 되는 값이 JSX가 아닌 일반함수라는 것이다.

export default function Bbb(){

const onClickButton = (id) => (event) => {
	console.log(id)
}

return <button onClick={onClickButton(123)}>클릭</button>

}

이러한 방식으로 내가 원하는 컴포넌트들 사이에 컴포넌트를 넣고, 함수 사이에 함수를 넣는 것이 가능하다.