인프런 커뮤니티 질문&답변

안녕하세요.

graphql에서 로그인 기능을 이용하였습니다. 로그인을 하면 위에 레이아웃 header부분에 user의 이름과

로그아웃 버튼이 입력되어 있습니다.

export default function MainPage(): JSX.Element {
  const [, setAccessToken] = useRecoilState(accessTokenState);
  const [, setIsLogin] = useRecoilState(isLoginState);
  const [loginUser] = useMutationLoginUser();
  const router = useRouter();

...

  const onClickSubmit = (data: IFormData): void => {
    console.log(data);
    void login(data);
  };

  const login = async (data: IFormData): Promise<void> => {
    const result = await loginUser({
      variables: {
        email: data.email,
        password: data.password,
      },
    });
    const accessToken = result.data?.loginUser.accessToken;
    if (accessToken === undefined) {
      alert("로그인실패");
      return;
    }
    setAccessToken(accessToken);
    // localStorage.setItem("accessToken", accessToken); // 임시저장
    console.log(accessToken);
    setIsLogin(true);
    void router.push("/boards/list");
  };

 ...

위 코드는 로그인을 할 때 코드이며 setAccessToken을 이용하여 토큰을 집어넣고 setIsLogin을 이용하여 로그인 상태를 true로 바꿉니다.

export default function LayoutHeader(): JSX.Element {
  const router = useRouter();
  const [logoutUser] = useMutationLogoutUser();
  const [accessToken, setAccessToken] = useRecoilState(accessTokenState);
  const [isLogin, setIsLogin] = useRecoilState(isLoginState);
  const [userName, setUserName] = useRecoilState(accessTokenUserName);

  const { data } =
    useQuery<Pick<IQuery, "fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN);
  if (data !== undefined) {
    setUserName(data.fetchUserLoggedIn.name);
  }

  const onClickLogo = (): void => {
    void router.push("/boards/list");
  };

  const onClickLogin = (): void => {
    void router.push("/main");
    console.log(userName);
  };


  const onClcikLogout = async (): Promise<void> => {
    await logoutUser();
    setAccessToken("");
    setIsLogin(false);
    setUserName("");
    console.log(accessToken);
    console.log(isLogin);
  };

다음은 레이아웃 header부분의 코드입니다. 데이터를 받아와 userName에 useRecoilState를 사용하여 저장합니다. 로그아웃 버튼을 누르면 setAccessToken, setUserName을 이용하여 공란을 만듭니다. setIsLogin을 이용하여 login상태를 false로 변경합니다. 그럼 분명히 userName이 없어져야 하는데

로그아웃 버튼을 누르고 다시 로그인하기를 눌러도 console.log(userName);을 해보면 aaaa라고 나옵니다. 다시 재차 로그인을 이름이 aaaa가 아닌 다른 아이디로 해보아도

3333이란 이름이 나와야 하는데

aaaa로 나옵니다. 혹시 이유가 뭔지 알 수 있을까요?

주소창에 주소를 다시 입력하고 로그인하면 새롭게 적용이 잘 됩니다. 하지만 동적라우팅으로만 했을 시 적용이 되지 않습니다.