創建一個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'); 
      } 
     }) 
    } 
    }); 
});