AngularJS ui-routerを使って認証機能を実装してみよう

みなさま、GWは満喫できたでしょうか？
こんにちは、フロントエンドエンジニアの稲葉です。

今回はAngularJSでui-routerを使って簡単に認証機能を実装したサンプルをご紹介したいと思います。
実際の動作はDEMOで確認することができます。（モックなのでEメールとパスワードはなにかしら文字が入力されていれば通ります）
デモのソースコードはこちらに置いています。

ui-routerとは

angular-ui/ui-router · GitHub：
https://github.com/angular-ui/ui-router

ui-routerはAngularJS用のルーティングモジュールです。
viewの入れ子をサポートするなど高機能で扱いやすいので、標準のngRouteよりui-routerを使っている人の方が多いのではないかという気がします。

ルーティングの準備

まずはログインページとログイン後に遷移するTOPページを用意します。

(function(angular){
    angular.module('app',[
        'angular-loading-bar',
        'ui.router',
        'restangular',
        'constants',
        'services',
        'controller',
        'config'
    ]).config([
        '$stateProvider',
        '$urlRouterProvider',
        function($stateProvider,$urlRouterProvider){
            $urlRouterProvider.otherwise("/login");
            $stateProvider
                .state('/', {
                    url: '',
                    abstract: true,
                    templateUrl: 'views/index.html',
                    controller: 'index.IndexCtrl'
                })
                .state('index', {
                    url: '/index',
                    controller: 'index.DashboardCtrl',
                    parent: '/',
                    templateUrl: 'views/dashboard.html',
                    auth: true
                })
                .state('login', {
                    url: '/',
                    templateUrl: 'views/login.html',
                    controller: 'login.LoginCtrl'
                })
        }
    ]);

    angular.bootstrap(document, ["app"]);
})(angular);

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。