3

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

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

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

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

请就如何保持深层链接提供建议，或者我应该采用第二种方法吗？谢谢

4

2 回答 2

0

如果您正在构建一个单页应用程序，从用户的角度来看，将所有内容都放在一个页面上会“更好”，所以我建议选项 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(); 
     ....
于 2013-06-28T09:06:27.587 回答
0

我决定采用方法 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。

于 2013-07-08T02:39:46.317 回答