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