Question

在单页面应用程序中，我们通常会请求一个网页（dashboard.html），然后我们从服务器获取它，然后我们在其上呈现一些仪表板数据（使用ajax）

我想仅在用户通过后台验证时使用才能显示dashboard.html（包含有效的电子邮件和密码），否则我想将其重定向到登录页面。

$.ajax({
    url: "dashbaard.json",
    dataType: "json"
}).done( function(data){
    // data = { inValid: true } - from backend
    if(data.inValid){
        alert("You are not authorized user, please register 1st!");
        location.href = "register.html";
    } else {
        // render data on dashboard page - valid user
    }
})

但这是一个问题，假设用户无效

用户请求了dashboard.html，虽然用户无效，但所有资产（css，js，images）都会被加载，在这种情况下我们无法加载单个css或js文件

预期结果：如果用户无效，用户请求dashboard.html他应立即重定向到登录/注册页面，而不必从服务器加载任何必要的内容。

我们如何使用单页面应用程序处理它（如果可能，不进行页面刷新）我需要最佳解决方案而不会出现页面闪烁，我正在使用Laravel 4来处理后端身份验证，这非常有效。

Answer 1

两种方式：

将dashboard.html更改为其他服务器语言，如php，asp.net等，并在服务器端处理身份验证。如果无效，则重定向到登录页面。
在页面就绪时请求身份验证，并在每个ajax请求上添加beforeSend设置。 $.ajaxSetup({beforeSend: function(){ // request authentication sync and redirect }});

如果采用No.2方法，最好将authorize方法添加到javascript文件中。

希望它有所帮助。

Answer 2

我的方法是使用弹出/模态登录框来处理这种情况如果ajax请求返回未经身份验证的用户，则显示登录框（facebox，bootstrap modal，any）
如果ajax请求返回经过身份验证的用户（以及数据），则呈现仪表板数据

在单页面应用程序（SPA）中处理身份验证的最佳方法

2 个答案: