⭐️管理画面へのログイン機能、管理画面トップページの作成

概要

管理画面へのログイン機能を実装。
管理画面のトップページを仮で作成。

手順

1 . AdminLTE version3をインストール
2 . マニフェストファイル設定
3 . 管理者用コントローラー設定
4 . Userモデルに管理者判定用カラム追加
5 . ルーティング設定
6 . ビューの設定

1 . AdminLTE version3系をインストール

yarn add admin-lte@^3.1

これで、node_modules/admin-lteが作成されます。このディレクトリ内に各種テンプレートがあるので、コピペして管理者用画面を作成していきます。今回は、同ディレクトリ内のstarter.htmlを使用していきます。　

2 . マニフェストファイル設定

今までは、app/assets/javascripts/application.js app/assets/stylesheets/application.scssに全て記述していましたが、管理者画面は一般ユーザー用と見た目が大きく異るため、別々で管理していきます。

以前は、//= require tree.でapplication.js配下の全ファイルを読み込んでいました。しかし、今回は同じ階層に管理者用のマニフェストファイルをファイルを配置するため、このままだと不必要な管理者用ファイルを読み込んでしまいます。

そのため、個別にファイルを読み込む記述に変更します。
新しく、管理者用ページのマニフェストファイルを作成します。

アセット関連の設定

・config/initializers/assets.rbに下記がコメントアウトになっているので外してあげる。

Rails.application.config.assets.precompile += %w[admin.js admin.css]

3 . 管理者用コントローラー設定

・管理系の機能を持つコントローラーを作成していきます。

・管理系コントローラーに共通する機能を持つ基底クラス、Admin::BaseControllerを作成する

・他の管理系コントローラーは、Admin::BaseControllerを継承する。

application_controllerを継承するadmin/base_controllerを作成し、全ての管理画面用コントローラーはこのbase_controllerを継承する設計とするには、
rails g controller Admin::Base
admin::とすれば自動で改装を作ってくれる。

他にも、ダッシュボード（トップページ）とログイン用のコントローラーを作っておきます。

rails g controller Admin::Dashboards index

rails g controller Admin::User_sessions new

class Admin::DashboardsController < Admin::BaseController
ここの記述でbase_controllerを継承します。
そのため、レイアウト宣言は不要です。

4 . Userモデルに管理者判定用カラム追加

usersテーブルにroleというカラムを追加し、そこの値で権限を判定できるようにしていくので、
rails g migration AddRoleToUsersで

整数(integer)のデータ型でroleカラムを追加し、デフォルトで0を指定する。（0は一般） - general・・・一般　- admin・・・管理者

rails db:migrateして同時に、
Userモデルにenum role: { general: 0, admin: 1 }を記述。

5 . ルーティング設定

namespace :admin do
    root to: 'dashboards#index'
    get 'login', to: 'user_sessions#new'
    post 'login', to: 'user_sessions#create'
    delete 'logout', to: 'user_sessions#destroy'
end

/admin で始まるURLにしたいので、namespace :adminで名前空間を設定します。

6 . ビューの設定

・node_modules/admin-lte/starter.htmlから必要部分を切り分けしています。
header/sidebar/footerは切り分けて、views/admin/sharedに配置しました。詳細は省略します。
管理者用共通ビューのこのファイルで、先程設定したadmin.js admin.scssを読み込んでいます。

・今回、管理者用のページは「ダッシュボード　｜　RUNTEQ BOARD APP（管理画面）」のように（管理画面）と出力したいです。