AngularJS 添加安全性和本地存儲監視

Question

我有一個 angularJS 應用程序，它使用 angular ui-router 進行路由。

我添加了以下安全級別，但這並沒有幫助我：

1. 我正在本地存儲中存儲令牌和用戶角色。 根據用戶角色，我將用戶重定向到路由。

2. 我已經在本地存儲上應用了監視服務，但在刷新時我沒有得到本地存儲的最后（舊）值，所以在這種情況下我的檢查（監視）失敗。

3. 當有人在本地存儲和刷新站點更改令牌時。 那么我無法檢查令牌是否已更改。

4. 在這種情況下，用戶可以查看模板但無法獲取數據，因為我在后端添加了安全層。 但我也需要阻止訪問模板。

請幫助我在 angular（客戶端）添加安全性以克服這些問題。

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/