6

Ich versuche derzeit, Routing zu verwenden, so dass ein Benutzer zu einer bestimmten Seite umgeleitet wird, wenn sie nicht authentifiziert sind, und zu einer anderen Seite umleitet, wenn sie authentifiziert sind.Wie funktioniert Routing mit Benutzerauthentifizierung in Firebase mit AngularFire?

Im Folgenden ist der HTML-

<html ng-app="sampleApp"> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> 
    <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script> 
    <script src="https://cdn.firebase.com/libs/angularfire/0.9.1/angularfire.min.js"></script> 
    <script src="app.js"></script> 
    </head> 
    <body ng-controller="SampleCtrl"> 
    <div ng-show="user"> 
     <p>Hello, {{ user.facebook.displayName }}</p> 
     <button ng-click="auth.$unauth()">Logout</button> 
    </div> 
    <div ng-hide="user"> 
     <p>Welcome, please log in.</p> 
     <button ng-click="auth.$authWithOAuthPopup('facebook')">Login</button> 
    </div> 
    </body> 
</html> 

Unterhalb der Anwendung

var app = angular.module("sampleApp", ["firebase"]); 

//Generates the $firebaseAuth instance 
app.factory("Auth", ["$firebaseAuth", function($firebaseAuth) { 
    var ref = new Firebase("https://crowdfluttr.firebaseio.com/"); 
    return $firebaseAuth(ref); 
}]); 

//auth is now used in controller 
app.controller("SampleCtrl", ["$scope", "Auth", function($scope, Auth) { 
    $scope.auth = Auth; 
    $scope.user = $scope.auth.$getAuth(); 
}]) 

//redirects to homepage if $requireAuth rejects 
app.run(["$rootScope", "$location", function($rootScope, $location) { 
    $rootScope.$on("$routeChangeError", function(event, next, previous, error) { 
    if (error === "AUTH_REQUIRED") { 
     $location.path("/home"); 
    } 
    }); 
}]); 

//use routeProvider to only load HomeCtrl if $waitroAuth Resolves and returns promise 
app.config(["$routeProvider", function($routeProvider) { 
    $routeProvider.when("/home", { 
    controller: "HomeCtrl", 
    templateUrl: "views/home.html", 
    resolve: { 
     "currentAuth": ["Auth", function(Auth) { 
     return Auth.$waitForAuth(); 
     }] 
    } 
    }).when("/account", { 
    //controller only loaded if $requireAuth resolves 
    controller: "AccountCtrl", 
    templateUrl: "views/account.html", 
    resolve: { 
     "currentAuth": ["Auth", function(Auth) { 
     return Auth.$requireAuth(); 
     }] 
    } 
    }); 
}]); 

//returns the authenticated user from currentAuth or null if not logged in 
app.controller("HomeCtrl", ["currentAuth", function(currentAuth) { 
}]); 

app.controller("AccountCtrl", ["currentAuth", function(currentAuth) { 
}]); 

Etwas in meiner app ist oben nicht sinnvoll, so dass ein Benutzer auf eine andere Seite umgeleitet, sobald sie authentifiziert werden oder auf eine andere Seite umleiten, wenn sie nicht authentifiziert sind.

Sehen Sie hier für meine codepen: http://codepen.io/chriscruz/pen/ogWyLJ

Auch hier ist eine Seite als Referenz, wo ich versuche zu implementieren aus: https://www.firebase.com/docs/web/libraries/angular/guide.html#section-routes

Antwort

4

Ihre Lösung ganz einfach, umfassen ngRoute Bibliothek so:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-route.min.js"></script> 

in Ihrem HTML-Kopf.

Dann sind ngRoute als Abhängigkeit in Sie app, also:

var app = angular.module("sampleApp", ["firebase", "ngRoute"]); 

Blick auf Lösung auf codepen: http://codepen.io/christiannwamba/pen/jEmegY zu

Goodluck und Grüße