web-dev-qa-db-ja.com

AngularJS：ユーザーが許可されているかどうかに応じてangularjsでルートを保護しますか？

開発中のAngularJSアプリの使用を開始したばかりで、すべてが順調に進んでいますが、ログインしていない場合にユーザーがそのルートにアクセスできないようにルートを保護する方法が必要です。 。サービス側でも保護することの重要性を理解しており、これを担当します。

私はクライアントを保護するいくつかの方法を見つけました、1つは以下を使用するようです

$scope.$watch(
    function() {
        return $location.path();
    },
    function(newValue, oldValue) {
        if ($scope.loggedIn == false && newValue != '/login') {
            $location.path('/login');
        }
    }
);

これを.runのapp.jsのどこに置く必要がありますか？

そして、私が見つけたもう1つの方法は、ディレクティブを使用し、on --routechagestartを使用することです。

情報はここにあります http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app

私は、推奨される方法に関する誰かの助けとフィードバックに本当に興味があります。

angularjsangularjs-directiveangularjs-scope
12
Martin

解決を使用すると、ここで役立つはずです:(コードはテストされていません）

angular.module('app' []).config(function($routeProvider){
    $routeProvider
        .when('/needsauthorisation', {
            //config for controller and template
            resolve : {
                //This function is injected with the AuthService where you'll put your authentication logic
                'auth' : function(AuthService){
                    return AuthService.authenticate();
                }
            }
        });
}).run(function($rootScope, $location){
    //If the route change failed due to authentication error, redirect them out
    $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
        if(rejection === 'Not Authenticated'){
            $location.path('/');
        }
    })
}).factory('AuthService', function($q){
    return {
        authenticate : function(){
            //Authentication logic here
            if(isAuthenticated){
                //If authenticated, return anything you want, probably a user object
                return true;
            } else {
                //Else send a rejection
                return $q.reject('Not Authenticated');
            }
        }
    }
});
19
Clark Pan

$routeProviderのresolve属性を使用する別の方法：

angular.config(["$routeProvider",
function($routeProvider) {

  "use strict";

  $routeProvider

  .when("/forbidden", {
    /* ... */
  })

  .when("/signin", {
    /* ... */
    resolve: {
      access: ["Access", function(Access) { return Access.isAnonymous(); }],
    }
  })

  .when("/home", {
    /* ... */
    resolve: {
      access: ["Access", function(Access) { return Access.isAuthenticated(); }],
    }
  })

  .when("/admin", {
    /* ... */
    resolve: {
      access: ["Access", function(Access) { return Access.hasRole("ADMIN"); }],
    }
  })

  .otherwise({
    redirectTo: "/home"
  });

}]);

このように、Accessが約束を解決しない場合、$routeChangeErrorイベントが発生します。

angular.run(["$rootScope", "Access", "$location",
function($rootScope, Access, $location) {

  "use strict";

  $rootScope.$on("$routeChangeError", function(event, current, previous, rejection) {
    if (rejection == Access.UNAUTHORIZED) {
      $location.path("/login");
    } else if (rejection == Access.FORBIDDEN) {
      $location.path("/forbidden");
    }
  });

}]);

この回答 の完全なコードを参照してください。

4
sp00m