如何在 AngularJS 和 FireBase 中进行简单的基于角色的授权？

Posted 2023-02-27

【中文标题】如何在 AngularJS 和 FireBase 中进行简单的基于角色的授权？

【英文标题】：How to make simple role based authorization in AngularJS and FireBase?

【发布时间】：2017-01-18 08:26:31

【问题描述】：

我想在 AngularJS 和 FireBase（管理员、用户）中进行简单的基于角色的授权。 我做了基础授权和路由（请看下面的 3 个文件）。

我在 github 和 article 中找到了 repository，但代码对我来说太难了。 有没有更简单的方法？如何更改我的代码以添加此功能？ 我将不胜感激可以帮助我的文章和存储库的链接。

---

app.js

var app = angular.module( 'journalApp', [ 'firebase', 'ngRoute' ] );

app.constant( 'FIREBASE', '<FIREBASE URL>' );

app.config( [ '$routeProvider', '$locationProvider', function( $routeProvider, $locationProvider ) 

    $routeProvider.when( '/login', 
        templateUrl: 'views/login.html',
        controller: 'loginCtrl',
        controllerAs: 'loginCtl'
     );

    $routeProvider.when( '/logout', 
        templateUrl: 'views/login.html',
        controller: 'loginCtrl',
        controllerAs: 'loginCtl',
        resolve: 
            "logout": [ "authService", function( authService ) 
                authService.signOut();
            ]
        
     );

    $routeProvider.when( '/', 
        templateUrl: 'views/dashboard.html',
        resolve: 
            "currentAuth": [ "authService", function( authService ) 
                var auth = authService.auth();
                return auth.$requireSignIn();
            ]
        
    );

    $routeProvider.otherwise( 
        redirectTo: '/'
     );

    $locationProvider.html5Mode( true );

 ] );

app.run( [ "$rootScope", "$location", function( $rootScope, $location ) 
    $rootScope.$on("$routeChangeError", function(event, next, previous, error) 
        if (error === "AUTH_REQUIRED") 
            $location.path("/login");
        
    );
 ] );

---

loginCtrl.js

app.controller( 'loginCtrl', [ 'authService', function( authService ) 
    var self = this;

    self.signUp = function() 
        authService.createUser(self.email, self.password);
    ;

    self.logIn = function() 
        authService.authUser(self.loginEmail, self.loginPassword);
    ;

    self.signOut = function() 
        authService.signOut();
    ;
]);

---

authFactory.js

app.factory( 'authService',  [ '$firebaseAuth', '$window', function( $firebaseAuth, $window ) 

    var authService = ;

    var auth = $firebaseAuth(firebase.auth());

    authService.createUser = function(email, password) 
        auth.$createUserWithEmailAndPassword( email, password );
    ;

    authService.authUser = function( email, password ) 
        auth.$signInWithEmailAndPassword( email, password ).then(function( user ) 
            $window.location.href = "/";
        , function( error ) 
            var errorCode = error.code;
            var errorMessage = error.message;
            console.info( "Error in authUser - errorCode: " + errorCode + ". errorMessage: " + errorMessage);
        );
    ;

    authService.signOut = function() 
        auth.$signOut();
    ;

    authService.auth = function() 
        return auth;
    ;

    return authService;
]);

---

【参考方案1】：

有很多关于如何制作的信息。

---

来自 *** 的文章/指南/答案

Article about advanced data modelling and role based authorization Article about role based routing in AngularJS（ng-mm-route） Little guide about developing a permission-based authorization system in a AngularJS app Article about authorization and role based permissions in AngularJs Good solution from *** Recommendation from *** (angular permission)

有用的存储库

Basic user profile management Demo to show how to use Angular + Firebase + Google Material Design together Simple Login (Facebook, Twitter, Google, Github) and Chat Application with Angular and Firebase Role based authorization for Firebase Role-based permissions for AngularJS Stand-alone project showing how to make a robust angular application serving access permissions from Server

【讨论】：

不错的链接库！我还强烈推荐今年 I/O 演讲中的“技巧 #2”：youtu.be/5hYMDfDoHpI?t=9m13s

Firebase 刚刚通过对 ID 令牌的自定义用户声明启动了对基于角色的访问的支持：firebase.google.com/docs/auth/admin/custom-claims