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

问题描述

我想使用 Firebase V3、AngularJS 和 ui.router 保护我网站上的各种路由.

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

这看起来是一个类似的问题.我已经按照那个 SO 帖子中的步骤操作，但它对我不起作用.

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.

我在 run 函数中收到此错误.

I'm getting this error within my run function.

ReferenceError: Firebase is not defined(…)       

我已经在页面上包含了 AngularFire，如果我不包含，即使我从依赖项数组中删除 Firebase，我也会收到模块注入器错误.

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 2.0+ 版本与 Firebase 3.0 兼容.低于 AngularFire 2.0 的任何内容都适用于旧版 Firebase.

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屋！