Sessions and Cookies #01

今回はプレイヤーに覚えてもらってみます。

どういう意味か覚えておいてください.ログインしているのを見ることができます.Dashboardのラベルに入ることもできます.
アイコン画面に行ってemailを修正することもできます.
サイトはユーザーが誰なのか知っているので、可能です.
YouTubeもそうです.あなたが誰なのか知っているので、どんなチャンネルを購読したのか確認できます.
このログインの概念を説明する必要もありません.どのプレイヤーがログインしたか覚えておきます.
プレイヤーを覚える方法の一つは、プレイヤーにクッキーを送ることです.
Cookieを理解するには、まず会話を理解する必要があります.
セッションとは、バックエンドとブラウザの間のアクティビティを記憶することです.
たとえば、Webサイトにログインしている場合は、現在使用しているブラウザとバックエンドの間に
セッションは存在しますしかし、2週間後には会話が消えます.会話が消える
では、再ログインする必要があります.セッションは、ブラウザとバックエンドの間のmemory、historyと同様です.
ただし、正常に動作するには、バックエンドとブラウザに関連する情報が必要です.
登録ページでHTTPリクエストが発行されると、リクエストは処理されて終了するからである.
それ以来、バックエンドは何もできなくなった.バックエンドもブラウザも何もできません.
たとえば、Home画面に移動すると、GET要求、バックエンドが表示されます.HTMLが完了すると接続は終了します.接続を維持できません.
この時からつながっているわけではありません.常に接続されているrenderとは異なります.
ここではそんなに良い接続はありません.リクエストを受信して処理が完了すると、サーバは誰がリクエストを発行したかを尋ねます.
忘れました.ブラウザも忘れました.サーバはもう必要ありません.
これをWIFI(無状態)と言います.接続は一度で終わります
この2つの間の接続はstatelessではありません.接続は一度で終わります
プレイヤーにいくつかの情報を残しますユーザーがバックエンドにリクエストを送信すると、誰がリクエストを発行しますか?
彼らに知らせなければならない.だから、ユーザーがログインするたびに、ユーザーに何かをあげます.
小さなテキストのようなもの.これはあなたのテキストです.持ってきてください.
ユーザが要求するたびに、テキストを一緒に送信するように要求されます.
それを手に入れてプレイヤーであることを確認します.そのプレイヤーの情報をお見せできます
混同したら、直接会話を書いて、このテキストが何なのかを理解します.
重要なのは、ユーザーがログインしたときにユーザーにどのようなテキストを与えるかです.
今はまだ何なのか分かりませんが、プレイヤーが誰なのかを知ることができるものだと思います.
また,ユーザが要求を出すたびに,テキストの一斉送信が要求される.

stateをインストールして、どのように動作しているかを理解します。

このmiddelwareは、middlewareにおいてセッションを処理することを可能にする.
https://www.npmjs.com/package/express-session
セットしておきましょうexpressコンソールからvscと入力します.
現在はnpm i express-sessionからserverからsessionまでです.

import session from "express-session";
app.set("view engine", "pug");
app.set("views", process.cwd() + "/src/views");
app.use(logger);
app.use(express.urlencoded({ extended: true }));

app.use(
  session({
    secret: "Hello!",
    resave: true,
    saveUninitialized: true,
  })
);

app.use("/", rootRouter);
app.use("/videos", videoRouter);
app.use("/users", userRouter);

export default app;

importの前にmiddelwareを初期化できるようになりました.routerの前にあります.
そしてrouterと書いて、この中でapp.use(session)に設定すべきです.
まず今はsecretです.後でこの"Hello!"を誰も知らない文字列に書きます.
今すぐそうします.次に、コンソールに2つの可能なコンテンツを追加します.
一つはsecretで、resaveと呼ばれ、もう一つはtrueです.
これもsaveUninitializedと呼ばれています.
このようにtruesessionが追加されました.
このmiddlewareがウェブサイトに入ったすべての人を覚えています.
ログインしていなくても覚えています.入ってきた人にどんな文字をあげますか.
そのテキストでプレイヤーが誰なのかを見つけます.これはずっと説明しているテキストであることを理解してみましょう.
ホームページでmiddlewareを作り、inspectのラベルに入り、Application、Cookiesがあります.
今はまだビスケットがありません.リフレッシュしてないから.リフレッシュすると、ブラウザがサーバにリクエストを送信します.
サーバは、localhost:4000によってブラウザにテキストを送信します.
サーバがブラウザを単独で覚えられるようにします.更新すると変なテキストが生成されます.
今でもこれが何なのか混同される可能性があります.全然理解できないかもしれません.
ただし、このテキストは、リフレッシュのたびにバックエンド(session``middleware)に要求が送信される場合に、
バックエンドに一緒に送信されます.ブラウザは自分でバックエンドにCookieを送信します.
このビスケットは何ができますか?localhostを作って説明します.

app.use((req, res, next) => {
  console.log(req.headers);
  next();
});

このmiddelwareは、middleware、req、resである.nextもあります.req.headerを試してみてください.その後、console.logに電話します.
では、ビスケットがどうやって出てきたのか見てみましょう.コンソールをリフレッシュして確認すると、next()が表示されます.Cookieの名前もあります.希望するかどうかにかかわらず、ブラウザをリフレッシュするたびに
バックグラウンドでCookieを受信する.これは本当に役に立ちます.
ユーザーが初めてウェブサイトにアクセスすると、奇妙なテキストが送信されます.
では、この文字の内容が何なのか気になります.
これを説明するために、もう一つのCookieを作成します.
この奇妙なテキストが何をしているのかがわかります

app.use((req, res, next) => {
  req.sessionStore.all((error, sessions) => {
    console.log(sessions);
    next();
  });
});

そうすると、コンソールには次のような内容が表示されます.middlewareとsessionが見えます.
バックエンドで覚えているユーザーたちです.リフレッシュして確認します.
ご覧のように、バックエンドはユーザーを覚えていません.もう一度更新します.
バックエンドでプレイヤーを覚えました.テキストの先頭を表示します.
コンソールのテキストは、console.logに表示されるテキストと同じです.
バックエンドにセッションがあることを伝えるかもしれません.
また、使用しているブラウザでは、Applicationがこれらしいです.

これマジ(?)正否を確かめる

現在のブラウザではなく、別のブラウザを開きます.同様にidを作り、inspectラベルに入ります.ApplicationCookiesで確認します.ご覧のように、ビスケットがあります.
しかし、冒頭の部分は違います.今から楽屋に戻って見ると、会話の中で2人のプレイヤーを覚えているという人がいます.
ご覧のように、楽屋は誰が自分に要求したのか覚えています.
バックエンドは、この奇妙なlocalhost:4000を要求を送信したユーザに送信した.
Chromeでは、これはidとされ、他のブラウザでは別のidとされています.
バックグラウンドで2人のプレイヤーを覚えていることを知っていればいいです.
これをセッションと呼び、現在2つのセッションがあります.
これがバックエンドがidで記憶される方法です.クッキーにはidが入っています.
次のセクションでは、セッションに基づいて、フロントエンドにコンテンツを表示するセクションを作成します.