フォームを持つComponentであれば、あらかじめonChange関数を記述しておき、フォームのいずれかの行でonChangeが発生すると、React Componentの状態に対応する変数が変化します。
JSONウェブトークン
セッションを置き換えるために、ユーザ認証に使用され、すべてのユーザデータをクライアントに保存します。
ユーザーがログインすると、サーバーは認証後にJWTを生成してユーザーに送り返し、ユーザーはそのJWTをlocalStorageに保存します。それ以降、クライアントがサーバーと通信するたびに、このJWTを持っていかなければなりません。
なぜセッションではなくJWTを使うのですか？
セッションの使用はサーバクラスタリングとクロスドメインサービスのアーキテクチャに大きな影響を与えます。クッキーはドメイン間でサポートされていないので、クラスタリングの場合、すべてのサーバがセッションを読めるようにセッションデータを共有しなければなりません。
この問題を解決するために、JWTが導入されました。ユーザー情報はフロントエンドに保存され、サーバーはセッションを保存する必要がなく、クロスドメインやクラスタに関係なく、ユーザー情報を取得することができます。
JWTの3つの部分
1) ヘッダー: JSONオブジェクトで、署名されたアルゴリズムalgとトークンタイプtypを持ちます。
2) ペイロード：渡される実際のデータを保持するJSONオブジェクト。公式フィールドiat exp...プライベートフィールドを保持することができます "user": { "id": "nlnlknkn"}.
- 署名：ユーザーによるデータの改ざんを防ぐための、最初の2つの部分の署名。
JWTをreq.user.idにパースするために、APIを呼び出すたびに持っていくミドルウェアを書きました。
やり直し
店舗：店舗の状態
Reducer：返されたアクションのタイプに応じて、異なる状態を返します。
a. プライベートルート。
ダッシュボード、createProfile、EditProfileのRouteに、PrivateRouteを追加しました。reduxのステートのauthに、isAuthenticatedがあり、isAuthenticatedがtrueの場合、通常のdashboard/profile/createProfile...コンポーネントに移動します。
- reactとreduxを使ったページの作り方：
1): ページ上でアクションを呼び出したときに、ページがステートに対応する情報を取得できるように、アクションとリデューサを最初に記述します。
2): 州から得た情報に従って、見栄えが良くなるようにページ上にレンダリングします。
レスポンシブデザイン
- cssに.hide-smというclassNameを作成し、幅が一定値以下の場合はdisplay:noneにします。
- パーセントレイアウト
- レム・レイアウト
- メタタグの設定
- media query + 条件判定
リアクト
a. 実際、実際のルートはすべてApp.jsで定義され、バックエンドのルートはhttpリクエストにのみ使用されます。
b. フック
1) useState。コンポーネント内にフォームがある場合、フォームの情報を維持するためにコンポーネントレベルのステートが必要です。
c. showActions
PostItem.jsにshowActionsを追加し、PostsページでPostItem thisコンポーネントをtrueに設定（これがデフォルト）すると、コメントのようにその行が表示されます。falseに設定すると、その行は表示されません。
エクスプレスとNode.js
ExpressとNode.jsでサーバーを作成します。
1. ルートプロセッサの作成。http動詞。パス。ミドルウェア。コールバック関数。
2.ミドルウェアの使用ミドルウェアのauthを作成し、特定のHTTP動詞とルートに対してこの関数を追加します。
3. エラー処理res.status(500).send('Server Error').
4.データベースを使うMongoDB に接続し、データベースの追加、削除、変更を行います。
ヒント
2) bcrypt内でソルトとハッシュを使ってユーザーのパスワードを暗号化します。
