Reactで永続性を持たせる方法

今回はログインの時などでReactで永続性を持たせる方法について紹介します。

Reactで永続性を持たせる方法

結論から言うと、localstorageを使えば大丈夫です。

これ以外の方法もありますが、今回はlocalstorageを使用します。
localstorageでは、ローカルのStorageオブジェクトにアクセスでき、そこに
保存することができます。

sessionStorageと違いは、sessionStorageだと保存されたデータはセッションが終わる（ブラウザを閉じる）と同時に消去されることです。

localstorageだと、キャッシュなどを削除しない限りは残るので安心です。

 const SignIn: SubmitHandler<SampleFormInput> = (email: any) => {
    alert("ログインしました");
    signInWithEmailAndPassword(auth, email.email, email.password)
      .then((userCredential: any) => {
        const user = userCredential.user;
        localStorage.setItem("Token", user.accessToken);
        router.push("/");
      })
      .catch((err) => {
        alert("ログインできません");
        console.log(err);
      });
  };

自分の場合は、inputにてメールアドレスとパスワードを受け取り、
firebase authenticationを用いて認証しています。
もし処理が成功したら、 localStorageに、Tokenに user.accessTokenをセットしています。
こうすることにより、ログイン時を判断するTokenをセットできます。

自分の場合は下記のコードでログインかどうか判断しています。

    useEffect(() => {
      let token = localStorage.getItem("Token");
      if (!token) {
        router.push("/register");
      } else {
        getData();
      }
    }, []);

tokenがなければredirectするという書き方です。

ログインの永続性で悩んでいる方がいればぜひ参考にしてみてください！