Step by Step Ruby on Rails

Ruby on Railsで実際にWebサイトを構築する手順をまとめています。

Ruby on Rails Tutorial マイクロポストのアクセス制御、エラーメッセージ表示

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。マイクロポストの登録、削除時のアクセス制御、登録時のエラーメッセージの設定を行いました。

(1)Railsアクセスコントローラにアクセス制限の設定追加

beforeフィルターを使って、登録実行時にログイン済みかどうか、削除実行時にログイン済みで正しいユーザーかチェックします。

Micropostsコントローラにbeforeフィルターを定義します。

$ vi app/controllers/microposts_controller.rb

class MicropostsController < ApplicationController
  before_action :signed_in_user, only: [:create, :destroy]
  before_action :correct_user,   only: :destroy

  private
    def signed_in_user
      remember_token = User.encrypt(cookies[:remember_token])
      current_user ||= User.find_by(remember_token: remember_token)
      if current_user.nil?
        render status: :unauthorized
      end
    end
    def correct_user
      micropost = Micropost.find(params[:id])
      remember_token = User.encrypt(cookies[:remember_token])
      current_user ||= User.find_by(remember_token: remember_token)
      if current_user.id != micropost.user_id
        render status: :unauthorized
      end
    end

(2)バリデーションエラー時のエラーメッセージを設定

1)AngularJSコントローラ

$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("HomeCtrl", function($scope, flashService, micropostsResource, sessionResource) {

  $scope.submit = function() {
    function success(response) {
   :
    }
    function failure(response) {
      _.each(response.data, function(errors, key) {
        _.each(errors, function(e) {
          $scope.micropostForm[key].$dirty = true;
          $scope.micropostForm[key].$setValidity(e, false);
        });
      });
    }
    micropostsResource.create($scope.micropost, success, failure);
  };

  $scope.errorMessage = function(name) {
    var s = $scope.micropostForm[name].$error;
    result = [];
    _.each(s, function(key, value) {
      result.push(name + " " + value);
    });
    return result.join(", ");
  };

2)AngularJSビュー

$ vi app/assets/templates/static_pages/home.html.erb

<div ng-controller="HomeCtrl">
   :
  <form name="micropostForm" ng-submit="submit()" novalidate>
    <textarea name="micropost" class="form-control"
              ng-model="micropost.content" rows="3"
              ng-maxlength="140" required>
    </textarea>
    <span class="text-danger" ng-show="micropostForm.content.$dirty && micropostForm.content.$error.maxlength">
      content is too long (maximum is 140 characters) 
    </span>
    <span class="text-danger" ng-show="micropostForm.content.$invalid && micropostForm.content.$dirty">
      {\{errorMessage('content')}}
    </span><br />
    <button type="submit" ng-disabled="micropostForm.$invalid"
            class="btn btn-large btn-primary">Post
    </button>
  </form>