javascript - 如何构建具有可靠后端的完全可扩展的SPA

标签 javascript node.js angularjs http-authentication

在过去的几周中,我一直在努力地使用Angular,Node,TDD,Heroku,Amazon S3等。试图更好地了解如何构建具有可靠后端的完全可扩展的SPA,如何使用grunt,bower,haven尚未使用Jasmine将自己的脚趾浸入TDD中,尽管我了解如何通过Karma进行测试,但这应该是我的下一步。

可以肯定的是:它是很多信息

有关使用所有这些技术的问题/理论。

首先,我玩过

  • Angular应用程序https://github.com/angular-app/angular-app
  • NG样板https://github.com/joshdmiller/ng-boilerplate

  • 并阅读了数十篇文章等

    我发现NG Boilerplate具有最合理的结构化(就我对这些事情的理解而言)。

    作为一个演示项目(从很小的东西演变而来),我想使用以下方法制作单页CRUD应用程序:
  • NodeJS作为后端
  • Express作为Web应用程序框架
  • NG样板作为客户端
  • 部署到Heroku的应用程序
  • MongoDB for DB
  • 用于动态存储的Amazon S3

  • 现在我想使用Angular-Apps的(https://github.com/angular-app/angular-app)服务器作为NGBoilerplate kickstarter的后端

    我想知道如何:

    从我看到客户端直接连接到MongoDB的
  • Angular 客户端如何来回交流以表达?
  • 我读了一篇有趣的文章http://www.espeo.pl/2012/02/26/authentication-in-angularjs-application,它与身份验证的工作方式有关。


  • 长话短说,没有我问很多问题,有人可以详细描述这样一个应用程序的工作流程吗?获取 session ,登录,访问内容编辑权限,将快速路由与 Angular 路由绑定(bind)(例如X路由只能由管理员访问)等。

    我的头上有很大的模糊:)。

    最佳答案

    在过去的几个月中,我在这些问题和问题上发挥了很多作用,得出了以下结论:
    出于我的目的,我需要一个几乎完全依赖Angular的应用程序,而没有单独的后端,并且当前的后端应该来自Angular。
    为什么?因为我希望所有鸡蛋都放在一个篮子里,所以我不想在很多不同的部分上配置大量的东西。
    作为我项目的基础,我最终使用ng-boilerplate作为样板:),对开发过程,Grunt任务等进行了一些更改,每个人都可以根据每个特定的项目来弄清楚。
    好吧,我要在这里碰到的主要问题是,对于使用Angular制作的真正后端,我们需要安全的路由和安全的持久性方法,即数据库。
    对于该应用程序,我利用了ng-boilerplate的模块化和依赖关系感知结构,我认为它非常适合Angular应用程序。
    无论如何,我要把事情从头到尾(从最终产品的 Angular 来看,就像我上面说的那样,构建环境取决于您,但是ng-boilerplate很棒),就可以开始了。

  • 在上层,我们有实际的Angular应用程序,正是我们想要的
  • 服务器容器是一个带有express和其他模块的NodeJS服务器,用于部分照顾不同浏览器和设备上的路由(在我的应用程序中,当存在部分URL时,我通过诸如设置的express.htaccess来增强HTML5路由它应该重定向到Angular将从中读取请求路径的索引,然后将您应用到该位置)
  • 就我而言,整个过程都在Heroku上的Node.JS应用程序上运行,如果需要,您还可以在其中安装其他几项。

  • 现在,为了持久性,具有身份验证和安全性,并且不依赖于后端,我正在使用firebase(https://www.firebase.com/),那里有一些很棒的教程可以帮助您实现并在Angular APP中实现真正的持久性,并提供以下路线您已经登录,登录时可以访问DB中的自定义表/对象,等等。这是真正的交易。
    如果您不想依靠OAuth的可能网站登录(Facebook,github,Persona或Twitter),并且想要自定义电子邮件和地址,则可以直接使用Firebase进行操作,以创建帐户并删除它们,等等。
    FIREBASE Angular后端。
    因此,就像他们在网站上所说的那样,Firebase是一个强大的API,可以实时存储和同步数据。
    我不知道确切的解决方法,因此我将从创建Firebase数据库开始。创建它之后,在后端我们有几个选择,其中之一是安全性。
    {
        "rules": {
            ".read": true,
            ".write": "auth != null"
        }
    } 
    
    在这里,如果我们阅读https://www.firebase.com/docs/security/security-rules.html上的文档,将会了解我们可以为数据库中的每个“表”添加规则,因此我们可以拥有3个 protected “表”对象以及一些不 protected 对象。
    我们可以根据每个用户,不同的规则来保护表,无论是否登录,我们也都继承了规则等,请阅读那里的文档,这确实是一本好书。
    现在,要使这些规则生效,我们需要启用Firebase简单登录并从Facebook,Twitter,Github,Persona,Email&Password和Anonymous中选择所需的登录方法。
    对于真实的应用程序,我们还需要以匿名方式(用户 session 等)和登录状态(使用上述两个选项之一)将信息写入数据库,以存储和读取信息。
    我,我想以一种快速简便的方法进行Facebook身份验证,阅读在那里我制作了一个快速Facebook应用程序的文档,然后在Facebook上该应用程序的设置中,将Firebase的后端https://www.dropbox.com/s/xcd4b8tty1nlbm5/Screenshot%202014-01-22%2013.51.26.png
    这提供了一个临时链接,用于登录Facebook并有权访问“表”,如果规则为auth !=null,则该表已被锁定。

    现在,到Angular后端。
    Firebase提供了一个库供我们放入我们的应用程序,还提供了一个SimpleLogin库(对于Angular也是如此),该工厂服务称为AngularFire。
    就我而言,我使用连接到数据库的use方法制作了本地firebaseService:
    angular.module('firebaseService', ['firebase'])
      .service('firebaseService', function ($firebase, $rootScope) {
    
        //Input data in Firebase
        var URL = "https://glowing-fire-xxxx.firebaseio.com";
        var tellFirebase = function(ID, JSON) {
          users = $firebase(new Firebase(URL + '/' + ID));
          users.details = JSON;
          users.$save('details');
        };
    
        return {
          addUser: function(ID, JSON) {
            tellFirebase(ID, JSON);
            if ($rootScope.debugStatus === true) {
              console.log('Firebase Service .addUSer Called');
            }
          },
          getUser: function(ID) {
            if ($rootScope.debugStatus === true) {
              console.log('Firebase Service .getUser Called');
            }
          }
        };
      }) 
    
    从这里,我们进行读取/写入,在 Controller 页面上,我有以下内容:
    值得注意的是,我有一个中间件服务(存储管理),可以在Firebase和MongoDB之间进行切换,以免造成混淆。
    .controller( 'SomeCtrl', function SomeController( $scope, storageManagement, $firebase, $firebaseSimpleLogin ) { 
         /*===========================
         * ==== FIREBASE LOGIN
         * ===========================*/
    
        var URL = "https://glowing-fire-XXXXX.firebaseio.com";
        var users = new Firebase(URL);
    
        $scope.auth = $firebaseSimpleLogin(users, function(error, user){});
    
        if ($scope.auth.user == null) {
          //$scope.auth.$login('facebook');
        }
    
        console.log($scope.auth);
    
        //$scope.auth.$logout('facebook');
    
    
        $scope.doLogin = function() {
          console.log($scope.facebookemail);
          console.log($scope.facebookpassword);
    
          $scope.auth.$login('facebook');
    
          $scope.$on("$firebaseSimpleLogin:login", function(evt, user) {
            storageManagement.runFirebase();
          });
    
          /* example of logging in while asking access to permissions like email, user_list, friends_list etc.
           * auth.$login('facebook', {
           rememberMe: true,
           scope: 'email,user_likes'
           });*/
        };
        $scope.doLogout = function() {
          $scope.auth.$logout();
        };
    });
    
    我要在 Controller 中添加$ firebase服务,并在其中添加$ firebaseSimpleLogin服务。
    在这里,这将向范围展示两个按钮(登录/注销),该按钮从Facebook弹出OAuth窗口,并具有电子邮件/密码设置,您无需进行此项设置,为获得完整的理解,请阅读firebase上的完整文档。
    这样,一旦我们登录,我们就可以访问规则中描述的表,如果我们选择电子邮件/密码,实际上甚至对于Facebook或其他方法,我们都可以为某些IDENTITIES分配某些规则,因此您可以拥有一个ADMIN表,其中您可以保存在页面加载时读取的设置,以应用所需的任何内容。
    现在,使用路由,我们可以检查$ scope.auth状态,如果我们将其放在$ rootScope中,并在转到路由时检查状态,如果状态检查,我们可以到达该路由,并填充其中否则,即使有人用这种方式入侵数据库,也不会看到任何东西,因为没有权限读取未经授权/错误的电子邮件用户的表。
    这大概是基于http://www.ng-newsletter.com/posts/back-end-with-firebase.html这篇文章的。。。我很难改变那个人在那儿写的想法,但是,在一天之后,从Firebase阅读文档(并设置中间件,请介意),我发现了出来,它的工作原理。
    与数据库的连接就像一个BIG对象一样暴露在其中,您可以在其中执行所需的任何操作。

    这不是最完整的解释,但是它可以使您顺利完成一些令人敬畏的事情:D

    关于javascript - 如何构建具有可靠后端的完全可扩展的SPA,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18519669/

    相关文章:

    node.js - 每个模型对象的动态表规范

    node.js - 如何正确在线上传本地主机网站?

    javascript - Angular ng-repeat orderBy不起作用

    javascript - Angular 中单页路由的误解

    javascript - 在类型转换数组上使用 forEach 时遇到问题

    javascript - 上传多个文件时禁用 Dropzone 中的多个图标

    javascript - 如何检查 Node JS 中的错误类型?

    javascript - 从 Javascript window.open 调用 AngularJS RouteProvider Controller ?

    javascript - 将 Angular Scop 绑定(bind)为 JavaScript 参数

    javascript - Angular 2 错误- RC4 版本没有将 "exportAs"设置为 "ngModel"的指令