AngularJS에 현재 사용자 컨텍스트를 어떻게 저장합니까?

사용자를 로그인하는 AuthService가 있으며 사용자 json 개체를 반환합니다. 내가 원하는 것은 해당 개체를 설정하고 페이지를 새로 고칠 필요없이 모든 변경 사항이 응용 프로그램 (로그인 / 로그 아웃 상태)에 반영되도록하는 것입니다.

AngularJS로 어떻게이 작업을 수행 할 수 있습니까?

이를 수행하는 가장 쉬운 방법은 서비스를 사용하는 것입니다. 예를 들면 :

app.factory( 'AuthService', function() {
  var currentUser;

  return {
    login: function() { ... },
    logout: function() { ... },
    isLoggedIn: function() { ... },
    currentUser: function() { return currentUser; }
    ...
  };
});

그런 다음 컨트롤러에서이를 참조 할 수 있습니다. 다음 코드는 지정된 함수를 호출하여 서비스에서 값의 변경 사항을 감시 한 다음 변경된 값을 범위에 동기화합니다.

app.controller( 'MainCtrl', function( $scope, AuthService ) {
  $scope.$watch( AuthService.isLoggedIn, function ( isLoggedIn ) {
    $scope.isLoggedIn = isLoggedIn;
    $scope.currentUser = AuthService.currentUser();
  });
});

그리고 물론 적절하다고 생각되는 정보를 사용할 수 있습니다. 예를 들어 지시문, 템플릿 등에서이 작업을 메뉴 컨트롤러 등에서 반복 할 수 있습니다 (필요한 작업에 맞게 사용자 지정). 서비스의 상태를 변경하면 모두 자동으로 업데이트됩니다.

더 구체적인 것은 구현에 따라 다릅니다.

도움이 되었기를 바랍니다!

AuthService는 일반적으로 누구에게나 관심이 있기 때문에 (예를 들어, 아무도 로그인하지 않으면 로그인보기가 사라져야 함), 더 간단한 대안은 $rootScope.$broadcast('loginStatusChanged', isLoggedIn);(1 ) (2), 이해 당사자 (예 : 컨트롤러)는 $scope.$on('loginStatusChanged', function (event, isLoggedIn) { $scope.isLoggedIn = isLoggedIn; }.

(1) $rootScope서비스의 인수로 주입 됨

(2) 비동기 로그인 작업의 경우, $rootScope.$apply()함수 에 포함하여 브로드 캐스트가 변경 될 것이라는 것을 Angular에 알리고 싶을 것 입니다.

이제 모든 / 다수의 컨트롤러에서 사용자 컨텍스트를 유지하는 것에 대해 말하면, 모든 사람의 로그인 변경 사항을 듣지 않을 수 있으며 최상위 로그인 컨트롤러에서만 수신 한 다음 다른 로그인 인식 컨트롤러를 자식으로 추가하는 것을 선호 할 수 있습니다. 이것의 임베디드 컨트롤러. 이렇게하면 자식 컨트롤러가 사용자 컨텍스트와 같은 상속 된 부모 $ scope 속성을 볼 수 있습니다.