javascript - 在单页应用程序(SPA)中处理身份验证的最佳方法

Question

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

我想仅当用户通过支持的身份验证(具有有效的电子邮件和密码)时才显示仪表板.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、图像)都会被加载，在这种情况下，我们没有必要加载单个css或js文件

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

我们如何使用单页面应用程序处理它(如果可能的话，不要页面刷新)我需要没有页面闪烁的最佳解决方案，我使用 Laravel 4 来处理后端身份验证，它的工作非常好。

Answer 1

两种方式:

1. 将dashboard.html更改为另一种服务器语言，例如php、asp.net等，并在服务器端处理身份验证。如果无效则重定向至登录页面。

2. 在页面准备好时请求身份验证，并在每个 ajax 请求上添加 beforeSend 设置。 $.ajaxSetup({beforeSend: function(){//请求身份验证同步和重定向 }});

如果你采用第二种方法，你最好将authorize方法添加到一个javascript文件中。

希望有帮助。