MEAN passport-local 및 $ routeProvider를 사용하여 사용자 인증 스택

Question

passport-local을 사용하여 사용자를 내 응용 프로그램에 기록합니다. 내 angularJS 컨트롤러에서 호출되는 아래 함수를 통해 로그인합니다.

$http.post('/login', $scope.user).then(function (response){ 
    if(response.data.success){ 
     //If successful I console.log the user data and redirect them to the main page. 
     console.log(response.data.user); 
     $location.path(response.data.redirectTo); 
    } else { 
     // Handle the error messages passed back by my express routing. 
    } 
}); 

이것은 예상대로 내가 올바른 세부로 로그인하면, 다음은 사용자를 CONSOLE.LOG 다음 새 페이지로 저를 리디렉션합니다 작업.

제 질문은 어떻게 작성하여 다른 모든 페이지에서 사용자가 로그인했는지 확인하는 것입니다. 내가받는 사용자 데이터로 무엇을 사용해야합니까? 내가 얘기하고 페이지는 $ routeProvider 라우팅 아래를 사용

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/login', { 
    templateUrl: 'login.html', 
    controller: 'loginCtrl' 
    }); 

    $routeProvider.when('/home', { 
    templateUrl: 'home.html', 
    controller: 'homeCtrl', 
    // Something to make sure the user is logged in 
    }); 

}]) 

내가 명시 적 라우팅을 통해이 문제를 처리하기 위해 저를 요구하고있다 읽었지만 /login하지 않기 때문에 그건 그냥 리디렉션 루프의 원인이되는 튜토리얼의 모든 isAuthenticated 라우팅 미들웨어를 전달하십시오.

app.get('*', isAuthenticated, function(req,res){ 
    res.sendFile("index.html"); 
}); 

function isAuthenticated(req,res,next){ 
    if(req.isAuthenticated()){ 
     next(); 
    } else { 
     res.redirect('/login'); 
    } 
} 

여기에서 앞으로 나아갈 수있는 방법에 대한 도움을 주시면 감사하겠습니다.

Answer 1

귀하의 angularJs 앱은 로그인이 필요한시기를 감지해야합니다. 이를 위해서는 명시 적 앱에서 얻은 모든 응답에 대한 인터셉터를 작성해야하며 로그인이 필요한 경우 로그인 페이지를 표시하십시오. 가장 좋은 세상에서 Express 앱이/login으로 리다이렉트되어서는 안되기 때문에, angiJs 앱으로 라우팅을 남겨 두어야합니다. 요청이 승인되지 않았 음을 나타 내기 위해 json 리소스 또는 401 Status Code Response와 같은 것을 보내야합니다. 무단 헤더의 수신시

, 당신의 AngularJS와 인터셉터는 로그인이 필요하다는 것을 확인하고 로그인 페이지가 표시됩니다 :이 설정에서

app.config(function($httpProvider) { 

    //configure $http to show a login dialog whenever a 401 unauthorized response arrives 
    $httpProvider.responseInterceptors.push(
      function($rootScope, $q, $location) { 

       return function(promise) { 
        return promise.then(
          //success -> don't intercept    
          function(response) { 
           return response; 
          }, 
          //error -> if 401 save the request and broadcast an event 
            function(response) { 
           if (response.status === 403 || response.status === 401) { 
              var deferred = $q.defer(), 
                req = { 
                 path: $location.path(), 
                 config: response.config, 
                 deferred: deferred 
                }; 
              $rootScope.requests401.push(req); 
              $rootScope.$broadcast('event:loginRequired'); 
              return deferred.promise; 
             } 
             return $q.reject(response); 
            } 
          ); 
         }; 
      }); 
     });    
app.run(function($rootScope, $http, $location, base64) { 


/** 
* Holds all the requests which failed due to 401 response. 
*/ 
$rootScope.requests401 = []; 

$rootScope.$on('event:loginRequired', function() { 
    $location.path('/login'); 
}); 

/** 
* On 'event:loginConfirmed', resend all the 401 requests. 
*/ 
$rootScope.$on('event:loginConfirmed', function(){ 

    var i, requests = $rootScope.requests401, 
      retry = function(req) { 
       $http(req.config).then(function(response) { 
        req.deferred.resolve(response); 
       }); 
      }; 

     }); 
}); 

를, 당신의 LoginCtrl 또한 loginConfirmed 이벤트를 방출 할 필요가있다. 일단 로그인 한 사용자가 있으면 나중에 액세스 할 수 있도록 루트 범위에 세부 정보를 저장할 수 있습니다.