programing

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

nasanasas 2020. 9. 5. 10:02
반응형

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 속성을 볼 수 있습니다.

참고 URL : https://stackoverflow.com/questions/14206492/how-do-i-store-a-current-user-context-in-angularjs

반응형