单页面应用程序与登录页面的深层链接

Question

我的团队将为我们未来的项目构建一个单页面应用程序。目前，我在使用登录页面设计应用程序时遇到问题。有两种方法：

1. 将登录页面创建为单独的页面，应用程序的其余部分是另一个页面。
2. 该应用只有1页，登录页面将是应用程序中的视图，使用javascript来回切换。

我不知道应采取哪种方法。我已经在互联网上阅读了一些讨论，似乎将登录页面创建为单独的页面更受欢迎，原因是我们可以使用基于cookie的常规身份验证与服务器上的会话，将用户重定向到默认页面（主页面）成功登录后，依此类推。因此，我正在考虑将登录页面创建为单独的页面，但我遇到深度链接问题。

例如，假设我有2页：login.html，index.html（主页）。当未经身份验证的用户请求类似此index.html#product=1的页面时，用户将被重定向到login.html，在成功登录后，将用户重定向回index.html#product=1。但在这一点上，#product=1丢失了。

请告诉我如何保持深层链接或者我应该采取第二种方法？谢谢

Answer 1

如果您正在构建一个单页应用程序，从用户的角度来看，将它全部放在一个页面上就会“更好”，所以我建议选项2。

不确定你是否需要javascript来切换它 - 你可以使用类似下面的内容（PHP代码）

在应用程序开始时保存用户正在查看的视图，并检查用户是否在登录表单上按下“提交”

 $selected_menu = $_GET['menu'] ;

 //check to see if they've submitted the login form  
 if(isset($_POST['submit-login'])) {  

如果登录成功，则将它们重定向回相同的页面，并将相应的视图作为参数

然后在应用程序的主页面中，当您要显示数据时，您将检查用户是否已经过验证，如果没有，则将登录表单作为页面的一部分提供。

 $usr = CheckLogon(); 
 if ( $usr == "" ) {  // check for correct test to make sure user is logged on
     ShowLoginForm(); 
     ....

Answer 2

我决定采用方法2：该应用程序只有1页，登录页面将是应用程序中的一个视图，使用javascript来回切换..我发现它并不难做，我仍然可以使用正常基于cookie的身份验证与服务器上的会话，成功登录后将用户重定向到默认页面（主页面），依此类推。这是一个示例代码，我如何使用angularjs。

路由：

var App = angular.module('App', ["ui.state"]);

App.config(function ($stateProvider, $routeProvider) {
   $stateProvider.
   .state('login', {
        url: "/login?returnUrl",
        templateUrl: '/Home/Login',
        controller:"LoginController"
    })
    .state('main', {
        url: "/main",
        abstract:true,
        templateUrl: '/Home/Main',
        controller: "MainController"
     })
})
.run(function ($rootScope, $state, $stateParams, $location) {
     $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){ 
        if (error.status == 401) {
            $state.transitionTo("login", { returnUrl: $location.url() });
        }
     })
});

这里的要点是当状态401（来自服务器）存在路由更改错误，指示用户未登录时，我将使用返回URL转换到登录状态。

用户使用ajax成功登录后，我将状态转换回主视图。像这样的东西：

$http.post("/Login", JSON.stringify({UserName:username,Password:password}))
     .success(function (data, status, headers, config) {
        var returnUrl = $stateParams.returnUrl ? $stateParams.returnUrl : "mydefaulturl";
        $location.url(returnUrl);
 })

通过这种方法，现在我可以使用登录页面和返回URL创建深层链接以跳转到我的应用程序中的特定状态。