AngularJS-每个路由和控制器中的登录和身份验证

Question

我有一个使用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，但是我不知道如何使用它们。

我看到的许多示例不是很清楚，它们使用某种访问角色或某种访问角色。我不要 我只想要一个登录过滤器。有人可以给我一些想法吗？

Answer 1

我的解决方案分为三个部分：用户状态存储在服务中；在运行方法中，您观察路由更改时的运行方式；检查是否允许用户访问请求的页面；在主控制器中，查看是否用户状态更改。

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);