Backbone.js 模板和 View 安全

Question

首先，如果这是一个重复的问题，我深表歉意。我看过几个类似的问题，但他们没有提供我能理解的答案。

我有一个 Backbone.js 应用程序，有很多 View /模板。有些 View 只有在用户登录后才能访问，有些则不能。我了解如何保护底层 REST 调用，但我仍然不明白用于检查特定 View 实际访问控制级别的正确架构/设计是什么。此外，在首次登录后存储和验证用户的正确方法是什么。
例如 :

用户打开第一个 View ，他可以在其中列出产品。这可以在没有身份验证的情况下访问。但是如果用户这样做了，我需要将数据添加到 REST 调用中。因为响应会有所不同(服务器端的推荐引擎)。

同一用户尝试访问“添加新产品”模板，他应该在其中进行身份验证。如果没有，我需要确保他重定向到登录页面。

我已经看到了几种解决方案，但都看起来像黑客。

什么是正确的，精心设计的，这样做的方式？

谢谢，
埃拉德。

Answer 1

关于安全的假设

如您所知，javascript 是一种解释性语言，因此即使经过混淆，它的源代码也是人类可读的。因此，可以安全地假设一个邪恶的或未注册的用户，我们称他为 Edward，可以访问应用程序的整个客户端代码。此外，根据您的模板加载机制，Edward 可以对您的 html 模板拥有完全读取权限也是一个合理的假设。

鉴于前面的假设，很明显必须保护的是 数据填充这些模板。您的 REST API 访问点必须强制执行某种身份验证机制，并在未经授权的访问情况下返回相关的错误消息。

有许多工具/中间件/框架可以实现良好的身份验证方案，其中大多数将使用 session 对象来验证请求的状态(已授权、未授权)，但这超出了本问题的范围。

处理未经授权的请求

假设您有一个适用于您的 REST API 的身份验证机制，以下是您如何处理未经授权的访问。

要求登录

对于需要登录的所有数据，您可以保留一个 HTTP 响应代码，并在收到该代码时将应用程序导航到登录 View 。正如您可能在其他问题中看到的那样，您只需为与 401 - unauthorized 对应的每个错误响应设置一个回调。 http 代码(假设您的主干路由器是 app.router ):

$.ajaxError(function (event, xhr) {
  if (xhr.status == 401)
    app.router.navigate('/login', { trigger, true });
});

现在您只需要确保您的 REST API 返回 401当这种请求需要重定向到登录表单时。

分支案例

在更明智的情况下，您可能希望根据用户的状态将其重定向到不同的 View 。在这些情况下，对 REST API 的数据请求不应返回 401因为它会被前一个回调拦截。任何其他错误代码都应该做 403 - forbidden可能合适或 400 - bad request ， 这真的不要紧。

话虽如此，当用户从主干路由器请求特定 View 时，在渲染 View 之前获取正确显示 View 所需的数据是一种很好的做法。当您调用此特定数据时，如果用户没有正确的凭据来获取它，您的服务器将返回一个带有错误代码的响应，应用程序不会拦截该响应，然后您可以对其进行分支。一个例子:

// Assuming we are defining methods inside your backbone app router:

listProducts : function() {
  var sensibleData = new app.SensibleData(),
      products = new app.Products();
      router = this;
  products.fetch();
  sensibleData.fetch({
    success : function( model, response, options ) {
      router.listProductsSignedIn( model, products );
    },
    error : function( model, response, options ) {
      router.listProductsNotSignedIn( products );
    }
},

listProductsSignedIn : function( sensibleData, products ) {
  //Create and show the full products view with all data
},

listProductsNotSignedIn : function( products ) {
   //Create and show the limited products view with the products data
},
//...

Et Voilà，您有一个两步路由器，其中第二步根据用户的凭据进行分支，错误是由 REST API 上的单独访问点生成的，用于未签名用户无法访问的敏感数据。由于授权过程和执行由服务器管理，因此您的应用程序了解用户是否具有正确访问权限的唯一方法是尝试获取数据。然后，该应用程序可以以正确的方式使用react。

存储用户信息

拥有一页 javascript 应用程序的一大优势是您可以在应用程序的不同 View 中保持状态。您可能希望在应用程序状态的某个地方保留用户信息，以便正确路由用户并显示适当的 View 。您可能有一些可供用户使用的配置选项(语言、配置文件等...)。此信息应通过 REST 调用提供，并且是成功登录的结果。用户登录后，您的应用程序将拥有一个定义的用户，然后可以使用此状态来显示正确的 View 。

如果你没有为你的应用程序共享一个全局对象，让你的不同 View 共享信息的一个好方法是使用事件。

// Assuming you have defined a User model that has a proper route for authentication.
var loginView = Backbone.View.extend({
  events : {'submit .login-form' : 'onLogin'},
  initialize : function() {
    this.model = new User();
    // here, we listen for the successful login event and we proxy it to the global
    // Backbone object in order to communicate with views that are out of scope.
    this.model.on('login:successful', function() { 
      Backbone.trigger('login:successful', this.model );
    });
  }
  onLogin : function() {
    var username = this.$('#username').val(),
        password = this.$('#password').val();
    this.model.authenticate({ 
      username : username, 
      password : password
    }); // this method should make a REST call and trigger an event on success
  }

在您的主干应用路由器内部:

initialize : function() {
  // Here, we register to the successful login event and simply store the state of
  // a user inside of the router.
  this.listenTo( Backbone, 'login:successful', function( user ) {
    this.user = user;
  }, this );
}

您现在可以在整个 session 期间使用此状态，并使用它在您的路由中进行分支。

// Still in the router
mainPage  : function() {
  if ( this.user ) {
    // show view for a registered user
  } else {
    // show a view for an unregistered user
  }
},
//...