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:

Create the login page as a separate page, the rest of the app is another single page.
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 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.

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

回答1:

If you are building a single page app, it would be 'nicer' from the users point of view to have it all on one page, so I would suggest option 2.

Not sure if you need javascript to switch it though - you could use something like the following (PHP code)

At the start of the application saves what view the user is looking at and checks if the user pressed 'submit' on the login form

 $selected_menu = $_GET['menu'] ;

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

If the login is successful, redirect them back to the same page with the appropriate view as a parameter

Then in the main page of the app when you are about to display data you would check to see if the user is validated, and if not then present the login form as part of the page.

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

回答2:

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.

Routing:

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() });
        }
     })
});

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.

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);
 })

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.

来源：https://stackoverflow.com/questions/17356919/single-page-application-deep-linking-with-login-page

标签

single-page-application

deep-linking