devise の設定(2) - 不定期刊 Rails App を作る(10)

RailsApp Rails devise 2018年 11月 16日

model の実装が終わったので，続いて views を修正してログインできるようにする．

views の修正

1. name 属性は not null で追加したため，app/views/devise/registrations/new.html.haml に text_field を追加する

.field
  = f.label :name
  %br/
  = f.text_field :name, autocomplete: 'name'

2. 同様に app/views/devise/registrations/edit.html.haml にも text_field を追加する
今回追加した name は sign up 時およびアカウント更新時にパラメータとして渡される．このため，devise において Strong parameter に name を登録する必要がある． 「deviseでストロングパラメータを追加する (Rails5を受けての変更点)」 にて説明があるように，Rails 5 で設定の仕方が変更されている．app/controllers/application_controller.rb に configure_permitted_parameters メソッドを追加するとともに，devise_controller の時に，before_action するようにする．

class ApplicationController < ActionController::Base
  (中略)
  protected
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
    devise_parameter_sanitizer.permit(:account_update, keys: [:name])
  end

4. ログインしていない時に，サインインページに飛ぶように before_action を追加する．

class PagesController < ApplicationController
  before_action :authenticate_teacher!
  def home
  end
end

5. localhost:5000 にアクセスすると，pages#home ではなく，teachers#sign_in に遷移し，ログイン画面が表示される．

教員の登録

1. まだ教員が作成されていないので，サインインすることはできない．ここでは「Sign up」のリンクをクリックして，登録画面に飛ぶ(devise の registrable の機能である)．この画面では先ほど追加した Name 属性のテキストフィールドが追加されていることが確認できる．

2. sign up すると以下のように登録が完了されたという画面が表示される．

サインアウト

1. このままだとサインアウトすることができないので，app/views/pages/home.html.haml にサインアウトのためのリンクを追加する．

link_to 'Sign out', destroy_teacher_session_path, method: :delete

2. 再描画すると以下のようにリンクが生成される．

3. クリックしてみると次のようなエラーがでる．これは，method: :delete の機能が Javascript で実装されているためである．以前は，Rails をインストールすると jquery-ujs が自動的にインストールされていたが，5.1 以降は jquery に依存していないのでインストールされなくなった．これにより，DELETE ではなく GET へのリンクと判断されてしまっている． 参考: Rails 5.1を使うならSprocketsは捨ててwebpackを使おう

4. この問題に対応するために，Javascript のみで書かれた rails_ujs をインストールする．まず，yarn で rails_ujs を追加する．

$ yarn add rails-ujs
yarn add v1.12.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "@rails/webpacker > postcss-cssnext@3.1.0" has unmet peer dependency "caniuse-lite@^1.0.30000697".
warning " > webpack-dev-server@2.11.2" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
warning "webpack-dev-server > webpack-dev-middleware@1.12.2" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.12.3", while you're on "1.12.1".
info To upgrade, run the following command:
$ brew upgrade yarn
success Saved 1 new dependency.
info Direct dependencies
└─ rails-ujs@5.2.1
info All dependencies
└─ rails-ujs@5.2.1
✨  Done in 5.92s.

5. 次に frontend/packs/application.js に rails-ujs の読み込みを追加する．

import Rails from 'rails-ujs'
Rails.start()

6. 再度，pages#home を再描画し「Sign out」をクリックすると，無事にサインアウトできるようになった．

長くなったので今日はここまで