사용자 로그인

Question

나는 웹 사이트를 구축하고 후 사업부를 변경하고 내가 단일 페이지 응용 프로그램을하고자하는 방법. Iam은 nodej를 백엔드로 사용하고 각도를 프론트 엔드로 사용합니다. 스피가 붙어 것은 내가 사용자가 표시되어야 다른 사업부의 로깅 이벤트에 로그인하지 않은 경우 특정 사업부를 표시 할 수 있습니다. 그 일을 가능하게하는 가장 좋은 방법은 무엇입니까?

내 지식에 따라 ng-if를 두 div의 속성으로 사용하여 서로 바꾸려고합니다. 나는 로그인 이름을 isloggedin()으로 확인하기위한 각도 함수를 사용했다.

그래서 다른 사업부의 한 사업부에서 <div ng-if="!checkLoggedin()"> 및 <div ng-if="checkLoggedin()">을 사용했다.

첫 번째 요청에서 페이지가 로그인되지 않고 조건이 정상적으로 작동합니다. 하지만 두 번째 로그인 한 후에 나타나지 않습니다.

내가 잘못 일어날 것으로 예상 또는이 일어날 수 있도록 다른이 뭔가 그것입니다. 함수의 값을 확인했고 한 조건에서는 데이터가 있고 다른 조건에서는 0 인 데이터가 있습니다. 어딘가 잘못 됐어.

조건부 코드를 추가했습니다.

var checkLoggedin = function ($q, $timeout, $http, $location, $rootScope) { 
    var deferred = $q.defer(); 

    $http({ 
     method: 'GET', 
     url: "http://localhost:3000/loggedin" 
    }).success(function (user) { 
     if (user !== '0') { 
      $rootScope.message = 'You are log in.'; 
      $timeout(deferred.resolve, 0); 
      deferred.resolve(); 
      $location.url('/home'); 

     } else { 
      $rootScope.message = 'You need to log in.'; 
      $timeout(function() { 
       deferred.reject(); 
      }, 0); 
      deferred.reject(); 
      $location.url('/login'); 
     }; 
    }); 

여기에 양식 코드가 있습니다.

<form action="/#/home" ng-submit="login(user)"> 
              <div class="form-group"> 
               <div class="input-group input-group-in ui-no-corner no-border bordered-bottom bg-none"> 
                <div class="input-group-addon"><i class="fa fa-envelope text-muted"></i></div> 
                <input class="form-control" placeholder="email" ng-model="user.email"> 
               </div> 
              </div><!-- /.form-group --> 
              <div class="form-group"> 
               <div class="input-group input-group-in ui-no-corner no-border bordered-bottom bg-none"> 
                <div class="input-group-addon"><i class="fa fa-lock text-muted"></i></div> 
                <input type="password" class="form-control" placeholder="Password" ng-model="user.password"> 
                <div class="input-group-addon"><small><a href="/#/forgotpass">Forgot?</a></small></div> 
               </div> 
              </div><!-- /.form-group --> 
              <div class="form-group"> 
               <div class="row"> 
                <div class="col-md-6"> 
                 <div class="nice-checkbox nice-checkbox-inline"> 
                  <input type="checkbox" name="rememberSignIn1" id="rememberSignIn"> 
                  <label for="rememberSignIn1">Remember</label> 
                 </div> 
                </div><!-- /.cols --> 
                <div class="col-md-6"> 
                 <button type="submit" class="btn btn-sm btn-block btn-info" style="margin-top:5px" >SUBMIT</button> 
                </div><!-- /.cols --> 
               </div><!-- /.row --> 
              </div><!-- /.form-group --> 
             </form><!-- /form --> 
            </div><!-- /.panel-body --> 

Answer 1

I시피 - :
당신은 당신이 좋아하는, 사용자 이름에 조건을 추가 할 수 있습니다 그래서 여기,
이 ng-model 변수에 ng-if 조건을 적용, 또한 다른 방법으로

<label> User Name </label> 
<input ng-model="username" /> 

그것을 접근 할 수 블록들

<div ng-if="!checkLoggedin()"> 

및

은 DOM로드 (페이지로드)에서 실행됩니다. 따라서 모델을 업데이트 할 기회가 없습니다. 올바른 접근 방식은 여기

var checkLoggedin = function ($q, $timeout, $http, $location, $rootScope) { 
var deferred = $q.defer(); 

$http({ 
    method: 'GET', 
    url: "http://localhost:3000/loggedin" 
}).success(function (user) { 
    if (user !== '0') { 
     // set value here 
     $rootScope.isLoggedIn = true; 

     $rootScope.message = 'You are log in.'; 
     $timeout(deferred.resolve, 0); 
     deferred.resolve(); 
     $location.url('/home'); 

    } else { 
     $rootScope.message = 'You need to log in.'; 
     $timeout(function() { 
      deferred.reject(); 
     }, 0); 
     deferred.reject(); 
     $location.url('/login'); 
    }; 
}); 

이 방법으로 우리를

<div ng-if="isLoggedIn"> ... <div ng-if="!isLoggedIn"> 

같은 경우 블록 범위 변수를 사용하고 서비스 호출, 말의 성공 처리기에서 변수의 값을 업데이트하는 것입니다 블록에 DOM이 추가되면 모델에 업데이트 된 값이 있는지 확인할 수 있습니다.

Answer 2

귀하의 접근 방식은 정확하지만 checkLoggedin()을 올바르게 정의하지 않았거나 잘못된 방식으로 사용했을 수 있습니다. ,

<div ng-if="username !== 'null' || 'undefined'"> If username fielld is touched </div> 

<div ng-if="username === 'null' || 'undefined'"> If username field is not touched </div>