12

ユーザーログインがHTTPセッションに保存される基本的なPHPアプリがあります。このアプリには、次のように ngView を使用してサブビューを切り替える index.html などのメイン テンプレートが 1 つあります。

<body ng-controller='MainCtrl'>
    <div ng-view></div>
</body>

現在、このメイン テンプレートは基本的な PHP コントロールを介して保護できますが、ルート設定に従って angular から含まれるプレーンな html ファイルであるサブテンプレート (つまり、ユーザー リスト、ユーザーの追加、ユーザーの編集など) があります。

http サービスのリクエストに関係する認証を確認することはできますが、1 人のユーザーがサブテンプレートの URL に移動してアクセスすることができます。どうすればこれを防ぐことができますか?

4

2 に答える 2

14

次のようなサービスを作成します。

app.factory('routeAuths', [ function() {
  // any path that starts with /template1 will be restricted
  var routeAuths = [{
      path : '/template1.*',
      access : 'restricted'
  }];
  return {
    get : function(path) {
      //you can expand the matching algorithm for wildcards etc.
      var routeAuth;
      for ( var i = 0; i < routeAuths.length; i += 1) {
        routeAuth = routeAuths[i];
        var routeAuthRegex = new RegExp(routeAuth.path);
        if (routeAuthRegex.test(path)) {
          if (routeAuth.access === 'restricted') {
            return {
              access : 'restricted',
              path : path
            };
          }
        }
      }
      // you can also make the default 'restricted' and check only for 'allowed'
      return {
        access : 'allowed',
        path : path
      };
    }
  };
} ]);

そして、メイン/ルート コントローラーで$locationChangeStartイベントをリッスンします。

app.controller('AppController', ['$scope', '$route', '$routeParams', '$location', 'routeAuths',
  function(scope, route, routeParams, location, routeAuths) {
    scope.route = route;
    scope.routeParams = routeParams;
    scope.location = location;

    scope.routeAuth = {
    };

    scope.$on('$locationChangeStart', function(event, newVal, oldVal) {
      var routeAuth = routeAuths.get(location.path());
      if (routeAuth.access === 'restricted') {
        if (scope.routeAuth.allowed) {
          event.preventDefault();
        }
        else {
          //if the browser navigates with a direct url that is restricted
          //redirect to a default
          location.url('/main');
        }
        scope.routeAuth.restricted = routeAuth;
      }
      else {
        scope.routeAuth.allowed = routeAuth;
        scope.routeAuth.restricted = undefined;
      }
    });

}]);

デモ:

参考文献：

更新：

HTML テンプレートへのアクセスを完全に防止するには、サーバー上でも行うのが最善です。サーバー上の静的フォルダーから html を提供する場合、ユーザーは root_url/templates/template1.html などのファイルに直接アクセスできるため、角度チェッカーを回避できます。

于 2012-12-17T17:17:48.537 に答える
0

そのページへのアクセスをブロックしたい場合は、サービスを作成してください: http://docs.angularjs.org/guide/dev_guide.services.creating_services

このサービスは、routeParams に登録したすべてのコントローラーによって依存関係を注入できます。

このサービスでは、その人がログインしているかどうかを確認し、http://docs.angularjs.org/api/を使用して再ルーティングする (おそらくログイン ページに戻る) 機能を使用できます。 ng .$location#path. 次のように、各コントローラーでこの関数を呼び出します。

function myController(myServiceChecker){
    myServiceChecker.makeSureLoggedIn();
}

makeSureLoggedIn 関数は、現在の URL を ($location.path を使用して) チェックし、許可されていない場合は、許可されているページにリダイレクトします。

routeParams が発火するのを防ぐ方法があるかどうか知りたいのですが、少なくともこれにより、必要なことを実行できます。

編集:こちらの私の回答も参照してください。ページにアクセスすることさえ防ぐことができます:

AngularJS - ルート変更の検出、停止、キャンセル

于 2012-12-17T15:59:25.423 に答える