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

Login page redirect new page if sucess

本文关键字：如果 成功 新页面 重定向 登录      更新时间：2023-09-26

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

我想知道是否有一种(好的)方法来划分我的应用程序之间的mithril和play。我想有一个login.html，这个login.html将只包含我的mithril.js组件(login.js)的导入。如果登录成功，我想玩重定向我的应用程序到另一个html页面。这一页将包含所有我的秘银成分的导入。

所以我的应用程序在play框架一侧只有两个html页面，一个只导入一个mithril组件，另一个导入所有其他组件(只有在检查凭据时)。

  1. Play router:

    GET/controllers.Index.index

  2. 播放控制器:

    def index = Action {Ok (views.html.login ())}

  3. 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>

  4. Mithril询问play检查凭据(在组件登录中)

    m。request({method: "PUT"， url: "/check-user"， data: login。用户})(returnCall);

  5. Case Credentials false: ask again (I already done this part)

  6. 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文件?

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

Mithril的路由不是这里的重点，因为区分未认证(登录表单)和认证(单页面应用程序)的实际路由逻辑是由不同的服务器端处理的，并加载不同的HTML资源1。所以你真正需要做的就是使用本地的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依赖项分离到不同文件中以便在不同时间加载的一般技术称为"代码分割"或"捆绑"2。

  1. 用于在应用程序中重定向，其中Mithril实际上正在处理未经身份验证的路由&
  2. 代码分割在理论上很容易，这要感谢Javascript模块，而通过HTTP2进行的捆绑在理论上是过程化的——但是由于目前还没有对前者的本机实现，而后者还处于起步阶段，因此目前任何实用的通用解决方案都需要围绕满足您特定需求的库编写代码。阅读这篇文章了解更多关于ES6模块+ HTTP2的细节。另请参见SystemJS，它尝试让ES6模块导入在前端通用地工作，但仍然涉及许多工具和自定义代码架构，以满足所有实际目的。
相关文章：