認証されたユーザーへのアクセスを制限するにはどうすればよいですか？

Question

次のコントローラ/サービスをAngularjsに組み込み、認証サービスに連絡します。私はこれを利用して、Angularアプリケーションの他のページをこのサービスで認証されたユーザーに制限したいと思いますが、その方法はわかりません。私は誰かが正しい方向に私を向けることを望んでいる。以下は私のコントローラとサービスです。

angular.module('App').controller('LoginController', function ($scope, $rootScope, $window, AuthenticationService) { 

//function that gets called when the form is submitted. 
$scope.submit = function() { 
    var promise = AuthenticationService.login($scope.user, $scope.password); 

    promise.then(function() { 
     var success = AuthenticationService.isAuthenticated(); 
     if (success === true) { 
      $window.location.href = "/welcome.html"; 
     } 
    }); 
} 
}); 

app.service('AuthenticationService', function ($http) { 
//Used to track if the user was able to successfully authenticate. 
var auth = false; 
var token = undefined; 

//Had to put this in because I am running into weird behavior when attempting to retrieve a value from response.headers('value');. 
//When assiging this to a var, it would always come out as a null value. If you send the value into a function without assigning 
//it to a var, the value would be there as expected. For instance, console.log(response.headers('Authorization')); would work, but 
//token = response.headers('A‌​uthorization'); would result in a null value. The function below is a workaround. 
var getResponseHeader = function (x) { return x; } 

//Makes a call to the WEB API Authentication service with the username/password and attempts to authenticate. 
var login = function (user, pass) { 
    var input = { UserName: user, Password: pass }; 

    return $http({ 
     url: "/api/Authentication/Login/{credentials}", 
     method: "POST", 
     data: JSON.stringify(input), 
     dataType: "json" 
    }).then(function (response) { 
     if (response.status === 200) { //Call to the service was successful. 

      //This makes no sense. See comment for getResponseHeader function. 
      token = getResponseHeader(response.headers('Authorization')); 

      //If the authentication was successful, 'token' will have a value. If it was not successful, it will be null. 
      if (token) { 
       auth = true; 
      } 
     } 
     //There was an error when attempting to authenticate. Alert(response) is there for debugging purposes. 
     //This will be replaced with a user-friendly error message when completed. 
    }, function (response) { 
     alert(response); 
    }); 
} 

//Logs the user out by removing the token and setting auth back to false 
var logout = function (sessionid) { 
    auth = false; 
    token = undefined; 
} 

//Accessor for the 'auth' variable. 
var isAuthenticated = function() { return auth; } 

//Accessor for the token. 
var getToken = function() { return token; } 

return { 
    login: login, 
    logout: logout, 
    isAuthenticated: isAuthenticated, 
    token: getToken 
}; 
}); 

サービス/コントローラは認証されますが、誰でもアプリケーションの「welcome.html」や他のページを参照できます。これを認証に成功したユーザーに限定するにはどうすればよいですか？

Answer 1

私はあなたがそうのようなあなたの状態を設定angular-permissions

使用することをお勧めします：ルートアプリケーションのjsファイルで

//A Group for not logged in users 
.run(function(PermPermissionStore) { 
    PermPermissionStore 
    .definePermission('anonymous', function() { 
     // Do your authentification here 
     // you can sett up your funtions elsewere and call them here 
     // return true if unauthorized 
     var auth = auth_function() 
     if (auth === true) { 
     return false 
     } else { return true } 
    }) 
}) 

//group for authentificated users 
.run(function(PermPermissionStore) { 
PermPermissionStore 
    .definePermission('isAuthorized', function() { 
     // Do your authentification here 
     // return true if authorized 
     var auth = auth_function() 
     if (auth === true) { 
     return true 
     } else { return false } 
    }) 
}) 

Answer 2

：真偽のための2つのグループを

.state('home', { 
     url: '/', 
     templateUrl: 'templates/home.html', 
     parent: 'parent', 
     data: { 
      permissions: { //section for permissions 
      only: 'isAuthorized', // only allow loged in users 
      redirectTo: 'login' // if not allowed redirect to login page 
      } 
     }, 
     }) 

.state('login', { 
     url: '/login', 
     templateUrl: 'templates/login.html', 
     parent: 'login-parent', 
     data: { 
      permissions: { 
      only: 'anonymous', 
      redirectTo: 'home' 
      } 
     } 
     }) 

と設定runメソッドが認証値を確認し、認証されていない場合はリダイレクトするため、app.jsのrunメソッドはこの時計を設定するのに適しています：

SEE FIDDLE EXAMPLE OF YOUR CODE

.run(['AuthenticationService', '$location', '$rootScope', function (AuthenticationService, $location, $rootScope) { 

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

       return $location.path(); 
      }); 


     }]) 

このシンプルな時計は、あなたが何unauthed、ユーザーが任意のページにアクセスできなくなります確信できるので、あなたは別の条件を追加することにより、ロジックを変更する必要があり、AuthenticationServiceであなたにisAuthenticatedメソッドを呼び出すことにより、認証値をチェックします指定されたページへのアクセスを制限するようにルートをチェックします。