Chr*_*ris 7 authentication angularjs firebase angular-routing angularfire
我目前正在尝试使用路由,以便用户在未经过身份验证时被重定向到某个页面,如果经过身份验证,则会重定向到另一个页面.
下面是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>
以下是申请表
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) {
}]);
我上面的应用程序中的某些内容没有意义,因此在用户通过身份验证后将其重定向到其他页面,或者如果未经过身份验证,则重定向到另一个页面.
在这里查看我的codepen:http://codepen.io/chriscruz/pen/ogWyLJ
另外,这里有一个供我参考的网页供参考:https://www.firebase.com/docs/web/libraries/angular/guide.html#section-routes
您的解决方案非常简单,包括ngRoute Library:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-route.min.js"></script>
在你的HTML头.
然后还包括ngRoute作为您应用程序中的依赖项,因此:
var app = angular.module("sampleApp", ["firebase", "ngRoute"]);
查看在解决方案上codepen:http://codepen.io/christiannwamba/pen/jEmegY太
古德勒克和问候
| 归档时间： |
|
| 查看次数： |
5081 次 |
| 最近记录： |