AngularJS: การแทรกบริการลงในตัวสกัดกั้น HTTP (การพึ่งพาแบบวงกลม)

ฉันกำลังพยายามเขียนตัวดักจับ HTTP สำหรับแอป AngularJS เพื่อจัดการการตรวจสอบสิทธิ์

รหัสนี้ใช้งานได้ แต่ฉันกังวลเกี่ยวกับการฉีดบริการด้วยตนเองเนื่องจากฉันคิดว่า Angular ควรจัดการสิ่งนี้โดยอัตโนมัติ:

    app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push(function ($location, $injector) {
        return {
            'request': function (config) {
                //injected manually to get around circular dependency problem.
                var AuthService = $injector.get('AuthService');
                console.log(AuthService);
                console.log('in request interceptor');
                if (!AuthService.isAuthenticated() && $location.path != '/login') {
                    console.log('user is not logged in.');
                    $location.path('/login');
                }
                return config;
            }
        };
    })
}]);

สิ่งที่ฉันเริ่มทำ แต่พบปัญหาการพึ่งพาแบบวงกลม:

    app.config(function ($provide, $httpProvider) {
    $provide.factory('HttpInterceptor', function ($q, $location, AuthService) {
        return {
            'request': function (config) {
                console.log('in request interceptor.');
                if (!AuthService.isAuthenticated() && $location.path != '/login') {
                    console.log('user is not logged in.');
                    $location.path('/login');
                }
                return config;
            }
        };
    });

    $httpProvider.interceptors.push('HttpInterceptor');
});

อีกเหตุผลหนึ่งที่ฉันกังวลคือส่วนของ $ httpใน Angular Docs ดูเหมือนจะแสดงวิธีรับการอ้างอิงที่ฉีด "วิธีปกติ" ลงในตัวดักจับ Http ดูข้อมูลโค้ดใต้ "Interceptors":

// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
  return {
    // optional method
    'request': function(config) {
      // do something on success
      return config || $q.when(config);
    },

    // optional method
   'requestError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    },



    // optional method
    'response': function(response) {
      // do something on success
      return response || $q.when(response);
    },

    // optional method
   'responseError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    };
  }
});

$httpProvider.interceptors.push('myHttpInterceptor');

โค้ดด้านบนควรไปที่ไหน

ฉันเดาว่าคำถามของฉันคือวิธีที่ถูกต้องในการทำสิ่งนี้คืออะไร?

ขอบคุณและฉันหวังว่าคำถามของฉันจะชัดเจนเพียงพอ

คุณมีการพึ่งพาแบบวงกลมระหว่าง $ http และ AuthService ของคุณ

สิ่งที่คุณกำลังทำโดยใช้$injectorบริการนี้คือการแก้ปัญหาไก่กับไข่โดยชะลอการพึ่งพา $ http บน AuthService

ฉันเชื่อว่าสิ่งที่คุณทำนั้นเป็นวิธีที่ง่ายที่สุดในการทำ

คุณสามารถทำได้โดย:

• การลงทะเบียนผู้สกัดกั้นในภายหลัง (การทำเช่นนั้นในrun()บล็อกแทนที่จะเป็นconfig()บล็อกอาจทำเคล็ดลับได้แล้ว) แต่คุณรับประกันได้หรือไม่ว่า $ http ยังไม่ถูกเรียก?
• "การฉีด" $ http ด้วยตนเองลงใน AuthService เมื่อคุณลงทะเบียนเครื่องดักฟังโดยการโทรAuthService.setHttp()หรืออะไรบางอย่าง
• ...

นี่คือสิ่งที่ฉันทำ

  .config(['$httpProvider', function ($httpProvider) {
        //enable cors
        $httpProvider.defaults.useXDomain = true;

        $httpProvider.interceptors.push(['$location', '$injector', '$q', function ($location, $injector, $q) {
            return {
                'request': function (config) {

                    //injected manually to get around circular dependency problem.
                    var AuthService = $injector.get('Auth');

                    if (!AuthService.isAuthenticated()) {
                        $location.path('/login');
                    } else {
                        //add session_id as a bearer token in header of all outgoing HTTP requests.
                        var currentUser = AuthService.getCurrentUser();
                        if (currentUser !== null) {
                            var sessionId = AuthService.getCurrentUser().sessionId;
                            if (sessionId) {
                                config.headers.Authorization = 'Bearer ' + sessionId;
                            }
                        }
                    }

                    //add headers
                    return config;
                },
                'responseError': function (rejection) {
                    if (rejection.status === 401) {

                        //injected manually to get around circular dependency problem.
                        var AuthService = $injector.get('Auth');

                        //if server returns 401 despite user being authenticated on app side, it means session timed out on server
                        if (AuthService.isAuthenticated()) {
                            AuthService.appLogOut();
                        }
                        $location.path('/login');
                        return $q.reject(rejection);
                    }
                }
            };
        }]);
    }]);

หมายเหตุ: การ$injector.getโทรควรอยู่ในเมธอดของเครื่องดักฟังหากคุณพยายามใช้ที่อื่นคุณจะยังคงได้รับข้อผิดพลาดการอ้างอิงแบบวงกลมใน JS

ฉันคิดว่าการใช้ $ injector โดยตรงคือ antipattern

วิธีทำลายการพึ่งพาแบบวงกลมคือการใช้เหตุการณ์: แทนที่จะฉีด $ state ให้ฉีด $ rootScope แทนที่จะเปลี่ยนเส้นทางโดยตรงให้ทำ

this.$rootScope.$emit("unauthorized");

บวก

angular
    .module('foo')
    .run(function($rootScope, $state) {
        $rootScope.$on('unauthorized', () => {
            $state.transitionTo('login');
        });
    });

ตรรกะที่ไม่ดีทำให้ผลลัพธ์ดังกล่าว

จริงๆแล้วไม่มีประเด็นที่ต้องค้นหาคือผู้ใช้สร้างหรือไม่อยู่ใน Http Interceptor ฉันขอแนะนำให้รวมคำขอ HTTP ทั้งหมดของคุณเป็น. บริการเดียว (หรือ. โรงงานหรือเป็น. ผู้ให้บริการ) และใช้สำหรับคำขอทั้งหมด ในแต่ละครั้งที่คุณเรียกใช้ฟังก์ชันคุณสามารถตรวจสอบได้ว่าผู้ใช้ล็อกอินหรือไม่ ถ้าทุกอย่างเรียบร้อยให้ส่งคำขอ

ในกรณีของคุณแอปพลิเคชัน Angular จะส่งคำขอไม่ว่าในกรณีใดก็ตามคุณเพียงแค่ตรวจสอบการอนุญาตที่นั่นและหลังจากนั้น JavaScript จะส่งคำขอ

หลักของปัญหาของคุณ

myHttpInterceptorเรียกว่าภายใต้$httpProviderอินสแตนซ์ การAuthServiceใช้งานของคุณ$httpหรือ$resourceและที่นี่คุณมีการเรียกซ้ำแบบพึ่งพาหรือการพึ่งพาแบบวงกลม หากคุณลบการพึ่งพานั้นออกAuthServiceไปคุณจะไม่เห็นข้อผิดพลาดนั้น

เช่นเดียวกับที่ @Pieter Herroelen ชี้ให้เห็นคุณสามารถวางเครื่องสกัดกั้นนี้ไว้ในโมดูลของคุณได้module.runแต่จะเป็นเหมือนแฮ็กมากกว่าไม่ใช่วิธีแก้ปัญหา

หากคุณต้องการทำโค้ดที่ชัดเจนและอธิบายได้ด้วยตัวเองคุณต้องใช้หลักการ SOLID บางประการ

อย่างน้อยหลักการความรับผิดชอบเดียวจะช่วยคุณได้มากในสถานการณ์เช่นนี้

หากคุณกำลังตรวจสอบสถานะ Auth (isAuthorized ()) ฉันขอแนะนำให้ใส่สถานะนั้นในโมดูลแยกต่างหากให้พูดว่า "Auth" ซึ่งจะเก็บสถานะไว้และไม่ได้ใช้ $ http เอง

app.config(['$httpProvider', function ($httpProvider) {
  $httpProvider.interceptors.push(function ($location, Auth) {
    return {
      'request': function (config) {
        if (!Auth.isAuthenticated() && $location.path != '/login') {
          console.log('user is not logged in.');
          $location.path('/login');
        }
        return config;
      }
    }
  })
}])

โมดูลรับรองความถูกต้อง:

angular
  .module('app')
  .factory('Auth', Auth)

function Auth() {
  var $scope = {}
  $scope.sessionId = localStorage.getItem('sessionId')
  $scope.authorized = $scope.sessionId !== null
  //... other auth relevant data

  $scope.isAuthorized = function() {
    return $scope.authorized
  }

  return $scope
}

(ฉันใช้ localStorage เพื่อจัดเก็บ sessionId บนฝั่งไคลเอ็นต์ที่นี่ แต่คุณสามารถตั้งค่านี้ภายใน AuthService ของคุณหลังจากการเรียก $ http เป็นต้น)