Angularjs ui-routerログインモデルの例

Question

私はangularjsとbootstrapを初めて使っています。私は最近、2つの異なるビューセット（パブリックとプライベート）を必要とするWebアプリケーションに取り組んでいます。

一般公開の場合、誰もがそれを見ることができ、独自のトップメニューのnavbarとそれに対応するコンテンツがあります。

プライベートビューの場合、認証されたユーザーのみが表示できます。プライベートビューは、全く異なるトップメニューとそれに対応するコンテンツを持つ必要があります。 （たぶん、サイドメニューのnavbarが、これは話題にはなりません）。

私はui-routerのapiページをhereから読んでいます。そして私はこのようなナビゲーションを実装しました。私は上記の持っていた（plunker）

app.config(function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/'); 

    $stateProvider.state('public', { 
    'abstract': true, 
    views: { 
     'mainView@': { 
     templateUrl: 'public.html' 
     } 
    } 
    }) 
    .state('home', { 
    parent: 'public', 
    url: '/', 
    templateUrl: 'home.html' 
    }) 
    .state('login', { 
    parent: 'public', 
    url: '/login', 
    templateUrl: 'login.html', 
    controller: 'LoginController' 
    }) 
    .state('private', { 
    'abstract': true, 
    views: { 
     'mainView@': { 
      templateUrl: 'private.html' 
     } 
    } 
    }) 
    .state('dashboard', { 
    parent: 'private', 
    url: '/dashboard', 
    templateUrl: 'dashboard.html' 
    }) 
    .state('settings', { 
    parent: 'private', 
    url: '/settings', 
    templateUrl: 'settings.html' 
    }) 
    .state('logout', { 
    parent: 'private', 
    url: '/logout', 
    templateUrl: 'logout.html', 
    controller: 'LogoutController' 
    }) 
}); 

例plunkerが働いているが、私は、これは、このようなナビゲーションを処理するための「最良の」アプローチであるか分かりません。誰かが私のソリューションを強化するのを手伝ってもらえると大変感謝しています。

ありがとうございます。

Answer 1

私はあなたのアプローチが好きで、きれいに見えます。しかし、それが欠けていると感じるものは、セキュリティです。解決依存関係を追加することで、セキュリティを素早く追加できます。

解決

あなたは状態にカスタムされたコンテンツやデータを使用して、コントローラを提供するために、決意を使用することができます。 resolveは、コントローラに注入されるべき依存関係のオプションのマップです。

これらの依存関係のいずれかが約束されている場合、それらは解決され、コントローラがインスタンス化されて$ stateChangeSuccessイベントが発生する前に値に変換されます。

解決プロパティはマップオブジェクトです。マップオブジェクトには、次のキーと値のペアが含まれます。

key - {string}：コントローラに注入される依存関係の名前。 factory - {string | function}： 文字列の場合、サービスのエイリアスです。 それ以外の場合は、関数が注入され、戻り値は依存関係として扱われます。結果が約束の場合、コントローラーがインスタンス化され、その値がコントローラーに注入される前に解決されます。

.state('dashboard', { 
    parent: 'private', 
    url: '/dashboard', 
    templateUrl: 'dashboard.html', 
    resolve:{ 
     promiseObj: function($http){ 
     // $http returns a promise for the url data 
     // returns a promise so the resolve waits for it to complete 
     // If the promise is rejected, it will throw a $stateChangeError 
     return $http({method: 'GET', url: '/someUrl'}); // confirm here that the user is logged in 
     } 
    })