Reactでクッキーを使う

作成日:2022-12-13 ・更新日:2023-07-25

Tags: React

react-cookieを使用して状態の確認を行う

ログインを維持している状態、初めて訪れている場合のみ、再度ページを開く等状態を保存するcookieを利用して、表示を変更させます。

react-cookie使用する

react-cookieを利用しクッキーの追加削除、有効期限を設定します。
使い方がとても簡単なのでよく使っています。

実際の使いどころ

cookieの代表的な使用用途として

ログインされているか
動画の再生位置を保存する
初回訪問時〇〇を表示する
ワンタイムパスワード
fetchで得たデータ

使ってみる

ダウンロードはnpmでダウンロードを行います。

npm install react-cookie

1.CookiesProviderを追加

index.js

import reportWebVitals from './reportWebVitals';
import { CookiesProvider } from 'react-cookie'; //<--これ
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <CookiesProvider>　{/*<--これ*/}
    <App />
    </CookiesProvider>　{/*<--これ*/}
  </React.StrictMode>
);

2.useCookiesを定義

App.js

import { useCookies } from "react-cookie";//<--import
function App() {
  const [cookies, setCookie, removeCookie] = useCookies(['']);//--init
return(
  {/*
  .....
  */}
)
}

3.クッキーに値を入れる

App.js

function App() {
  //クッキー追加ファンクション
  const Setcookiesfunction =(()=>{
    setCookie("key","値");
  })
}

ちなみにこのuseCookiesの変数はなんでも可、順番だけは守ってください。以下のコードでも動きます。

//const [cookies, setCookie, removeCookie] = useCookies(['login']); 
const [kukki-yomikomi, kukki-touroku, kukki-sakujo] = useCookies(['login']);<--これでも可
//このようにした場合クッキーの値追加も次のように設定します。
kukki-touroku("key","値");

使い方

useCookies

App.js

const [cookies, setCookie, removeCookie] = useCookies(['login']);

このように useCookies()のかっこ内の値はオプションです。ここで指定されたクッキーが更新された時画面のレンダリングが発生します。
しかし、何も設定しない場合は、クッキーのどれかの値が更新されるたびに、画面の再レンダリングが発生してしまうので、何か値を入力しください。

例

const [cookies, setCookie, removeCookie] = useCookies(['login','username']); 

setCookie('login',true);//<--画面のレンダリングが発生
setCookie('username',"ユーザー名");//<--画面のレンダリングが発生
setCookie('Password',"abcdefg");//<--発生しない。

仮に再レンダリングが完全に不要の場合は['']を設定すれば大丈夫でしょう。

const [cookies, setCookie, removeCookie] = useCookies(['']); 

setCookie('login',true);//<--発生しない。
setCookie('username',"ユーザー名");//<--発生しない。
setCookie('Password',"abcdefg");//<--発生しない。

setCookie

setCookieで値を追加できます。

setCookie("引数１番目", '引数２番目','引数3番目')

引数1番目

cookieの名前(KEY)の部分です。値はなんでも良いです。

引数2番目

2番目は値です。trueと入れていますが"string"でも大丈夫。

引数3番目

3番目はoptionになります。
不要であれば引数3番目は入れなくても大丈夫です。
とりあえず使うのは有効期限の設定かと思います。
有効期限を指定しない場合はクッキーの有効期限はセッションとなり、ブラウザを閉じるまで維持されます。

有効期限の設定は

クッキーの有効期限の設定方法は2種類あります。

日付で指定

const cookieDate = new Date('2022-12-15 23:59:59')
const [cookies, setCookie, removeCookie] = useCookies(['login']);//--init
 setCookie("login",'ログインしています。', { expires: cookieDate });//<-- 2022-12-15日迄有効

2022年12月15日まで残るクッキーを生成.

または

残り時間を指定

const [cookies, setCookie, removeCookie] = useCookies(['login']);
 setCookie("login",'ログインしています。', { maxAge : 2592000 }); // <--30日有効

1か月だけ残るクッキーを生成。

使ってみる

CookiesProviderの追加

index.js

import reportWebVitals from './reportWebVitals';
import { CookiesProvider } from 'react-cookie'; //<--これ
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <CookiesProvider>　{/*<--これ*/}
    <App />
    </CookiesProvider>　{/*<--これ*/}
  </React.StrictMode>
);

クッキーの追加、削除ボタンの作成。

App.js

import { useCookies } from "react-cookie";
    const [cookies, setCookie, removeCookie] = useCookies(['login']);//--init
    const Cookietest = (()=>{
        setCookie("login",'ログインしています。');
    })
    const Cookieremove = (()=>{
        removeCookie("login");
    })
    return(
        <>
        <p>cookieTest</p>
        <button onClick={Cookietest}>クッキー追加</button>
        <button onClick={Cookieremove}>削除</button>
        <p>{cookies.login && cookies.login}</p>
        </>
    )

表示が変わっているのはクッキーが変わった後に再レンダーされているためです。
再レンダーをさせたくない場合は以下のように設定する。
画面が変わっていないため分かりにくいと思うがクッキーの追加削除はできています。

const [cookies, setCookie, removeCookie] = useCookies(['']);

クッキーの中身を確認する方法はいくつかあるが、私の場合chrome devのアプリケーションタブで確認します。
ここで手動でクッキーを追加することもできます。

実際の運用

実際の運用方法ではfetchのサーバー問い合わせしログイン実行という使い方だとおもうが、正直このような使い方をするのであれば、ReactQueryを使う方が楽に実装ができる。詳しくはReactQueryを触ってみるを参考ください。
以下のコードはnextjsを利用している。とても簡易的なものなので参考までに. 機能としてはログインしてない状態であればアラートを出し、http POSTでログインが成功した場合クッキーのloginにtureの値を入れています。 HTTP GET POSTのテストはmockableやpostmanを使えば簡単にテストができます。

  const [cookies, setCookie] = useCookies(['login']);
  if(cookies.login){return (
    <LoginPage/>
   )}
  const cookieDate = new Date('2022-12-15 23:59:59')
  const onSubmit = (async (data) => {
    try { 
    let result = await fetch('/api/POST/', {
        method: "POST",
        headers: { "Content-Type": "Application/json" },
        body: JSON.stringify(data)
      });
      if(result.status == 200){
      setCookie("login", true, { expires: cookieDate });
    }
    else{
      alert("エラーが発生しました管理者にお問い合わせください")
    }
    }
    catch {
      console.log("error")
    }
  });

公式ドキュメント

公式サイト

cookieは安全なのか？

ブラウザーにはクッキーとローカルストレージと言うものがあるので一時的にデータを保存することが可能になっている。
結論だけ言うとどちらも安全とは言えない。cookieによる被害は滅多にないと思うが確実に安全だとは言い難いので漏れたらダメな情報は保存しない方が良い。せめて暗号化した情報のみを保存するようにする必要がある。