Angular + Firebase + AngularFire 种子指令 ShowAdmin [英] Angular + Firebase + AngularFire Seed Directive ShowAdmin

问题描述

首先，对我的情况进行冗长的前期描述...我的应用程序使用 Angular.js 和 AngularFire 在没有后端的情况下运行.我使用 Firebase Simple Login 进行身份验证，AngularFire-Seed 项目提供了一种获取身份验证信息的简单方法.为了在应用程序中创建管理员，我将用户的 uid 存储在 Firebase 的/admin 中，因此我可以检查/admin/simpleLogin:45 是否存在，例如，查看 uid simpleLogin:45 的用户是否是管理员.

First, a wordy up-front description of my situation... My application is utilizing Angular.js and AngularFire to run without a backend. I am using Firebase Simple Login for authentication, and the AngularFire-Seed project provides a simple way to get auth info. To create an administrator in the application, I'm storing a user's uid in /admin in my Firebase, so I can check if /admin/simpleLogin:45 exists, for example, to see if the user with uid simpleLogin:45 is an admin.

我正在尝试创建一个指令，如果当前用户是我的应用程序的管理员，它将导致显示一个元素.我写了一个部分有效的指令，但我无法解决这些问题.我请求你的帮助，勇敢的读者！

I'm trying to create a directive which will cause an element to be shown if the current user is an administrator of my application. I've written a directive that partially works, and I'm having trouble getting the kinks worked out. I request your assistance, gallant reader!

这是我的指令代码:

'use strict';

/* Directives */

angular.module('myApp.directives', []).
    directive('appVersion', ['version', function (version) {
        return function (scope, elm, attrs) {
            elm.text(version);
        };

    }])

    .directive('bpmShowAdmin', function ($rootScope, $scope, syncData, waitForAuth) {
        return {
            restrict: 'A',
            compile: function (el, attr) {
                el.addClass('hide');
                waitForAuth.then(function () {
                    console.log('checking for admin rights');
                    var admins = syncData('admins');

                    admins.$on("loaded", function () {
                        var isAdmin = $rootScope.auth.user.uid in admins;
                        if (isAdmin) {
                            console.log('admin rights granted!');

                            el.toggleClass('hide', !isAdmin);
                        }
                    });
                });

                $rootScope.$on("$firebaseSimpleLogin:logout", function () {
                    el.toggleClass('hide', true);
                });
            }
        }
    });

该指令是通过做一些这样的事情来使用的:

The directive is used by doing a little something like this:

<li bpm-show-admin>
    ...
</li>

这在大多数情况下都有效，但我显然不了解编译/链接阶段或类似的东西.当我第一次登录我的应用程序时，它并不总是显示我以管理员身份登录时应该可见的所有内容.它会在一两次刷新后工作，因此存在某种竞争条件或我放置指令逻辑的位置(编译、链接、控制器)的问题.

This works most of the time, but I'm clearly not understanding the compile/link phases or something like that. When I first log into my application, it doesn't always show everything that's supposed to be visible when I'm logged in as an admin. It works after a refresh or two, so there's some kind of race condition or issue with where I'm putting the directive logic (compile vs. link vs. controller).

我一直在使用 AngularFire-seed 项目的 ngShowAuth 作为示例，我相信它是由臭名昭著的 katowulf 开发的.这是该代码的示例

I've been using the AngularFire-seed project's ngShowAuth as an example, which I believe was developed by the infamous katowulf. Here's an example of that code

我做错了什么和/或不理解?

What am I doing incorrectly and/or not understanding?

感谢您的帮助！

推荐答案

我开始使用 fiddle 来获得进一步的帮助，但最终我对在 fiddle 中设置过于复杂的情况感到恼火并解决了该死的问题自己的事.这是我想出的:

I began to start a fiddle to get further help, but I wound up just getting pissed off at setting up my overly complex situation in a fiddle and solved the damn thing myself. Here's what I came up with:

'use strict';

angular.module('bpmWaitForAdmin', [])

    .service('bpmWaitForAdmin', function ($rootScope, syncData, waitForAuth) {
        return {
            init: function (auth) {
                $rootScope.$on('$firebaseSimpleLogin:login', function (e, user) {
                    var admins = syncData('admins');

                    admins.$on("loaded", function () {
                        if (user.uid in admins) {
                            $rootScope.$broadcast('bpmWaitForAdmin:true');
                        }

                        else {
                            $rootScope.$broadcast('bpmWaitForAdmin:false');
                        }
                    });
                });

                $rootScope.$on('$firebaseSimpleLogin:logout', function () {
                    $rootScope.$broadcast('bpmWaitForAdmin:false');
                });
            }
        };
    })

    .directive('bpmShowAdmin', function ($rootScope, $timeout) {
        return {
            restrict: 'A',
            compile: function (element, attributes) {
                element.addClass('hide');

                $rootScope.$on("bpmWaitForAdmin:true", function () {
                    $timeout(function () {
                        element.removeClass('hide');
                    });
                });

                $rootScope.$on("bpmWaitForAdmin:false", function () {
                    $timeout(function () {
                        element.addClass('hide');
                    });
                });
            }
        }
    });

这篇关于Angular + Firebase + AngularFire 种子指令 ShowAdmin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！