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/