如何使用Firebase v3保护Angular路线? [英] How to secure Angular routes with Firebase v3?

查看:137
本文介绍了如何使用Firebase v3保护Angular路线?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想使用Firebase V3,AngularJS和ui.router来保护我网站上的各种路线。



看起来像一个类似的问题。我已经按照这个SO帖子的步骤,但它不适合我。



我希望发生的事情:
当点击常见问题解答链接我应该被转发到登录页面如果注销,并且应该显示登录时常见问题解答页。



实际上发生:
常见问题页面根本无法访问。登录没有任何区别。 我在运行

  ReferenceError:Firebase未定义(...)

我在页面中包含了AngularFire,如果我没有收到模块注入错误,即使我将Firebase从依赖数组中移除。



pre $ var app = angular.module('app',['ui.router','firebase']);
app.constant('FirebaseDatabaseUrl','https://myfbdb.firebaseio.com');
app.config($ stateProvider,$ urlRouterProvider,$ firebaseRefProvider,FirebaseDatabaseUrl){
$ firebaseRefProvider.registerUrl(FirebaseDatabaseUrl);
//如果请求一个不同于状态的路由,
//转到auth路由
//$urlRouterProvider.otherwise('/logintest/login');

$ stateProvider
.state('login', {
url:'/ login',
templateUrl:'pages / login.html',
controller:'LoginController as login'
})

.state('faq',{
url:'/ faq',
templateUrl:'pages / faq.html',
controller:'FaqController as faq',
解决:{
//直到$ requireSignIn解析
firebaseUser:[$ firebaseAuthService,function($ firebaseAuthService)
// $ waitForSignIn返回一个承诺,这样的决心等待它完成
返回$ firebaseAuthService。$ waitForSignIn(); ('about',{
url]'/ about',
templateUrl:'



$) 'pages / about.html',
controller:'AboutController as about',
解析:{
//直到$ requireSignIn解析
firebaseUser,控制器才会被加载: ($ firebaseAuthService),函数($ firebaseAuthService){
//如果promise被拒绝,它会抛出$ stateChangeError
return $ firebaseAuthService。$ requireSignIn();
}]
}
})

});


app.controller('FaqController',['$ scope','firebaseUser',function($ scope,firebaseUser){
console.log 'faq')
}]);




$ b app.run([$ rootScope,$ state,function($ rootScope,$ state){
console.log('run');
$ rootScope。$ on($ stateChangeError,function(event,toState,toParams,fromState,fromParams,error){
//我们可以捕捉$ requireSignIn承诺被拒绝时抛出的错误
//并将用户重定向到主页
if(error ===AUTH_REQUIRED){
console.log('redirecting登录页面)
$ state.go(login);
}
});
}]);


解决方案

AngularFire 2.0+版本与Firebase 3.0兼容。 AngularFire 2.0以下的任何版本都适用于Firebase的旧版本。


I want to protect various routes on my site using Firebase V3, AngularJS and ui.router.

This looks like a similar issue. I've followed the steps from that SO post but its not working for me.

What I expect to happen: When clicking the FAQ link I should be forwarded to the login page if logged out and should display the FAQ page when logged in.

What actually happens: FAQ page isn't accessible at all. Logging in doesn't make any difference. It also doesn't forward me to the login page when logged out.

I'm getting this error within my run function.

ReferenceError: Firebase is not defined(…)       

I've included AngularFire on the page, if I don't I get a module injector error even if I remove Firebase from the dependency array.

var app = angular.module('app', ['ui.router', 'firebase']);
app.constant('FirebaseDatabaseUrl', 'https://myfbdb.firebaseio.com');
app.config(function($stateProvider, $urlRouterProvider, $firebaseRefProvider, FirebaseDatabaseUrl) {
    $firebaseRefProvider.registerUrl(FirebaseDatabaseUrl);
// If a route other than status is requested,
// go to the auth route
//$urlRouterProvider.otherwise('/logintest/login');

$stateProvider
    .state('login', {
        url: '/login',
        templateUrl: 'pages/login.html',
        controller: 'LoginController as login'
    })

    .state('faq', {
        url: '/faq',
        templateUrl: 'pages/faq.html',
        controller: 'FaqController as faq',
        resolve: {
          // controller will not be loaded until $requireSignIn resolves
          "firebaseUser": ["$firebaseAuthService", function($firebaseAuthService) {
            console.log('waitForSignIn')
                    // $waitForSignIn returns a promise so the resolve waits for it to complete
                    return $firebaseAuthService.$waitForSignIn();
            }]
          } 

    })
    .state('about', {
        url: '/about',
        templateUrl: 'pages/about.html',
        controller: 'AboutController as about',
        resolve: {
          // controller will not be loaded until $requireSignIn resolves
          "firebaseUser": ["$firebaseAuthService", function($firebaseAuthService) {
            // If the promise is rejected, it will throw a $stateChangeError
            return $firebaseAuthService.$requireSignIn();
          }]
        }           
    })

});



app.controller('FaqController', ['$scope', 'firebaseUser', function($scope, firebaseUser){
console.log('faq')
}]);





app.run(["$rootScope", "$state", function($rootScope, $state) {
  console.log('run');
  $rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
 // We can catch the error thrown when the $requireSignIn promise is rejected
 // and redirect the user back to the home page
 if (error === "AUTH_REQUIRED") {
    console.log('redirecting to login page')
   $state.go("login");
 }
 });
  }]);

解决方案

AngularFire versions 2.0+ are compatible with Firebase 3.0. Anything below AngularFire 2.0 is for the legacy version of Firebase.

这篇关于如何使用Firebase v3保护Angular路线?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆