Javascript AngularJS添加安全和本地存储监视

我有一个angularJS应用程序，它使用AngularUI路由器进行路由

我添加了以下安全级别，但这对我没有帮助：

我正在本地存储中存储令牌和用户角色。 根据用户角色，我将用户重定向到路由

我已在本地存储上应用了watch服务，但在刷新时 未获取本地存储的最后（旧）值，因此在本例中，我的检查（监视）失败

当有人在本地存储和刷新站点上更改令牌时。 然后我无法检查令牌是否已更改

在这种情况下，用户可以查看模板，但无法获取数据，因为我在后端添加了安全层。但我也需要阻止对模板的访问

---

请帮助我在angular（客户端）添加安全性以克服这些问题。

如果我理解正确，您正在寻找一种方法，防止用户在没有所需权限时看到模板。我所做的是，在更改页面时，首先检查用户是否具有正确的权限。在每个状态下，我都会添加访问页面所需的权限

//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
           }
        });     
});    

---

拨弄：

我也在做同样的事情。但在登录后，我将令牌（salt）与用户角色（如Admin/user）一起存储在localstorage，并根据用户角色允许登录用户查看页面（在$stateChangeStart上）。但如果有人对localstorage进行了更改（将用户更改为Admin）并刷新页面，那么他将能够看到管理员模板。在这种情况下，localstorage watch服务无法通过“进行更改”来工作，您的意思是使用类似调试器的工具吗？根据定义，客户端是不安全的，并且无法对此进行保护。我相信只有在用户拥有正确权限的情况下，服务器上才会有返回页面的内容。在上面的示例中，您将使用templateUrl而不是template，并在它前面进行一些权限检查。基本上，我将令牌和角色存储在localstorage中，并且我已在其上应用了watcher服务。根据本地存储中的角色，im应用检查。如果有人在本地存储中进行更改并使用它（无需刷新），则watcher服务可以工作。如果有人在更改localstorage值后刷新页面，则angular会将以前的localstorage值显示为此watcher服务中未定义的值不起作用。。我需要克服这个问题。