Help us understand the problem. What is going on with this article?

deviseを使ったログイン機能の実装の流れ(超おおまか+備忘録)

More than 1 year has passed since last update.

1.deviseのgemをインストール (2回行う)

(1回目)

bundle install

その後、1回だけRailsサーバーを立ち上げ直す。

(2回目)

rails g devise:install

2.userモデルを作成する

rails g devise user

モデル作成のコマンドを実行すると、マイグレーションファイルが作成される。そして、そのマイグレーションファイルを以下のコマンドで実行する。

rake db:migrate

そして、userテーブルを作成する。
https://gyazo.com/de5ffbed0dee23fd349bd014be895ce5

3.ログインボタンの表示

ログイン時 → 「ログアウト」ボタンと「投稿する」ボタンを表示させる。
非ログイン時 → 「ログイン」ボタンと「新規登録」ボタンを表示させる。

<header class="header">
    <div class="header__bar row">
      <h1 class="grid-6"><a href="/">PicTweet</a></h1>
      <% if user_signed_in? %>
        <div class="user_nav grid-6">
          <%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
          <a class="post" href="/tweets/new">投稿する</a>
        </div>
      <% else %>
        <div class="grid-6">
          <%= link_to "ログイン", new_user_session_path, class: 'post' %>
          <%= link_to "新規登録", new_user_registration_path, class: 'post' %>
        </div>
      <% end %>
    </div>
  </header>

4行目のif文とuser_signed_in?メソッドを使って、「もしも、userがサインイン(ログイン)していたら、『ログアウト』ボタンと『投稿する』ボタンを表示させる」という処理を先に書く。次に、もしも、userがサインイン(ログイン)していなかったら、『ログイン』ボタンと『新規登録』ボタンを表示させる」という処理を後に書く。

4.それぞれのボタンをクリックすると、それぞれの処理がなされる仕組みについて

「ログイン」ボタンや「新規登録」ボタンを押すと、ログインの処理や新規登録の処理がされる理由は、htmlのビューの画面に<%>(Rubyタグ)でlink_toメソッドを使って、ルーティングアクションを起こす仕組みを設定しているからである。link_toメソッドは、htmlのaタグに自動で読み変えてくれる便利なヘルパーメソッドである。

<%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
 <a class="post" href="/tweets/new">投稿する</a>
<%= link_to "ログイン", new_user_session_path, class: 'post' %>
<%= link_to "新規登録", new_user_registration_path, class: 'post' %>

link_toメソッドの書き方は、第1引数に文字列(ボタンの文字)、第2引数にルーティングに対するパス、第3引数にhttpメソッドを書く。

※ルーティングのパスを調べるには、rake routesのコマンドを実行する。

このような表記をすることで、ボタンをクリックすると、ルーティングにパスが送られて、コントローラがアクションするという流れができる。

以上の流れでログイン機能を簡単に実装することができる。

okamoto_ryo
2019年4月から本格的にプログラムを勉強している文系大学4年生です。主にHTML/CSS/JavaScript/jQuery/Ruby/Ruby on Railsを勉強しています。そして、今後はPHP/Laravel/vue.js/Reactなどのフレームワークを学習していきます。 日々の勉強で学んだことや自分なりに理解できたことを発信していきます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away