javascript - AngularJS-每个路由和 Controller 中的登录和身份验证

Question

我有一个使用 yeoman、grunt 和 bower 创建的 AngularJS 应用程序。

我有一个登录页面，其中包含一个检查身份验证的 Controller 。如果凭据正确，我会重新路由到主页。

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 中，我检查登录信息，如果成功，我在服务工厂中设置用户对象。不知道对不对。

我需要的是，当用户登录时，它在用户对象中设置一些值，以便所有其他页面都能获得该值。

每当发生任何路由更改时， Controller 应检查用户是否已登录。如果没有，它应该重新路由到登录页面。此外，如果用户已经登录并返回页面，则应该转到主页。 Controller 还应检查所有路由的凭据。

我听说过 ng-cookies，但我不知道如何使用它们。

我看到的很多例子都不是很清楚，他们使用了某种访问 Angular 色什么的。我不想要那个。我只想要一个登录过滤器。有人可以给我一些想法吗？

Answer 1

我的解决方案分为 3 个部分:用户状态存储在服务中，在运行方法中，您在路由更改时观察并检查是否允许用户访问请求的页面，在您的主 Controller 中你观察用户的状态是否改变。

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 服务交互并将用户设置为已登录或未登录。

登录 Controller :

.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 中，您可以监听用户状态是否发生变化并对重定向使用react。

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