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

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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

フロントエンドエンジニアのいなばです。 LIGではAngularやVueなどのフレームワークを使った中~大規模のWebアプリケーション開発、フロントエンドエンジニアの育成などを担当しています。 好きなものはカフェインとカプサイシン。 趣味はランニングと一眼レフです。

このメンバーの記事をもっと読む