如何将现有AngularJS登录授权应用改造为用户访问控制应用？

嘿，作为AngularJS新手，要给现有登录应用加访问控制其实没那么难，咱们一步步拆解来做：

第一步：先把权限规则落地（明确需求） #

首先得把你提到的角色权限整理成清晰的映射关系，方便后续代码调用。比如可以定义一个全局常量来存储：

// 可以放在app.js或者单独的permissions.js文件里
app.constant('PERMISSIONS', {
  roles: {
    admin: ['dashboard', 'relaydata', 'logs', 'user-management'], // 管理员通吃所有视图
    user1: ['relaydata', 'logs'], // User1仅能访问这两个视图
    user2: ['dashboard'] // 这里根据你的需求补充User2的权限
  }
});

第二步：登录后持久化用户角色 #

登录成功后，把后端返回的用户角色（比如admin/user1/user2）存在localStorage（刷新页面不丢失）和$rootScope（全局方便调用）里：

// 登录控制器示例代码
app.controller('LoginController', function($scope, $http, $rootScope, $location, PERMISSIONS) {
  $scope.login = function() {
    $http.post('/api/login', {username: $scope.username, password: $scope.password})
      .then(function(response) {
        // 假设后端返回的用户数据包含role字段
        const user = response.data;
        // 持久化到localStorage
        localStorage.setItem('currentUser', JSON.stringify(user));
        // 同步到$rootScope，方便全局获取
        $rootScope.currentUser = user;
        // 登录成功跳转到默认页面，比如仪表盘
        $location.path('/dashboard');
      })
      .catch(function(error) {
        alert('登录失败，请检查账号密码');
      });
  };
});

第三步：路由层面拦截未授权访问（核心！） #

AngularJS的路由可以通过resolve属性在进入路由前做权限校验，拦截未授权的用户。先封装一个权限校验服务：

app.factory('AuthService', function($rootScope, $location, PERMISSIONS) {
  return {
    // 校验当前用户是否有权限访问目标路由
    hasPermission: function(targetRoute) {
      // 优先从localStorage取用户信息，防止页面刷新后$rootScope数据丢失
      const currentUser = JSON.parse(localStorage.getItem('currentUser')) || $rootScope.currentUser;
      
      if (!currentUser) {
        // 未登录用户直接跳转到登录页
        $location.path('/login');
        return false;
      }

      // 获取当前角色允许访问的路由列表
      const allowedRoutes = PERMISSIONS.roles[currentUser.role];
      // 校验是否包含目标路由
      return allowedRoutes.includes(targetRoute);
    }
  };
});

然后在路由配置里给每个需要权限的路由加上resolve：

app.config(function($routeProvider) {
  $routeProvider
    .when('/login', {
      templateUrl: 'views/login.html',
      controller: 'LoginController'
    })
    .when('/dashboard', {
      templateUrl: 'views/dashboard.html',
      controller: 'DashboardController',
      resolve: {
        auth: function(AuthService) {
          // 这里的'dashboard'对应权限配置里的标识
          return AuthService.hasPermission('dashboard');
        }
      }
    })
    .when('/relaydata', {
      templateUrl: 'views/relaydata.html',
      controller: 'RelayDataController',
      resolve: {
        auth: function(AuthService) {
          return AuthService.hasPermission('relaydata');
        }
      }
    })
    .when('/logs', {
      templateUrl: 'views/logs.html',
      controller: 'LogsController',
      resolve: {
        auth: function(AuthService) {
          return AuthService.hasPermission('logs');
        }
      }
    })
    .when('/user-management', {
      templateUrl: 'views/user-management.html',
      controller: 'UserManagementController',
      resolve: {
        auth: function(AuthService) {
          return AuthService.hasPermission('user-management');
        }
      }
    })
    .otherwise({redirectTo: '/login'});
});

第四步：视图层面控制元素显示/隐藏 #

除了路由拦截，还要在页面上根据角色隐藏不需要的菜单、按钮等元素。可以自定义一个指令来简化操作：

app.directive('hasPermission', function(AuthService) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      const targetRoute = attrs.hasPermission;
      const isAllowed = AuthService.hasPermission(targetRoute);
      if (!isAllowed) {
        // 没有权限就隐藏元素
        element.hide();
      }
    }
  };
});

然后在视图里直接用这个指令：

<!-- 导航菜单示例 -->
<ul class="nav-bar">
  <li><a href="#/dashboard" has-permission="dashboard">仪表盘</a></li>
  <li><a href="#/relaydata" has-permission="relaydata">中继数据</a></li>
  <li><a href="#/logs" has-permission="logs">日志</a></li>
  <li><a href="#/user-management" has-permission="user-management">用户管理</a></li>
</ul>

<!-- 按钮权限控制示例 -->
<button ng-show="currentUser.role === 'admin'" ng-click="deleteUser()">删除用户（仅管理员可见）</button>

第五步：额外的安全补充 #

• 不要依赖前端控制做唯一校验：前端拦截只是提升用户体验，后端API必须也要做权限校验，防止用户直接通过URL或调用API访问未授权资源。
• 退出登录清除用户信息：

app.controller('HeaderController', function($scope, $rootScope, $location) {
  $scope.logout = function() {
    localStorage.removeItem('currentUser');
    $rootScope.currentUser = null;
    $location.path('/login');
  };
});

• 页面刷新恢复用户状态：在应用启动时从localStorage读取用户信息到$rootScope：

app.run(function($rootScope) {
  const savedUser = JSON.parse(localStorage.getItem('currentUser'));
  if (savedUser) {
    $rootScope.currentUser = savedUser;
  }
});

这样一步步下来，你的应用就具备了完整的用户访问控制功能啦。如果需要更细粒度的权限（比如某个按钮的操作权限），可以基于这个框架扩展权限配置，比如给每个操作也加权限标识。

内容的提问来源于stack exchange，提问作者Sai Manoj