「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>