Zenn
🙆

【Rails】ログイン中の顧客名をヘッダーに表示する

2023/10/18に公開
Rails
初心者
DMM WEBCAMP
tech

動的ヘッダーの作成にあたりログイン中の顧客名を表示させるのに復習として記します。

ログアウト中

ログイン中

動的ヘッダーを作成する

まずは動的ヘッダーを作成！

app/views/layouts/application.html.erb
<header>
<% if customer_signed_in? %>
  <div>
    <%= link_to "マイページ", customer_path %>
  </div>
  <div>
    <%= link_to "商品一覧", items_path %>
  </div>
  <div>
     <%= link_to "カート", cart_items_path %>
  </div>
  <div>
     <%= link_to "ログアウト", destroy_customer_session_path, method: :delete %>
   </div>
 <% else %>
   <div>
      <%= link_to "About", about_path %>
   </div>
   <div>
      <%= link_to "商品一覧", items_path %>
   </div>
   <div>
      <%= link_to "新規登録", new_customer_registration_path %>
   </div>
   <div>
      <%= link_to "ログイン", new_customer_session_path %>
   </div>
   </div>  
<% end %>
</header>

今回はログイン中とログアウト中で表示されるリンクが違うため、<% if customer_signed_in? %>を使用し作成。
<% if customer_signed_in? %>はdevise側で用意しているヘルパーメソッドになります。
deviseの機能を使って顧客（customer）がログインしているか、ログインしていないかを判断し、どちらかによってブラウザに表示する内容を変更することができます。
各リンクごとにlink_toメソッドを使用しパスを指定、if文の結果は下記のようになります。

  • ログイン済みならば true が、ログインしていなければ false が返されます。
  • ログイン済みの場合、<% if customer_signed_in? %>から<% else %>間のコードが表示されます。
  • ログインしていない場合、<% else %>から<% end %>間のコードが表示されます。

ログイン中の顧客を表示

<%= current_customer.last_name %>

上記の文を<% if customer_signed_in? %>の下に記述しログイン中の顧客名を呼び出します。

app/views/layouts/application.html.erb
<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-danger justify-content-end"> 
  <% if customer_signed_in? %>
  <div class="mt-3 mr-5 text-white">
  ようこそ、<%= current_customer.last_name %>さん!　# 追加部分
  </div>
  <div class="d-flex flex-row-reverse"> 
     <div>
       <%= link_to "マイページ", customer_path,class: "btn btn-danger" %>
  ・
  ・
　<% end %>
</header>

今回は、苗字（last_name）を呼び出し前後にようこそ、とさん！で囲んであげることで下記のように表示ができます。あとはお好みでBootstrapを使用し完成です。

Discussion