クッキーによるログイン情報の保存( JavaScript )

This is an article originally from Medium. I have decided to switch from Medium to dev.to and import all my posts from there.

仮想の状況を作りましょう.あなたが構築しているサイトの重要なログイン情報を持っていると言う.私たちがあなたのサイトが彼らが訪問するとき、あなたのサイトが自動的にユーザーをログで記録するシステムを実装したいならば、ユーザーが毎回ログインするボタンをクリックさせるアプローチは働かないでしょう.
ここはクッキーが写真に入ってくるところです.HTTPクッキーは単純な条件でデータを格納する方法です.トムスコット、クッキーの例では、ダーク/ライトモードの好みに使用することができます.あなたのブラウザーは使用するテーマの好みを含んでいるクッキーをセットします、そして、サーバーは正しいものを正に通信します.しかし、このチュートリアルでは、サーバーと通信するためのストレージ用のクッキーを使用します.
NPMパッケージがありますjs-cookie (あるいは代わりに、スクリプトタグを使用してJsdeliVR CDNからインポートすることもできます.this link インストール方法の詳細については
これが実際の実装です.私はこれ(JSのためのUIライブラリ)のために反応を使用するつもりです、しかし、あなたはJavaScriptを含む何でも使うことができます.私の最後からwriting , FireBase認証を使用してログイン情報を取得しました.私はそこからコードを拾おうとしています.輸入するjs-cookie インストール後、JavaScriptファイルの先頭にこのコード行を置きます.import Cookies from ‘js-cookie’さて、これはログイン情報を取得した後にクッキーを設定するコードです

const loginAsync = async () =>{
        const res = await githubLogin();

        //This is where we create the Cookie. Note the syntax.
        //The JavaScript object we created here is just stuff for me to use later.

        Cookies.set('userInfo', {
            username: res.additionalUserInfo.username,
            pfp: (res.additionalUserInfo.profile.avatar_url).toString()+'.png',
            accessToken: res.credential.accessToken

        }, {expires: 29})

        //The expires line basically says the cookie expires in 29 days.

        //this is not a part of js-cookie but if you're interested, I have a getter and setter with React's useState hook which basically
        //says if it has to redirect to the main content.
        setRedirect(true);   
    }

The res 変数は、ユーザのGithubアカウントの詳細についてのFireBase認証からの応答です(私は「Githubによるログイン」を実装しました).私たちはクッキーをセットしたCookies.set() . 関数の最初の引数はクッキーの名前です.この場合、userInfo . 2番目の引数はオブジェクト(JSONに似ています)です.これはクッキーの内容です.それは4キロバイトの下にある限り、この構造に従う必要はありませんし、何かを含めることができます.あなたのドメインで50クッキーを1つにすることができますthis Stack Overflow post . 三番目の引数はオプションで、クッキーがどれくらい続くかを定義する別のオブジェクトです.
今、ユーザーがログインすると、我々はクッキーにログイン資格情報を格納している!
このクッキーを検索するのも同様に簡単です.ログイン資格情報を保存したので、ユーザーをメインページにリダイレクトできます.普通のHTML + CSS + JavaScriptを使用している場合は、window.location.href あなたがあなたのユーザーが行って欲しいページへ.これはgreat tutorial あなたのページをホストするサーバーを設定するために.また、skip ahead この次のセクションとして反応でリダイレクトをカバーします.
しかし、反応を使用している場合は、使用するReact Rout erこのタスクを達成する.
To install 反応ルーターのウェブ版npm i react-router-dom プロジェクトのディレクトリにあります.(注意:パッケージ名をインストールしないでください.react-router として、それは反応ネイティブのためのモジュールをインストールするには、反応を使用してモバイルアプリケーションを書く方法です.)すごい!これで反応ルータをインストールしている!
今、あなたは、ReactDOM.render() 関数.

import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import ReactDOM from 'react-dom';

import yourComponent from 'RELATIVE_PATH_TO_YOUR_COMPONENT';




ReactDOM.render(


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

    </Switch>
  </Router>
  ,
  document.getElementById('root')
);

これを壊させてください.トップで、我々は基本的に我々が必要とするものを輸入する我々の反応ルータ輸入をします.The import yourComponent from ‘RELATIVE_PATH_TO_YOUR_COMPONENT’; しかし、より重要です.
新しいHTMLファイルを指していない代わりにRouter Routerを使用すると、特定のエンドポイントにリダイレクトするときにコンポーネントを読み込むことができます.改名できますyourComponent 何をしたいです.The RELATIVE_PATH_TO_YOUR_COMPONENT JavaScriptファイルからコンポーネントへのパスを返します.
では、このコードブロックを見てみましょう.

<Router>  
    <Switch>  
        <Route path="/PAGE\_NAME" component={yourComponent}/>  
    </Switch>  
</Router>

これは基本的に私たちのWebアプリケーションのエンドポイントを設定します.The <Router> これは、“我々はURLのエンドポイントを設定するコードは、”これは反応を指示しますThe <Switch> がすべての場合、最初のエンドポイントを選択するコンポーネントです.例えば、エンドポイントを/profile and /:variable そして、後者はあなたが「Shubhampatilsd」を検索するような終点のURLからパラメータを取り出すことができるようにgithub.com/ShubhamPatilsd ), <Switch> は最初のエンドポイントを使用します./profile ○○.
The <Route> コンポーネントはここで最も重要です.これは我々の反応アプリのエンドポイントを定義するものです.この例では、私が設定したpath to /PAGE_NAME そしてそれがレンダリングyourComponent ユーザーがそのページにアクセスしようとすると.変更するPAGE_NAME あなたが望む終点へのパート.例えば、あなたが/cool うん、あなたはそれを変えるだろう/cool の代わりに/PAGE_NAME ○○.
ルーター提供に反応するものがたくさんありますdocumentation を参照してください.
今、我々は我々のリンクを扱うためにインフラストラクチャをセットアップしました.
輸入するjs-cookie 再び、タイプimport Cookies from ‘js-cookie’ JavaScriptファイルの上部にあります.次に、データを取得するには、次のコードを使用します.JSON.parse(Cookies.get('userInfo'));君は必要だJSON.parse だってjs-cookie JSONのクッキーデータを自動的に返さず、文字列として返します.コードの残りの部分がJSONのようなraw文字列にアクセスしようとすると、エラーになります.
プレーンHTML、CSS、およびJavaScriptを使用している場合、これはガイドの終わりです!私はあなたがクッキーを働いている願っています!そうでなければ、見てください、そして、それがまだ働かないならば、私があなたを助けることができるように、コメントを書くことができました.
あなたが反応を使用している場合は、まだ長期的にあなたに恩恵をもたらす可能性のあるいくつかの余分な手順があります.
まず、インポート<Redirect> あなたのJavaScriptファイルのトップでこれを入力することによって反応ルータライブラリからのコンポーネント:import {Redirect} from 'react-router-dom';次に、if else文を実装して、ユーザがログインしているかどうかを確認します.

if(!Cookies.get('userInfo')){
    return <Redirect to='/login'  />
  }else{
      const userData = JSON.parse(Cookies.get('userInfo'));
      //your ui here

最初のifブロックの状態については、userInfo がNULLである.もしそうであれば、ユーザは/login ○○.(注意:ユーザは任意のエンドポイントにリダイレクトすることができます.クッキーがNULLでない場合は、クッキーのパースされたJSONをuserData .
そして、それ!今すぐアクセスできますuserData JSONオブジェクトのような変数!
私の2番目の媒体記事を読んでくれてありがとう!何か提案があれば、私にプライベートコメントでお知らせください!
そばShubham Patil on April 19, 2021 .
Canonical link
からエクスポートMedium 2021年8月15日