Step by Step Ruby on Rails

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

Ruby on Rails Tutorial 管理者権限を追加し、ユーザー削除機能追加

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。今回は、ユーザーの属性に管理者権限を追加し、管理者権限のあるユーザーがユーザー削除を行う機能を追加します。

(1)ユーザーテーブルに管理権限属性を追加

1)usersテーブルに"admin"属性を追加

$ rails generate migration add_admin_to_users admin:boolean

2)ユーザーの"管理権限"は、defaultは"false"にする

ユーザー登録時に、管理権限を明示的に指定しなかった場合は、"false"を明示的に設定するようにします。

下記のように"default: false"を追加します。

$ vi db/migrate/20150720124615_add_admin_to_users.rb

class AddAdminToUsers < ActiveRecord::Migration
  def change
    add_column :users, :admin, :boolean, default: false
  end
end

3)マイグレーション実行

$ bundle exec rake db:migrate

4)railsコンソールで管理ユーザー追加

$ rails console

2.0.0p247 :001 > adminuser = User.create(name: "admin", email: "admin@example.com", password: "xxxxx", password_confirmation: "xxxxx",admin: true)
2.0.0p247 :002 > adminuser.admin?
 => true
adminuser = User.create(name: "admin", email: "admin@example.com", password: "adminpass", password_confirmation: "adminpass",admin: true)

(2)Railsコントローラに設定追加

1)destroyアクション追加

$ vi app/controllers/users_controller.rb

  def destroy
    User.find(params[:id]).destroy
    head :no_content
  end

2)ログイン済みユーザーのみdestroyアクションを実行できるようにする

下記のように"signed_in_user"のbeforeフィルターにdestroyを追加します。

$ vi app/controllers/users_controller.rb

before_action :signed_in_user, only: [:index,:update,:destroy]

3)destroyアクションは管理権限を持つユーザーのみに制限するフィルター作成

$ vi app/controllers/users_controller.rb

  before_action :admin_user,     only: :destroy
  :
  private
  :
    def admin_user
      remember_token = User.encrypt(cookies[:remember_token])
      current_user ||= User.find_by(remember_token: remember_token)
      render status: :unauthorized unless current_user.admin?
    end

(3)AngularJSビューにユーザー削除のボタンを追加

ng-show="{\{chkAdmin}}で、ログイン済みユーザーが管理者権限を持つ場合のみユーザー削除のリンクを表示するようにしています。

$ vi app/assets/templates/users/index.html.erb

<ul ng-repeat="user in currentitems" class="users">
  <li>
    <img alt="{\{user.name}}" src="https://secure.gravatar.com/avatar/{\{hash(user.email)}}?s=52" />
    <a href="/users/{\{user.id}}">{\{user.name}}</a>
    <a ng-show="{\{ychkAdmin}}" href="" ng-click="delete(user.id)">| delete</a>
  </li>
</ul>

(4)AngularJSコントローラに設定追加

$scope.chkAdminと$scope.delete()関数を追加します。

"userResource"サービスのdestroyアクションを使って削除します。

削除後、ユーザー一覧情報を更新するため、サーバーからユーザー情報を取得しなおしています。

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

myModule.controller("UsersIndexCtrl", function($scope, userResource, flashService, $location, sessionResource, $q) {
  :
  var deferred = $q.defer();
  deferred.promise.then(function (result) {
    var user_info = result;
    if (user_info.user.id > 0) {
      $scope.chkAdmin = user_info.user.admin;
      userResource.index({}, function(response) {
        $scope.users = response;
        $scope.totalitems = $scope.users.length;
        $scope.currentitems = $scope.users.slice(start,end);

        $scope.$watch('currentpage', function() {
          start = ($scope.currentpage - 1) * $scope.itemsperpage;
          end = start + $scope.itemsperpage;
          $scope.currentitems = $scope.users.slice(start,end);
        },true);
      });
    } else {
      $location.path("/signin");
    }
  },function (reason) {
    console.log("qgetUser-Error");
  })
  qgetUser (deferred);
  :
  $scope.delete = function(id) {
    userResource.destroy({ id: id });
    userResource.index({}, function(response) {
      $scope.users = response;
      $scope.totalitems = $scope.users.length;
      $scope.currentitems = $scope.users.slice(start,end);
    });
  };
});