如何使用 Angular (AngularFire) 和 Firebase 解析深层链接

Question

消歧义：

这个问题不是因为重写在 firebase.json 中以某种方式配置错误。 Firebase 文档清楚地说明了如何执行此操作 here。问题是只有浅链接有效；深层链接没有。

问题：

在 Firebase 中使用 AngularFire 打开 html5Mode 后，深层链接不起作用：一级页面加载；任何其他页面都不会。所以 /login 有效，但 /supplier/accounts 无效。

config.js:

function configState($stateProvider, $urlRouterProvider, $compileProvider, $httpProvider) {
    // Optimize load start with remove binding information inside the DOM element
    $compileProvider.debugInfoEnabled(true);

    // Set default state
    $urlRouterProvider.otherwise("/login");

    $stateProvider
        /* 
         * Common Views
         */
        .state('common', {
            abstract: true,
            templateUrl: "views/common/content_empty.html",
            data: {
                pageTitle: 'Common'
            }
        })
        .state('common.login', {
            url: "/login",
            templateUrl: "views/common_app/login.html",
            data: {
                pageTitle: 'Login page',
                specialClass: 'blank'
            }
        })
        .state('common.logout', {
            url: "/logout",
            templateUrl: "views/common_app/logout.html",
            data: {
                pageTitle: 'Logout page',
                specialClass: 'blank'
            },
            resolve: {
                // controller will not be loaded until $requireAuth resolves
                "currentAuth": ["$state", "Auth", "loginRedirectPath", function($state, Auth, loginRedirectPath) {
                    return Auth.$requireAuth();
                }]
            }
        })

        /* 
         * Secure Abstract Class
         */
        .state('secure', {
            abstract: true,
            templateUrl: "views/common/content_empty.html",
            resolve: {
                // controller will not be loaded until $requireAuth resolves
                "currentAuth": ["$state", "Auth", "loginRedirectPath", function($state, Auth, loginRedirectPath) {
                    return Auth.$requireAuth();
                }]
            }
        })   


        /* 
         * Supplier Accounts
         */
        .state('secure.account', {
            abstract: true,
            url: "/supplier",
            templateUrl: "views/common/content.html",
            data: {
                pageTitle: 'Supplier'
            }
        })       
        .state('secure.account.accounts', {
            url: "/accounts",
            templateUrl: "views/account/accounts.html",
            controller: "suppliersListCtrl as suppliersListCtrl",
            data: {
                pageTitle: 'Accounts',
                pageDesc: 'Accounts assiged to this User'
            }
        })
};

angular
    .module('app')
    // for ui-router
    .run(["$rootScope", "$state", function($rootScope, $state) {
        $rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
            // Catch the error thrown when the $requireAuth promise is rejected
            // redirect the user back to the login page
            if (error === "AUTH_REQUIRED") {
                console.log("AUTH_REQUIRED Fired!!!");
                $state.go("common.login");
            }
        });

        // Log ui-router errors in the console
        $rootScope.$on("$stateChangeError", console.log.bind(console));
    }])
    .factory("Auth", ["$firebaseAuth", "FIREBASE_URI",
        function($firebaseAuth, FIREBASE_URI) {
            var ref = new Firebase(FIREBASE_URI);
            return $firebaseAuth(ref);
        }
    ])
    .config(["$locationProvider", function($locationProvider) {
        $locationProvider.html5Mode(
            {
                enabled: true,
                requireBase: false
            });
    }])
    .constant('FIREBASE_URI', '<FIRE BASE URI HERE>')
    .constant('loginRedirectPath', 'common.login')
    .config(configState)

firebase.json:

{
    "firebase": "firebase-app",
    "public": "main",
    "rewrites": [{
        "source": "**",
        "destination": "/index.html"
    }],
    "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
    ]
}

Answer 1

（查看了我推送的错误修复，所以这个问题不会一直没有答案。）

原来这是我的 Gruntfile。我需要在我的 Grunt 服务器设置中更新我的 LiveReload 配置。您的 LiveReload 更改应如下所示：

// Grunt configuration
grunt.initConfig({

    // Project settings
    your_application_name: appConfig,

    // The grunt server settings
    connect: {
        options: {
            port: 8000,
            hostname: 'localhost',
            livereload: 35729
        },
        livereload: {
            options: {
                open: true,
                middleware: function (connect) {
                    return [
                        modRewrite(['^[^\.]*$ /index.html [L]']),
                        connect.static('.tmp'),
                        connect().use(
                            '/bower_components',
                            connect.static('./bower_components')
                        ),
                        connect.static(appConfig.app)
                    ];
                }
            }
        }
        //...
    }
});

如何使用 Angular (AngularFire) 和 Firebase 解析深层链接

How do I resolve deep links using Angular (AngularFire) and Firebase

angularjs

firebase

angularfire

firebase-hosting