새로운 Firebase Auth를 사용하여 AngularJS 라우트 및 해결

Question

Auth 시스템과 함께 새로운 Firebase를 사용하고 $routeProvider에있는 경로를 resolves으로 제한하려고합니다.

그러나 나는 꽤 이해하지 못합니다.

이것은 내가 가지고있는 것입니다. 내 .config 함수에서 경로를 정의하고 firebase를 초기화하려고합니다. 다음은 나의 설정 블록에있다.

$routeProvider 
    .when('/', { 
     templateUrl: 'templates/dashboard.ejs', 
     //resolve. this needs restricted 
    }) 
    .when('/login', { 
     templateUrl: 'templates/login.ejs' 
    }) 

firebase.initializeApp(config); 

나는 각도 내 .run() 블록에 나와있는 이러한 기능을 사용할 수 있는지 새로운 문서 사이트에서 발견했다.

.run(function($rootScope, $location) { 

    $rootScope.authentication = firebase.auth(); 

    /*firebase.auth().onAuthStateChanged(function(user) { 
     if(user) { 
      $rootScope.user = user; 
     } else { 
      $rootScope.user = false; 
      $location.path('/login') 
     } 
    })*/ 

    var user = firebase.auth().currentUser; 

    if (user) { 
     $rootScope.user = user; 
    } else { 
     $rootScope.user = false; 
     console.log('No User!'); 
     $location.path('/login'); 
    } 
}) 

이제 내가 무엇을 위의 단지 내 사이트의 모든 URL에 액세스 every other time을 발사한다.

내 질문은 어떻게 내 .run() 함수에있는 걸릴 및 경로를 다시 제한 할 수 있도록 내 routeProvider에 대한 해결 방법으로 만들 수 있습니다.

이전 firebase에서는 아래와 같이 $ firebaseAuth()를 호출하고 다음과 같이 호출 된 routeChangeError 함수가 있습니다.

// In config block. **old way** 
$routeProvider 
     .when('/', { 
      templateUrl: 'templates/dashboard.ejs', 
      resolve: { 
       "currentAuth": ["$firebaseAuth", function($firebaseAuth) { 
        var ref = new Firebase(fbUrl); 
        var authObj = $firebaseAuth(ref); 

        return authObj.$requireAuth(); 
       }] 
      } 
     }) 

그리고 나서 .run() 블록의 routechangeerror.

// .run block **old way** 
.run(function($rootScope, $location) { 
    $rootScope.$on("$routeChangeError", function(event, current, previous, eventObj) { 
     if (eventObj === 'AUTH_REQUIRED') { 
      console.log('auth required!'); 
      $location.path("/login"); 
     } 
    }); 
}) 

더 이상 $firebaseAuth()를 사용하지 않기 때문에이 더 이상 작동하지 않습니다. 또는 new Firebase(fbUrl);도 마찬가지입니다.

UPDATE

내가 조금 지저분하지만 경로를 조사하는 것은 조금 더, 나는이 함께했다처럼 느낀다. 내 경로 해결에

:

.when('/', { 
      templateUrl: 'templates/dashboard.ejs', 
      resolve: { 
       userAuthenticated: ["$http", "$q", function($http, $q) { 
        var deferred = $q; 
        if(firebase.auth().currentUser) { 
         deferred.resolve(); 
        } else { 
         deferred.reject(); 
         console.log('Really!?'); 
        } 
        return deferred.promise; 
       }] 
      } 
     }) 

그리고 간단한 routeChangeError

.

는

$rootScope.$on("$routeChangeError", function (event, current, previous, rejection) { 
     alert("Not authorised"); 
}) 

유일한 문제는 deferred.promise가 정의되지 않은 반환 표시입니다. 그것은 routeChangeError 함수를 활성화하지 않습니다. 내 console.log()이 호출 되더라도.

사용자가 인증되지 않은 경우 firebase.auth().currentUser이 null을 반환하기 때문일 수 있습니까?

Answer 1

이 메서드는 $waitForSignIn() 및 $requireSignIn으로 이름이 바뀌 었습니다.

$firebaseRefProvider 서비스를 사용하여 데이터베이스 URL을 구성하여 $firebaseAuthService을 자동으로 구성 할 수도 있습니다.

angular.module('app', ['firebase']) 
    .constant('FirebaseDatabaseUrl', '<my-firebase-url>') 
    .controller('HomeCtrl', HomeController) 
    .config(function($firebaseRefProvider, FirebaseDatabaseUrl, $routeProvider) { 
    $firebaseRefProvider.registerUrl(FirebaseDatabaseUrl); 
    $routeProvider.when("/home", { 
     controller: "HomeCtrl", 
     templateUrl: "views/home.html", 
     resolve: { 
      // controller will not be loaded until $waitForSignIn resolves 
      "firebaseUser": function($firebaseAuthService) { 
      return $firebaseAuthService.$waitForSignIn(); 
      } 
     } 
     }).when("/account", { 
     controller: "AccountCtrl", 
     templateUrl: "views/account.html", 
     resolve: { 
      // controller will not be loaded until $requireSignIn resolves 
      "firebaseUser": function(Auth) { 
      // If the promise is rejected, it will throw a $stateChangeError 
      return $firebaseAuthService.$requireSignIn(); 
      } 
     } 
     }); 
    }); 

function HomeController($scope, $firebaseRef, firebaseUser) { 

} 

Answer 2

지구상에서 가장 깨끗한 코드라면 잘 모르겠습니다 만 작동합니다.

이제 Firebase은 현재 사용자가 인증을 받도록 새로운 기능을 제공합니다. firebase를 초기화하면이 함수에 액세스 할 수 있습니다. firebase.auth().currentUser.

그래서, 경로, 당신은이 함수의 결과에 따라 약속을 생성하고 해결하는 것

(로그인이 아닌 경우는 null 경우이 기능은 사용자 정보를 반환).각도에 대한 실행 기능에 다음

$routeProvider 
    .when('/', { 
      templateUrl: 'templates/dashboard.ejs', 
      resolve: { 
       userAuthenticated: ["$http", "$q", function($http, $q) { 
        var deferred = $q.defer(); 
        if(firebase.auth().currentUser) { 
         deferred.resolve(); 
        } else { 
         deferred.reject('NOT_AUTHORIZED'); 
        } 
        return deferred.promise; 
       }] 
      } 
     }) 

과을 (당신이 내 질문에 업데이트에서 볼 수 있듯이 내가이 고생) $q.defer(); 이연 정의 할 수 있는지 확인, 당신은 경로 변경 오류를 볼 수 있습니다.

.run(function($rootScope, $location) { 
    $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) { 
     if(rejection == 'NOT_AUTHORIZED') 
     { 
     $location.path('/login'); 
     } 
    }) 
}) 

위 기능에서 경로 변경시 오류가 있는지 단순히 확인합니다. 거부가 'NOT_AUTHORIZED'와 같은 경우 (resolve 함수의 거부 기능에 전달됨) 로그인 화면으로 리다이렉트하여 인증됩니다.

참고 :이 routeChangeError 함수에서는 사용자가 권한이 없다는 것을 조금 나타낼 수도 있습니다.