AngularJSセキュリティとローカルストレージの追加Watch

Question

私は、角度ui-routerをルーティングに使用しているangularJSアプリケーションを持っています。

は、私は次のセキュリティレベルを追加しましたが、それは私を助けていない：私は、ローカルストレージ内のトークンとユーザー役割を格納しています

1. 。ユーザーの役割に基づいて 私はルートにユーザーをリダイレクトしています。

2. 私はローカルストレージに時計サービスを適用しましたが、リフレッシュすると はローカルストレージの最後の（古い）値を取得しませんでした。この場合、私のチェック（ウォッチ）は失敗します。

3. 誰かがローカルストレージと更新サイトでトークンを変更したとき。 私はトークンが変更されているかどうかを確認することができません。

4. この場合、ユーザーはテンプレートを表示できますが、バックエンドにセキュリティレイヤーが追加されているため、データを取得できません。しかし、私もテンプレートへのアクセスを防ぐ必要があります。

これらの問題を解決するには、角度（クライアント）でセキュリティを追加することをお勧めします。

Answer 1

私が正しく理解していれば、必要な権限を持っていないユーザーにテンプレートが表示されないようにする方法を探しています。私がしたのは、ページを変更するときに、まずユーザーに正しい権限があるかどうかを確認することです。各状態で、私はページに到達するために必要な許可を追加します。

//these are the permissions the user currently has 
var currentPermissions = { 
    "User.Read":true, 
    "User.Create":false 
} 


var app = angular.module('myApp', ['ui.router']); 

app.config(function($stateProvider) { 

    $stateProvider.state('page1', { 
     url: "/page1", 
     data: {permission: "User.Read"}, //the perm required 
     template: "Page 1" 
    })  
    .state('page2', { 
     url: "/page2", 
     data: {permission: "User.Read"}, 
     template: "Page 2" 
    }) 
    .state('page3', { 
     url: "/page3", 
     data: {permission: "User.Create"}, 
     template: "Page 3" 
    }) 
    .state("noAccess", { 
     url:"/noAccess", 

     template: "access denied" 
    }); 
}); 


app.run(function($rootScope, $state) { 
     $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ 

      //check to make sure user has correct perm 
      if(toState.data && !currentPermissions[toState.data.permission]){ 
       event.preventDefault(); 
       $state.go('noAccess');//redirect if user does not have perm 
      } 
     });  
});  

でフィドル：https://jsfiddle.net/Darin_Cardin/mwg33rm4/