Logged In User #02

Response objectから何かを知る必要があります。

これを理解するために,sessionを理解するために書かれたmiddlewareを用いた.server.jsから

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

resonse object,console.log.そして確認して更新後にエラーが発生しました.
どうでもいいnodeを見るとconsole.logがたくさんありますResponse objectで知りたいのがlocalsです.

 locals: [Object: null prototype] {},

ご覧のように、localsは空のobjectです.
この空いているobjectは良いニュースです.pug templateからlocalsに近づくことができる.
これは基本的に可能です他にやる必要はない.pugおよびExpresslocalsを共有できます.
これはどういう意味ですか.locals objectを変えると言ったら、templateからlocals objectの
内容を確認できます.確認しよう

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

こうしてlocals objectに1つ追加されました.pugファイルはすべてlocals objectにアクセスできます.
また、base.pugでも変更されます.

body 
        header
            h1 Who is sexy? #{sexy}
            nav 
                ul 
                    li  
                        a(href="/") Home
                    li 
                        a(href="/join") Join
                    li 
                        a(href="/login") Login
                    li  
                        a(href="/search") Search
                    li 
                        a(href="/videos/upload") Upload Video

なお、今回のみ、pageTitleを変更する.Who is sexy?、#{sexy}と書きます.このまま書けばいいlocals.とかは使いません.
起動できるかどうか見てみましょう.pageTitle出力は"Who is sexy? you"です.
このようにして、templatesおよびdataが共有される.そしてこれはglobal(グローバル変数)ですtemplateはすべて使えます.ご覧のように、このtitleは変わっていません.
他の場所に回っても、ずっと保持されています.また、localsはtemplateのすべての場所に位置している.
もちろん、middlewareがrouterに適用される場合に限られる.templateからsexyという変数が使用できるようになりました.
とても良いニュースですこれは、template変数をグローバルに送信できることを意味する.
変数をres.renderに送信する必要はありません.locals objecttemplateです
グローバルに送信できます.
言い換えれば、locals objectはすでにpug templateからimportのすべてのobjectである.
これでも試してみてください.

app.use((req, res, next) => {
  res.locals.sexy = "you";
  res.locals.siteName = "Wetube";
  req.sessionStore.all((error, sessions) => {
    console.log(sessions);
    next();
  });
});

そしてbase.pugです.

head
        title #{pageTitle} | #{siteName} 

このように交換します.これはlocals object以内であるべきだと改めて強調した.
リフレッシュするとWetubeがよく適用されます.

app.use((req, res, next) => {
  res.locals.sexy = "you";
  res.locals.siteName = "xxxxxXXXXX";
  req.sessionStore.all((error, sessions) => {
    console.log(sessions);
    next();
  });
});

このように変更してリフレッシュすると、xxxxxXXXXXに適用されます.
これはlocals objectで、本当に役に立ちます.localsにログインしているユーザーを追加するためです.
これは、templateが誰がログインしたのかを知ることができることを意味します.siteNameのようなものも本当に役に立ちます.だからmiddlewareを作ります.pageTitleに戻ります.middlewareを作成します.srcフォルダにmiddlewareファイルを作成します.
このmiddlewareをlocalsMiddlewareといいます.

export const localsMiddleware = (req, res, next) => {
  res.locals.siteName = "Wetube";
};

req,resおよびnextが受信され、ここではlocalsが設定される.いくつかのlocalsを設定します.
例えば、siteNameおよびWetubeである.
これはmiddlewareです.localsMiddleware.server.jsから

import { localsMiddleware } from "./middleware";


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

app.use(localsMiddleware);

このように修正してapp.use(localsMiddleware);を追加すると、自動的にimportにはなりません.
別に作ってくれました.
作成するmiddlewaresをすべてmiddlewareファイルに追加します.
これからやるべきことはもう決まった.localsで誰がログインしたのかを共有します.
ではもう一度登録してみましょうその前に、ここではreq.sessionおよびconsole.logを試みた.

export const localsMiddleware = (req, res, next) => {
  console.log(req.session);
  res.locals.siteName = "Wetube";
  next();
};

コンソールウィンドウをリフレッシュ、ログインして表示します.

Session {
  cookie: { path: '/', _expires: null, originalMaxAge: null, httpOnly: true },
  loggedIn: true,
  user: {
    _id: '625942ace3564e09811a5f21',
    email: '[email protected]',
    username: 'Cyber Lover',
    password: '$2b$05$WMO/VH/yctvvPJST0SyLq.QRQfSNeLJ5zAJPFfRMwLgg5ZFq1KtBm',
    name: 'Mercury',
    location: 'NYC',
    __v: 0

session、cookie, loggedIn, userがあります.

[Object: null prototype] {
  tW3l1LCHc8Zc0urTdDkEnlo1xRh2uhV7: {

これはmiddlewareで、上の部分はlocalsからの内容です.
ご覧のように、localsMiddlewareはreq.sessionに近づくことができます.
そして、これは本当に重要だと改めて強調しました.
これはlocalsMiddlewareがsession middlewareになってから可能になったからです

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

localsMiddlewareをここに移すと

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


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

sessionは表示されません.

undefined
[Object: null prototype] {}

コンソールウィンドウはこのように出てきます
現在、localsMiddlwareはsession middelwareの後に位置しています.
このようにしてこそ、localsMiddlewareはsession objectに近づくことができる.
コンソールを再リフレッシュして確認すると、

[Object: null prototype] {}
Session {
  cookie: { path: '/', _expires: null, originalMaxAge: null, httpOnly: true }
}

出力session.
また、このmiddlewareは削除されます.

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

私はバックエンドで覚えているすべての人を見たいだけです.
それではここでsessionを確認してみます.コンソールウィンドウを表示します.

Session {
  cookie: { path: '/', _expires: null, originalMaxAge: null, httpOnly: true }
}

ログインする前に何かをします.

export const localsMiddleware = (req, res, next) => {
  res.locals.loggedIn = Boolean(req.session.loggedIn);
  res.locals.siteName = "Wetube";
  console.log(res.locals);
  next();
};

ログイン時の様子を見てみることにしました.req.sessionのloggedInがtrueなら

if(req.session.loggedIn){
  res.locals.loggedIn = true;
}

これはもうちょっと修正すればいいです.

res.locals.loggedIn = req.session.loggedIn;

しかし、この値はfalseであってもよいし、undefinedであってもよい.Boolean()を使用して、この値がtrueまたはfalseであることを確認します.

  res.locals.loggedIn = Boolean(req.session.loggedIn);

だからこうして出てきた
そしてres.localsをconsole.log()に撮影
どんな結果になるか見てみましょう.もう一度更新します.
コードを保存し、より良いセッションストレージを設定できないためです.
すべてのセッションが消えました.

[Object: null prototype] { loggedIn: false, siteName: 'Wetube' }
GET / 304 191.753 ms - -

これから分かるように、これらの価格はlocalsです.リフレッシュごとlocalsあります.このobjectとtemplateが共有されていることが今になって分かった.
だからこれはどういう意味ですか.

                    li  
                        a(href="/") Home
                    if loggedIn
                        li 
                            a(href="/logout") Log Out        
                    else 
                        li 
                            a(href="/join") Join
                        li 
                            a(href="/login") Login

この部分では、ログインしたと言ったら、何かを展示します.
もしそうでなければ、私はあなたにこれらを見せます.userが既にログインしている場合
ログアウトボタンを見せます.そしてlogoutと書きます.

pugファイルから地元の人にアクセスできるのを覚えています。

localsの値を与えると、pugが読めます.これがlocalsです.loggedInの値がfalsesiteNameの値がWetubeです.

[Object: null prototype] { loggedIn: false, siteName: 'Wetube' }
GET / 304 191.753 ms - -

ログインして結果を見てみましょう.登録しましたが、logoutありました.

[Object: null prototype] { loggedIn: true, siteName: 'Wetube' }
GET / 200 57.525 ms - 593

コンソールを見るとlocalsならloggedIn: trueただいまログインしておりますリフレッシュも保持されています.別のブラウザを試します.
ご覧のように、ここにはログインしていません.防根認証システムを構築した.Login、join、비밀번호 암호화は現在expressであり、セッションもCookieも処理しています.
プレイヤー間では区別もできます.req.sessionにuserがあったのを覚えています.ここにはreq.sessionとuserがあります.

[Object: null prototype] {
  tW3l1LCHc8Zc0urTdDkEnlo1xRh2uhV7: {
    cookie: { originalMaxAge: null, expires: null, httpOnly: true, path: '/' },
    loggedIn: true,
    user: {
      _id: '625942ace3564e09811a5f21',
      email: '[email protected]',
      username: 'Cyber Lover',
      password: '$2b$05$WMO/VH/yctvvPJST0SyLq.QRQfSNeLJ5zAJPFfRMwLgg5ZFq1KtBm',
      name: 'Mercury',
      location: 'NYC',
      __v: 0
    }

この値はtemplateと共有できます.やってみる

export const localsMiddleware = (req, res, next) => {
  res.locals.loggedIn = Boolean(req.session.loggedIn);
  res.locals.siteName = "Wetube";
  res.locals.loggedInUser = req.session.user;
  next();
};

この値段は最初はundefinedだったはずです.ログインしていないので.
コードを保存しようとします.ご覧のように、リフレッシュ後に再ログアウトします.
この部分は次の部分で行います.その前にこちらに来てください.

li  
                        a(href="/") Home
                    if loggedIn
                        li 
                            a(href="/logout") Log Out
                        li 
                            a(href="/my-profile") #{loggedInUser.name} Profile
                    else 
                        li 
                            a(href="/join") Join
                        li 
                            a(href="/login") Login

navigationこれはまだ存在しません.a(href="/my-profile")で何をしたか、ログインしている場合はbase.pugボタンを表示します.logoutのおかげで、locals middlewareがありました.
これはloggedInUserreq.session.user;かもしれないからです.undefined未登録の場合はuserは使用できません.
しかし、この部分では、確かにloggedInUserが登録されています.
ログインしたらuserの値があることを意味しますloggedInUserを使用できます.loggedInUser.nameにloggedInUserがあることを知っているからです.
もう一度やってみる.再登録するとそのプレイヤーの名前+24579142が表示されます.
現在、この価格はnameのすべての場所で共有されています.
現在、Profileとtemplateはありません.ご覧のように、この価格はProfileと共有されています.
ログインシステムを構築したばかりです.LogOutおよびtemplate、Session、Cookie、패스워드 암호화が使用される.
そして패스워드 비교を用いてlocals戦区で変数を用いる方法を学習した.

コードを保存するたびにpugが初期化されていることを覚えておいてください。

コードを再保存し、ホームページにリフレッシュしてログアウトします.
現在、コードを保存するたびにSessionが消えています.サーバはユーザーを忘れます.