创建一个AuthService来检查用户是否登录

Question

我有一个AngularJS应用程序与Laraval PHP后端进行通信。如果用户未登录，则发送GET请求至/api/checkLogin将返回{ logged: false, username: undefined, id: undefined }，否则，将返回类似{ logged: true, username: 'John', id: 123 }的内容。

我对使用AngularJS服务不太熟悉，但我想建立一个名为AuthService的服务，它可以执行我的应用程序的身份验证服务。

我想实现以下功能：AuthService.loggedIn,AuthService.isAdmin,AuthService.username和AuthService.id。

我希望这些函数以这样一种方式实现，即调用一个函数将为所有其余的值设置值。例如，假设我打电话给AuthService.isAdmin。该功能将检查是否设置了isAdmin，如果是，则返回值为isAdmin。如果未设置isAdmin，则会向/api/checkLogin发出HTTP请求，将值设置为loggedIn,isAdmin,username和id，然后返回值isAdmin。我怎样才能做到这一点？

这里是我试过的服务放在一起：

angular.module('myApp').factory('AuthService', ['$http', function($http) { 

    var loggedIn; 
    var isAdmin; 
    var username; 
    var id; 

    var checkLogin = function() { 
     if(loggedIn != undefined) { 
      return loggedIn 
     } else { 
      setUserData(checkLogin); 
     } 
    } 
    var checkAdmin = function() { 
     if(isAdmin != undefined) { 
      return isAdmin 
     } else { 
      setUserData(checkLogin); 
     } 
    } 
    var returnUsername = function() { 
     if(username != undefined) { 
      return username 
     } else { 
      setUserData(checkLogin); 
     } 
    } 
    var returnId = function() { 
     if(id != undefined) { 
      return id 
     } else { 
      setUserData(checkLogin); 
     } 
    } 


    // Our function call which will set our loggedIn, isAdmin, username, and id values 
    var setUserData = function(callback) { 
     $http.get(baseURL+'/api/checkLogin').success(function(data) { 
      loggedIn = data.logged; 
      if(loggedIn) { 
       isAdmin = data.is_admin; 
       username = data.username; 
       id = data.id; 
      } 
      callback(); 
     }); 
    } 


    return { 
     loggedIn: function() { return checkLogin(); }, 
     isAdmin: function() { return checkAdmin(); }, 
     username: function() { return returnUsername(); }, 
     id: function() { return returnId(); }, 
    } 

}]); 

Answer 1

它看起来要使用checkLogin作为回调，但不是做你的方式，从返回的承诺回checkLoginsetUserData。然后在checkLogin中，创建自己的延期处理结果。

你是作用于异步逻辑通过引入$http调用，因此checkLogin的人都需要在所有情况下返回一个承诺：

var checkLogin = function() { 

     // Create a custom deferred 
     var defer = $q.defer(); 

     if(loggedIn != undefined) { 
      // Resolve your deferred with the value of logged in 
      defer.resolve(loggedIn); 
     } else { 
      setUserData().then(function (data) { 
       console.log('Set user data returned successfully'); 
       loggedIn = data.logged; 
       if(loggedIn) { 
        isAdmin = data.is_admin; 
        username = data.username; 
        id = data.id; 
        defer.resolve(loggedIn); 
       } else { 
        defer.reject(); 
       } 
      }, function() { 
       console.log('setUserData failed'); 
       defer.reject(); 
      }); 
     } 

     return defer.promise; 
    } 

var setUserData = function() { 
     return $http.get(baseURL+'/api/checkLogin'); 
    } 

AuthService.loggedIn()现在会返回一个承诺。你必须解决的承诺来获取值出来的：

AuthService.loggedIn().then(function (data) { 
    console.log(data); 
}); 

传给然后上面的函数将时的承诺与该承诺与决心值来解析被调用。在这种情况下，它的值为data.logged，因为那是在checkLogin函数中传递给defer.resolve的值。

下面是关于承诺一些阅读：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

http://www.html5rocks.com/en/tutorials/es6/promises/

https://docs.angularjs.org/api/ng/service/ $ Q

Answer 2

使用本

login服务这

var app=angular.module('myApp'); 
app.factory('loginService', function ($http, $location) { 
    return { 
    login: function (data, scope) { 
     var $promise = $http.post('api.php/site/login', data); 
     $promise.then(function (msg) { 
     var uId = msg.data.key; 
     if (msg.data.key) { 

      $location.path('/abAdmin/home'); 
     } else { 
      $location.path('/abAdmin'); 
     } 
     }); 
    }, 
    logout: function() { 
     $http.post('api.php/site/logout'); 
     $location.path('/abAdmin'); 
    }, 
    isLogged: function() { 
     var $check = $http.post('api.php/site/checkSession'); 
     return $check; 
    } 
    } 
}); 

和你app.js

var app=angular.module('myApp'); 

app.run(function ($rootScope, $location, loginService) { 
    var routPermission = [ 
       '/abAdmin/home', 
       '/abAdmin/category', 
       '/abAdmin/category/:id']; 


    $rootScope.$on('$routeChangeStart', function (e, current) { 

    if (routPermission.indexOf(current.$$route.originalPath) != -1) { 
     var connected = loginService.isLogged(); 
     connected.then(function (data) { 
      if (!data.data.isLogged) { 
      logged=true; 
      $location.path('abAdmin'); 
      } 
     }) 
    } 
    }); 
});