angularjs - 使用 AngularJS 保护管理面板

Question

我想使用 PHP + MySQL 构建一个带有 AngularJS(客户端)和 RESTful API(服务器)的 Web 应用程序，仅用于学习目的。该应用程序必须有管理面板，受登录保护。

我使用 ui-router 来防止未经授权的用户访问面板，但据我所知，客户端的每个代码都不安全。

如果恶意用户修改代码以在不登录的情况下授予对面板的访问权限怎么办？我知道服务器数据和代码受到保护，但 HTML 部分不 protected (布局被暴露)，这与常见的 PHP 应用程序不同，其中 View 在服务器端受到“保护”。我应该担心吗？

Answer 1

我会使用$httpProvider至少设置一个基于 token 的基本登录，并进行 token /用户检查。您可以使用 Auth 服务和 login()、logout、isLogedIn() 等方法来管理 header 处理状态并将其保存到 $cookies例如。这样，恶意用户就可以破解并访问 html 模板，但没有数据库数据...缩小代码也有助于避免这种风险。

angular.module('myApp', [])
         .run(['Auth', '$location', '$rootScope', function (Auth, $location, $rootScope) {

            $rootScope.$watch(function () {
                if (!Auth.isLogedIn())
                    $location.path("/login");

                return $location.path();
            });
        }])
       .config(['$routeProvider', '$httpProvider',
        function ($routeProvider, $httpProvider) {
            $routeProvider
                    .when('/home', {templateUrl: 'partials/home.html'})
                    .when('/login', {templateUrl: 'partials/login.html', controller: 'LoginCtrl'})
                    .when('/logout', {templateUrl: 'partials/login.html', controller: 'LogoutCtrl'})
                    .otherwise({redirectTo: '/home'});
                $httpProvider.defaults.headers.common["Authorization"] = "";
                $httpProvider.defaults.headers.common["X-User"] = "";
            }
        ]);

来自代码片段:

• $httpProvider.defaults.headers.common 将为每个请求设置 header 。
• $httpProvider.defaults.headers 将为下一个请求设置 header 。
• run 时，$rootScope 上设置的 $watch 将在范围 isLogedIn() 每次更改时触发> 应检查 header 标记与数据库中的条目。