Question

我有一个与Laraval PHP后端通信的AngularJS应用程序。如果用户未登录，则向/api/checkLogin发送GET请求将返回{ 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和{{1}的值}，然后返回id的值。我怎么能做到这一点？

这是我尝试过的服务：

isAdmin

Answer 1

您希望使用checkLogin作为回调，但不是按照您的方式执行，而是将承诺从checkLogin返回setUserData。然后在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);
});

当使用解析了promise的值解析promise时，将调用传递给上面的函数。在这种情况下，它的值为data.logged，因为这是defer.resolve函数中传递给checkLogin的内容。

以下是对Promises的一些解读：

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

使用此

loginService this

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

创建AuthService以检查用户是否已登录

2 个答案: