Question

我的应用程序使用Mithril.js和Play Framework。

我想知道是否有一种（好的）方法可以将我的应用程序划分为秘银和游戏。我想播放一个login.html，这个login.html只包含我的mithril.js组件的导入（login.js）。如果登录成功，我想播放将我的应用程序重定向到另一个html页面。这个页面将包含我所有mithril组件的所有导入。

因此，我的应用程序在播放框架方面只有两个html页面，一个只导入一个秘银组件，另一个导入所有其他组件（仅在检查凭据时）。

播放路由器：

GET / controllers.Index.index
播放控制器：

def index =行动{ OK（views.html.login（）） }

的login.html

<!DOCTYPE html> 
<html lang="en">
<head>
    <title>IHM</title>
     StylesSheet import..
</head>
<body id="app" class="body">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.2-rc.1/mithril.min.js"></script> 
<script src="@routes.Assets.versioned("javascripts/claravista/login.js")" type="text/javascript"></script>

    <script type="text/javascript">
        m.route.mode = "pathname";

        m.route(document.getElementById('app'), "/", {

            "/": login,

        });


    </script>
</body>

秘银询问游戏检查凭据（在组件登录中）

m.request（{method：＆＃34; PUT＆＃34;，url：＆＃34; / check-user＆＃34;，data：login.user}）。then（returnCall）;
Case Credentials false：再次询问（我已经完成了这部分）

Case Credentials true：重定向到另一个html页面（如何执行此操作？）

<!DOCTYPE html>
<html lang="en">
<head>
   <title>IHM</title>
</head>
<body id="appmain" class="body">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.2-rc.1/mithril.min.js"></script>

    ALL MY MITHRIL COMPONENTS IMPORT

    <script type="text/javascript">
        m.route.mode = "pathname";

        m.route(document.getElementById('appmain'), "/main", {
            "/main": main,
    });

</script>

如何在检查凭据后重定向到另一个html页面？有没有更好的方法来阻止服务器在用户登录之前发送所有JavaScript文件？

Answer 1

如何在检查完凭据后重定向到另一个html页面？

秘银的路由除此之外，因为区分未经身份验证（登录表单）和身份验证（单页面应用程序）的实际路由逻辑由不同的服务器端处理并加载不同的HTML资源¹ 。因此，您在登录成功时真正需要做的就是使用原生window.location.replace API（您需要replace而不是assign，以避免登录页面停留在经过身份验证的用户的历史记录中）：

m.mount( document.getElementById( "appmain" ), {
  controller: function(){
    this.error    = m.prop()

    this.username = m.prop()
    this.password = m.prop()

    this.login = function(){
      return m.request( { 
        method : "PUT", 
        url    : "/check-user", 
        data   : {
          username : ctrl.username,
          password : ctrl.password
        } 
      } )
        .then( function( response ){
          // Based on my imagination of what the /check-user response might look like
          if( response.success ){
            // Navigate to the authenticated app page
            window.location.replace( "/main" )
          }
          // Return the reason the user couldn"t be authenticated
          else {
            return response.errorMessage
          }
        } )
        // Populate our model with results
        .then( ctrl.error );
    }
  },

  view : function( ctrl ){
    return [
      m( "h1", "Login" ),

      m( "form", {
        onsubmit : ctrl.login
      },
        // If there are login errors, display them here
        ctrl.error() && m( "p.error", ctrl.error() ),

        m( "input[placeholder=username]", {
          value   : ctrl.username(),
          oninput : m.withAttr( "value", ctrl.username )
        } ),

        m( "input[placeholder=password][type=password]", {
          value   : ctrl.password(),
          oninput : m.withAttr( "value", ctrl.password )
        } ),

        m( "button", "Submit" )
      )
    ]
  }
} )

是否有更好的方法可以阻止服务器在用户登录前发送所有JavaScript文件？

根据您的应用程序的结构要求以及您的后端和前端技术要求和功能，这是一个非常广泛的主题，复杂程度很高。为了进一步参考，将前端Javascript依赖关系分离到不同时间加载的不同文件的一般技术称为“代码分割”或“捆绑”²。

在Mithril真正处理未经身份验证的路由的应用程序中进行重定向。经过身份验证的网页see this answer。
理论上，由于Javascript模块，代码分割变得容易，并且捆绑在理论上是通过HTTP2进行的 - 但由于前者没有原生实现，后者还处于起步阶段，任何实用的通用解决方案目前，需要围绕满足您特定要求的库编写代码。 Read this for more details on ES6 modules + HTTP2。另请参阅SystemJS，尝试使ES6模块导入通常作为前端工作，但仍然涉及大量工具和自定义代码架构，适用于所有实际意图。

登录页面重定向新页面，如果成功

1 个答案: