권한분기

간단한 예로 로그인 여부를 생각하면 될 것 같다.

useEffect를 이용해 accessToken의 소지 여부를 판단해 렌더링되는 화면을 나누는 부분을 뜻한다고 생각하면 될 것 같다.

import { gql, useMutation } from "@apollo/client";
// import { Modal } from "antd";
import { useRouter } from "next/router";
import { useState } from "react";
import { useRecoilState } from "recoil";
import { accessTokenState } from "../../src/commons/store";

const LOGIN_USER = gql`
  mutation loginUser($email: String!, $password: String!) {
    loginUser(email: $email, password: $password) {
      accessToken
    }
  }
`;
export default function LoginPage() {
  const [accessToken, setAccessToken] = useRecoilState(accessTokenState);
  const router = useRouter();

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [LoginUser] = useMutation(LOGIN_USER);

  const onChangeEmail = (event) => {
    setEmail(event.target.value);
  };

  const onChangePassword = (event) => {
    setPassword(event.target.value);
  };

  const onClickLogin = async () => {
    const result = await LoginUser({
      variables: {
        email,
        password,
      },
    });
    const accessToken = result.data.loginUser.accessToken;
    setAccessToken(accessToken);
    localStorage.setItem("accessToken", accessToken);
    console.log(accessToken);
    router.push("/23-02-login-localstorage-success");
    alert("로그인 되었습니다.");
  };

  return (
    <div>
      이메일 : <input type="text" onChange={onChangeEmail} />
      비밀번호 : <input type="password" onChange={onChangePassword} />
      <button onClick={onClickLogin}>로그인</button>
    </div>
  );
}

요약 : 이메일과 비밀번호가 백엔드 서버에 있는 정보와 일치하면 로그인 성공.

import { gql, useQuery } from "@apollo/client";

const FETCH_USER_LOGGED_IN = gql`
  query fetchUserLoggedIn {
    fetchUserLoggedIn {
      email
      name
    }
  }
`;

export default function LoginSuccessPage() {
  const { data } = useQuery(FETCH_USER_LOGGED_IN);

  return <div>{data?.fetchUserLoggedIn.name}님, 환영합니다.</div>;
}

로그인 성공시 이동하는 화면의 코드.

로그인 실패 시 본인 같은경우 랜딩 페이지로 돌아가게하는 router를 걸어주었다.

이와 같이 어떠한 권한이 있는 상태와 없는 상태의 페이지를 구분해서 렌더링 하는 기준이 권한분기라고 생각하면 되겠다.