单页应用程序与登录页面深度链接 [英] single page application deep linking with login page

问题描述

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

My team is going to build a single-page-application for our future project. At the moment, I have a problem with designing the app with login page. There are 2 approaches:

1. 将登录页面创建为单独的页面，其余的应用程序是另一个页面。


2. 该应用只有1页，登录页面将是使用javascript来回切换的应用中的视图。

我不知道应该采取哪种方式。我已经在互联网上阅读了一些讨论，似乎更加流行的创建登录页面作为单独的页面，原因是我们可以使用正常的基于cookie的身份验证与服务器上的会话，将用户重定向到默认页面页面）成功登录后，等等。因此，我正在考虑将登录页面创建为单独的页面，但是我有深层链接的问题。例如，假设我有两个页面： login.html ，索引。

I don't know which approach I should take. I have read some discussions on the internet, it seems like it's more popular to create the login page as a separate page, the reason for this is we can use normal cookie-based authentication with session on server, redirect users to default page (main page) after successful login, and so on. Therefore, I'm thinking about creating the login page as a separate page, but I have a problem with deep linking.

html （主页）。当未经身份验证的用户请求此页面 index.html＃product = 1 时，用户将被重定向到 login.html 成功登录后，将用户重定向到 index.html＃product = 1 。但是在这一点上，＃product = 1 将丢失。

For example, let's say I have 2 pages: login.html, index.html (main page). When an unauthenticated user requests a page like this index.html#product=1, the user will be redirected to the login.html, after successfully loging in, redirect the user back to index.html#product=1. But at this point, the #product=1 is lost.

请告知我如何保持深度链接还是应该采取第二种方法？
谢谢

Please advice me on how to keep the deep link or should I take the second approach? Thank you

推荐答案

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

I decided to go with approach 2: The app has only 1 page and the login page will be a view in the app which is switched back and forth using javascript.. I found out that it's not difficult to do and I can still use normal cookie-based authentication with session on server, redirect users to default page (main page) after successful login, and so on. Here is a sample code how I do it with 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转换到登录状态。

The point here is when there is a route change error with status 401 (from the server) indicating that the user is not logged in, I will transition to login state with the return url.

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

After the user successfully logging in using ajax, I will transition the state back to my main view. Something like this:

$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。

With this approach, now I'm able to create deep-link to jump to a specific state in my app with login page and return url.

这篇关于单页应用程序与登录页面深度链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！