gpt4 book ai didi

javascript - 如果成功,登录页面重定向新页面

转载 作者:行者123 更新时间:2023-11-29 10:08:15 24 4
gpt4 key购买 nike

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

我想知道是否有一种(好的)方法可以将我的应用程序分为 mithril 和 play。我想让 play 呈现一个 login.html,这个 login.html 将只包含我的 mithril.js 组件 (login.js) 的导入。如果登录成功,我想将我的应用程序重定向到另一个 html 页面。此页面将包含我所有 Mithril 组件的所有进口。

所以我的应用程序在 Play Framework 端只有两个 html 页面,一个只导入一个 Mithril 组件,另一个导入所有其他组件(仅在检查凭据时)。

  1. Play 路由器:

    GET/controllers.Index.index

  2. Play Controller :

    def 索引 = Action { 好的(views.html.login())

  3. 登录.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.user }).then(returnCall);

  5. Case Credentials false : 再问一遍(这部分我已经做了)

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

最佳答案

How can I redirect to another html page after credentials are checked?

Mithril 的路由不是重点,因为区分未认证(登录表单)和认证(单页应用)的实际路由逻辑由不同的服务器端处理并加载不同的 HTML 资源1 .因此,登录成功后您真正需要做的就是使用 native 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" )
)
]
}
} )

Is there a better way to prevent the server to send all the JavaScript files before the user is logged?

这是一个非常广泛的主题,充满了复杂性,具体取决于您的应用程序的结构要求以及您的后端和前端技术要求和能力。为了进一步引用,将前端 Javascript 依赖项分离到不同文件以在不同时间加载的一般技术称为“代码拆分”或“捆绑”2


  1. 用于在 Mithril 真正处理未验证和已验证页面的路由的应用程序内重定向,see this answer .
  2. 由于 Javascript 模块,代码拆分在理论上变得容易,而捆绑在理论上是通过 HTTP2 程序化的——但由于前者还没有本地实现,而后者还处于起步阶段,任何实用的通用解决方案目前需要围绕满足您特定要求的库编写代码。 Read this for more details on ES6 modules + HTTP2 .另见 SystemJS ,尝试使 ES6 模块导入在前端一般工作,但仍然涉及大量工具和定制代码架构以实现所有实际目的。

关于javascript - 如果成功,登录页面重定向新页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38852460/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com