[解決済み] AngularJS- 各ルートとコントローラでのログインと認証

質問

私は、yeoman、grunt、bowerを使用して作成したAngularJSのアプリケーションを持っています。

ログインページがあり、そのページには認証チェックを行うコントローラがあります。認証が正しい場合は、ホームページにリルートされます。

app.js

'use strict';
//Define Routing for app
angular.module('myApp', []).config(['$routeProvider', '$locationProvider',
  function($routeProvider,$locationProvider) {
    $routeProvider
    .when('/login', {
        templateUrl: 'login.html',
        controller: 'LoginController'
    })
    .when('/register', {
        templateUrl: 'register.html',
        controller: 'RegisterController'
      })
    .when('/forgotPassword', {
        templateUrl: 'forgotpassword.html',
        controller: 'forgotController'
      })
   .when('/home', {
       templateUrl: 'views/home.html',
       controller: 'homeController'
    })
    .otherwise({
       redirectTo: '/login'
    });
//    $locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);

angular.module('myApp').factory("page", function($rootScope){
    var page={};
    var user={};
    page.setPage=function(title,bodyClass){
        $rootScope.pageTitle = title;
        $rootScope.bodylayout=bodyClass;
    };
    page.setUser=function(user){
        $rootScope.user=user;
    }
    return page;
});

LoginControler.js

'use strict';

angular.module('myApp').controller('LoginController', function($scope, $location, $window,page) {
    page.setPage("Login","login-layout");
    $scope.user = {};
    $scope.loginUser=function()
    {
        var username=$scope.user.name;
        var password=$scope.user.password;
        if(username=="admin" && password=="admin123")
        {
            page.setUser($scope.user);
            $location.path( "/home" );
        }
        else
        {
            $scope.message="Error";
            $scope.messagecolor="alert alert-danger";
        }
    }
});

トップページには

<span class="user-info">
    <small>Welcome,</small>
    {{user.name}}
</span>
<span class="logout"><a href="" ng-click="logoutUser()">Logout</a></span>

で loginController ログイン情報を確認し、成功したらサービスファクトリーにユーザーオブジェクトを設定します。これが正しいかどうかは分かりませんが。

私が必要とするのは、ユーザーがログインしたときに、他のすべてのページがその値を取得できるように、ユーザーオブジェクトに何らかの値を設定することです。

ルートが変更されるたびに、コントローラはユーザがログインしているかどうかをチェックする必要があります。もしそうでなければ、ログインページにリルートしなければなりません。また、ユーザーがすでにログインしている状態でページに戻ってきた場合は、トップページに移動するようにします。コントローラは、すべてのルートで認証情報をチェックする必要があります。

ng-cookieのことは聞いたことがありますが、どのように使えばいいのかわかりません。

私が見た多くの例は、あまり明確ではなく、アクセスロールのようなものを使っていました。私はそんなのいらない。私はログインフィルタが欲しいだけです。 どなたかアイデアを教えていただけませんか？

どのように解決するのですか？

ユーザーの状態はサービスに保存され、runメソッドではルートが変更されたときに監視し、ユーザーが要求されたページにアクセスすることが許可されているかどうかをチェックします。

app.run(['$rootScope', '$location', 'Auth', function ($rootScope, $location, Auth) {
    $rootScope.$on('$routeChangeStart', function (event) {

        if (!Auth.isLoggedIn()) {
            console.log('DENY');
            event.preventDefault();
            $location.path('/login');
        }
        else {
            console.log('ALLOW');
            $location.path('/home');
        }
    });
}]);

サービスを作成する必要があります（名前は Auth このオブジェクトは、ユーザーオブジェクトを処理し、ユーザーがログインしているかどうかを知るためのメソッドを備えています。

サービス :

 .factory('Auth', function(){
var user;

return{
    setUser : function(aUser){
        user = aUser;
    },
    isLoggedIn : function(){
        return(user)? user : false;
    }
  }
})

あなたの app.run を聞く必要があります。 $routeChangeStart イベントが発生します。ルートが変更されるとき、ユーザーがログインしているかどうかがチェックされます ( isLoggedIn メソッドで処理する必要があります）。ユーザーがログインしていない場合、リクエストされたルートはロードされず、適切なページ(あなたの場合はログイン)にリダイレクトされます。

は loginController は、ログインを処理するためにログインページで使用されるべきです。これは Auth サービスを使用して、ユーザがログインしているかどうかを設定します。

loginController :

.controller('loginCtrl', [ '$scope', 'Auth', function ($scope, Auth) {
  //submit
  $scope.login = function () {
    // Ask to the server, do your job and THEN set the user

    Auth.setUser(user); //Update the state of the user in the app
  };
}])

メインコントローラから、ユーザーの状態が変化したときにリダイレクトで対応することができます。

.controller('mainCtrl', ['$scope', 'Auth', '$location', function ($scope, Auth, $location) {

  $scope.$watch(Auth.isLoggedIn, function (value, oldValue) {

    if(!value && oldValue) {
      console.log("Disconnect");
      $location.path('/login');
    }

    if(value) {
      console.log("Connect");
      //Do something when the user is connected
    }

  }, true);