로그인기능 구현하기

로그인 기능을 구현하려고 한다.
accessToken = JWT (만료시간: 30분 ~ 2시간)

app.tsx로가서 설정을 해주고

export const GlobalContext = createContext(null); 


const [myAccesToken, setMyAccesToken] = useState(""); 
  const [myUserInfo, setMyUserInfo] = useState({}); 
  const myValue = {
    accessToken: myAccesToken,
    setMyAccesToken: setMyAccesToken,
    userInfo: myUserInfo,
    setMyUserInfo: setMyUserInfo,
  };
  
  const uploadLink = createUploadLink({
    uri: "http://backend04.codebootcamp.co.kr/graphql",
    headers: {
      authorization: `Bearer ${myAccesToken}`, 
    },
  });


 return (
    <GlobalContext.Provider value={myValue}>
      <ApolloProvider client={client}>
        <Global styles={globalStyles} />
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </ApolloProvider>
    </GlobalContext.Provider>
  );

globalcontext 추가후

다시 로그인 페이지로가서 globalcontext작성후

다시 app로 와서 header 추가

  const uploadLink = createUploadLink({
    uri: "http://backend04.codebootcamp.co.kr/graphql",
    headers: {
      authorization: `Bearer ${myAccesToken}`, //로그인관련
    },
  });

그리고

패치유저로그드인 추가

export default function LoginPage() {
const { setMyAccesToken } = useContext(GlobalContext);
const router = useRouter();
const [myEamil, setMyEmail] = useState("");
const [myPassword, setMyPassword] = useState("");
const [loginUser] = useMutation<
Pick<IMutation, "loginUser">,
IMutationLoginUserArgs

(LOGIN_USER); //onClickLogin 부분

function onChangeMyEmail(event: ChangeEvent) {
setMyEmail(event.target.value);
}

function onChangeMyPassword(event: ChangeEvent) {
setMyPassword(event.target.value);
}
async function onCliCKLogin() {
//async await 해주기
const result = await loginUser({
variables: {
email: myEamil,
password: myPassword,
},
});
localStorage.setItem(
"accessToken",
result.data?.loginUser.accessToken || ""
);
setMyAccesToken?.(result.data?.loginUser.accessToken); //여기요
// result.data?.loginUser.accessToken;
// 여기서 setAccesToken 필요! (글로벌 스테이트에..)

//로그인 성공된 페이지로 이동시키기
router.push("/23-05-login-success");

}
return (
//
<>
이메일:
비밀번호:
로그인하기
</>
);
}

  
로그인이 완료되어서 넘어 가면 

function LoginSuccessPage() {
const { data } =
useQuery<Pick<IQuery, "fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN);
return (
<>

  <div>로그인에 성공하였따</div>
  <div>{data?.fetchUserLoggedIn.name}님 환영합니다</div>
</>

);
}

export default withAuth(LoginSuccessPage);