RailsなWebアプリを構築する際の認証系のライブラリとして人気のDeviseをAngularJSと連携してみる。

DeviseとAngularJSを連携させるAngularDeviseというライブラリが公開されてるのでそれを導入。

インストール

bowerでangular-deviseをインストールする。bower-railsがインストールされてる前提で↓
(bowerではなくRailsのgemとしてアセットを追加する方法もある)
まずBowerfileにangular-deviseを追加し、

インストールすると

vendor/assets/bower_components/angular-deviseが生成される。

最後にapplication.jsにangular-deviseのロード処理を記述。

Rails側の設定

認証結果をJSONで受け取る必要があるので、ApplicationControllerに↓を定義。

また、CSRF Forgery Protection を有効にする際はangular_rails_csrfの利用を推奨。

AngularDeviseのロード

AngularJSの初期化時にDeviseをロードするモジュールとして追加する。

モジュールがロードされるとAuthサービスが利用できる状態になる。

認証処理

未認証の場合はログイン画面へ、認証済みの場合はトップ画面に遷移するといったよくある認証系の遷移処理を実装する。認証状態による遷移の切り替えは、AngularJS でログインのフローを作るを参考にして実装。
今回は$rootScopeに$routeChangeStartをバインドして認証状態を判断して、ルーティングの挙動を変更する方法で実装。

認証画面のtemplateとcontrollerは↓

  • login.html

  • login.controller.js

とAngular DeviseのAuthサービスを使うだけであとはよろしくやってくれる。

2015/05/20 追記
認証状態の判断は、↑の$routeChangeStartで行わずともAngularDeviseが提供しているAuthInterceptProviderを利用する方がスマートかも。
まず、AuthInterceptProviderを有効にする。

401が発生すると、”devise:unauthorized”がブロードキャストされるので、ログイン画面へ遷移させる。