会員制サイト

目次

ログイン状態に応じて表示・非表示を制御する

会員制サイトの制作時に活用できる、ログイン状態に応じて要素の表示・非表示を制御するためのJavaScriptです。

会員制サイトの制作時に、読者ユーザーがログインしている状態でページキャッシュを有効にした設定をしている場合、タッチモジュールやグローバル変数での制御だけでは、意図しないユーザー情報がキャッシュされ、読者ユーザーがログインしているにも関わらず、ログインしていない状態のHTMLが表示されることがあります。

この問題を解決するため、JavaScriptでログイン状態を判定するプログラムの記述が必要です。この組み込みJSを利用することで、ログイン状態に基づいた表示・非表示の制御が可能です。

使い方

ログイン状態に応じて、表示・非表示の制御をしたい要素に以下のクラスを追加してください。

ログイン状態に応じて、display: none 及び display: block のCSSが適用されます。



クラス名 説明
js-login-hidden ログイン状態の時、非表示にする
js-login-show ログイン状態の時、表示する
js-logout-hidden ログアウト状態の時、非表示にする
js-logout-show ログアウト状態の時、表示する
<div class="js-login-hidden">
  <!-- ログイン時に非表示になります -->
</div>
<div class="js-login-show">
  <!-- ログイン時に表示されます -->
</div>
<div class="js-logout-hidden">
  <!-- ログアウト時に非表示になります -->
</div>
<div class="js-logout-show">
  <!-- ログアウト時に表示されます -->
</div>

表示時に適用される display プロパティの値を変更する

js-login-showjs-logout-show といったクラスは、ログイン状態に応じて要素を表示する機能として、デフォルトで display: block のスタイルが適用されます。しかし、display: flex など、別の値を適用したい場合があるかもしれません。

そういった場合には、data-display 属性を用いて適用する値を変更することができます。

<div class="js-login-show" data-display="flex">
  <!-- ログイン時にdisplay: flexのスタイルが適用されます -->
</div>
<div class="js-logout-show" data-display="grid">
  <!-- ログアウト時にdisplay: gridのスタイルが適用されます -->
</div>

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。

  //----------------------------
  // ログイン状態による表示・非表示
  loginHiddenMark: '.js-login-hidden', // ログイン状態の時、非表示にする
  loginShowMark: '.js-login-show', // ログイン状態の時、表示する
  logoutHiddenMark: '.js-logout-hidden', // ログアウト状態の時、非表示にする
  logoutShowMark: '.js-logout-show', // ログアウト状態の時、表示する