devise token auth を使って簡単に早くAPIを作る 2

※ちょくちょくGithubで公開してもらえませんか？的なことを聞かれるので、Bitbuckeのアカウントでコードを公開いたしました。ミスなどがあったらすみません。時間があるときに直します。
devise-token-auth 完成物のリンク

全て連続しているので上から順に進めていっていただけるとわかりやすいと思います！
devise token auth を使って簡単に早くAPIを作る1( api作成 )
devise token auth を使って簡単に早くAPIを作る2 ( jsonの出力 ) 今回はここ
devise token auth api をAngular4 でUIを実装する1 ( angularのセットアップ )
devise token auth api をAngular4 でUIを実装する2 ( ログインを繋げる )
devise token auth api をAngular4 でUIを実装する3 ( 新規登録 )
devise token auth api をAngular4 でUIを実装する4 ( ログインしやすくする)

以前devise token authを使ってAPIを作る記事を書いたのですが、
結構反応がよかったのでついでにAngularを使ってUIも作ってみようかと思います!

Angularを使って見るためにも、まずは簡単なデータを返すことができる様に追加していきます

scaffolding

以下のコードを実行します

$  rails g scaffold hobby name
$ rake db:migrate

今回はjsonを出力するためにjbuilderを使用するのでhobbies_controller.rbは以下の様に修正します

# ちなみにindexのみを扱う予定なので、showなどはご自身でお願いします
class HobbiesController < ApplicationController
  def index
    @hobbies = Hobby.all
    render 'index', :formats => [:json], :handlers => [:jbuilder]
  end
end

次はrails c でデータを作ります

Hobby.create(name: '野球')
Hobby.create(name: 'サッカー')
Hobby.create(name: 'テニス')

データを作成後下記リンクにアクセスすると

http://localhost:3000/hobbies

この様なjsonデータがレンダリングされています！

ここにdeviseと同じく制限をかけてみます

class HobbiesController < ApplicationController
  before_action :set_hobby, only: [:show, :update, :destroy]
  before_action :authenticate_api_user! # この行を追加！
  
  def index
    @hobbies = Hobby.all
    render 'index', :formats => [:json], :handlers => [:jbuilder]
  end
end

先ほどと同じ様にアクセスすると

ログインエラーが返ってきます

postmanを使って試して見る

ログインして返ってきた情報

• access-token
• client
• uid

を

以下のリンクにGETリクエストをすることで

http://localhost:3000/hobbies

ログイン制限をかけることができます

rack corsの問題を回避

最後にですが、Angularに進む方はこの対策をしておいてください
rack corsを回避しないとリクエストが弾かれるという状況に陥ってしまうので、
今のうちに対処しときます

詳しい情報はネットにたくさん転がっていると思うので、一度調べておくと今後のためにもなると思います

module DeviseTokenAuth
  class Application < Rails::Application
    config.api_only = true

    config.middleware.insert_before 0, "Rack::Cors" do
      allow do
        origins '*'
        resource '*',
                 :headers => :any,
                 :expose => ['access-token', 'expiry', 'token-type', 'uid', 'client'],
                 :methods => [:get, :post, :options, :delete, :put]
      end
    end
  end
end

Angularではログイン機能全般を実装した上で、Hobbyを取得できるところまで進めていく予定です

次の記事
devise token auth api をAngular4 でUIを実装する1 ( angularのセットアップ )