Cookieを使用したログイン情報の保存（JavaScript）

架空の状況を作成しましょう。構築しているサイトの重要なログイン情報があるとします。ユーザーがアクセスしたときにサイトが自動的にログインするシステムを実装したい場合、ユーザーにボタンをクリックして毎回ログインさせるというアプローチは機能しません。

ここでCookieが登場します。HTTP Cookieは、簡単に言うと、データを保存する方法であり、データをサーバーに送信できます。トムスコットによるビデオの例では、クッキーをダーク/ライトモードの設定に使用できます。ブラウザは使用するテーマの設定を含むCookieを設定し、サーバーは正しいテーマを通信します。ただし、このチュートリアルでは、サーバーとの通信ではなく、ストレージにCookieを使用します。

使用できるnpmパッケージがありますjs-cookie（または、スクリプトタグを使用してjsDelivr CDNからインポートできます。インストール方法の詳細については、このリンクを使用してください）。

次に、実際の実装が行われます。これにはReact（JS用のUIライブラリ）を使用しますが、JavaScriptを含むものなら何でも使用できます。前回の執筆から、FirebaseAuthenticationを使用してログイン情報を取得しました。そこからコードを取得します（ただし、何が起こっているのかを理解するためにコードを読む必要はありません）。js-cookieインストール後にインポートするには、JavaScriptファイルの先頭に次のコード行を配置します。

import Cookies from ‘js-cookie’

res変数は、ユーザーのGitHubのアカウントの詳細についてはFirebase認証からの応答（私は「ログインでGitHubの」ボタンを実装）です。でクッキーを設定しCookies.set()ます。関数が受け取る最初の引数は、Cookieの名前です。この場合、に設定しuserInfoます。2番目の引数はオブジェクト（JSONに似ています）です。これはクッキーの内容です。この構造に従う必要はなく、4キロバイト未満であれば何でも含めることができます。このStackOverflowの投稿に従って、ドメインに最大50個のCookieを設定できます。3番目の引数はオプションであり、Cookieの存続期間を定義する別のオブジェクトです（ここでは、29日間保存します）。

これで、ユーザーがサインインすると、ログイン資格情報がCookieに保存されました。

このCookieの取得も同様に簡単です。ログイン資格情報を保存したので、ユーザーをメインページにリダイレクトできます。プレーンHTML + CSS + JavaScriptを使用している場合は、通常window.location.href、ユーザーがアクセスするページにを設定できます。これは、ページをホストするサーバーをセットアップするのに役立つ優れたチュートリアルです。この次のセクションではReactを使用したリダイレクトについて説明するため、スキップすることもできます。

ただし、Reactを使用している場合は、React Routerを使用してこのタスクを実行します。

React RouterのWebバージョンをインストールするにnpm i react-router-domは、プロジェクトのディレクトリで実行します。（注：react-routerReactでモバイルアプリケーションを作成する方法であるReact Nativeのモジュールをインストールするため、名前の付いたパッケージをインストールしないでください。）すばらしい！これでReactルーターがインストールされました！

ここで、ReactDOM.render()関数を含むファイルでコーディングを開始する必要があります。

これを分解させてください。上部には、基本的に必要なものをインポートするReactRouterインポートがあります。import yourComponent from ‘RELATIVE_PATH_TO_YOUR_COMPONENT’;ただし、これはより重要です。

React Routerを使用すると、新しいHTMLファイルを指す代わりに、特定のエンドポイントにリダイレクトするときにコンポーネントをロードできます。名前yourComponentは好きな名前に変更できます。これRELATIVE_PATH_TO_YOUR_COMPONENTは、ReactコードをレンダリングするJavaScriptファイルからコンポーネントへのパスです。

次に、このコードブロックを見てみましょう。

<Router>
    <Switch>
        <Route path="/PAGE_NAME" component={yourComponent}/>
    </Switch>
</Router>

ここでは、<Route>コンポーネントが最も重要です。これが、Reactアプリのエンドポイントを定義するものです。この例では、をに設定しpathて/PAGE_NAMEおりyourComponent、ユーザーがそのページにアクセスしようとするとレンダリングされることがわかります。PAGE_NAMEパーツを目的のエンドポイントに変更します。たとえば、必要に応じ/coolて、の/cool代わりにに変更します/PAGE_NAME。

React Routerが提供するものはたくさんあります。詳細については、ドキュメントを読むことをお勧めします。

リンクを処理するためのインフラストラクチャをセットアップしたので、実際にCookieを取得する方法について説明できます。

js-cookieもう一度インポートするにimport Cookies from ‘js-cookie’は、JavaScriptファイルの先頭に入力します。次に、データを取得するには、以下のコードを使用します。

JSON.parse(Cookies.get('userInfo'));

プレーンなHTML、CSS、JavaScriptを使用している場合は、これでガイドは終わりです。クッキーが機能していることを願っています！そうでない場合は、このビデオを見てください。それでも機能しない場合は、コメントを書いてください。私がお手伝いします。

ただし、Reactを使用している場合は、長期的にはメリットが得られる可能性のある追加の手順がいくつかあります。

まず、<Redirect>JavaScriptファイルの先頭に次のように入力して、ReactRouterライブラリからコンポーネントをインポートします。

import {Redirect} from 'react-router-dom';

最初のifブロックの条件では、名前のCookieuserInfoがnullかどうかを確認します。そうである場合、ユーザーをと呼ばれる特定のエンドポイントにリダイレクトします/login。（注：ユーザーは任意のエンドポイントにリダイレクトできます。設定することを忘れないでください！）。ただし、Cookieがnullでない場合は、Cookieの解析済みJSONをと呼ばれる変数内に保存しuserDataます。

以上です！これでuserData、JSONオブジェクトのようにこの変数にアクセスできます。

私の2番目のミディアム記事を読んでくれてありがとう！何か提案があれば、プライベートコメントで知らせてください！