AngularJS - Determine if the view should be displayed by an ajax call result upon the route changes

Question

To put it simple, I would like to check out that if the session is still alive (which means user has logged in) before displaying the view of some routes, if not, then redirect to log-in view.

I have tried to listen to $routeChangeStart event from inside the log-in page, which is displayed initially by default, but user can still go to other views by typing in the routes.

Now what I am doing is:

(function() {
    'use strict';

    angular.module("appClubS", ["appClubS.userModule", "appClubS.productModule", "clubsServices", "ngRoute", "ui.bootstrap"])
        .config(routeConfigurator);

    angular.module("appClubS")
        .controller("checkLoginCtrl", checkLoginController);

    checkLoginController.$inject = ['$scope', '$rootScope', '$location', 'userFactory'];
    routeConfigurator.$inject = ['$routeProvider', '$locationProvider'];

    function routeConfigurator($routeProvider, $locationProvider) {
        $routeProvider.when("/home", {
            templateUrl: "views/index.html"
        });

        // ...

        $routeProvider.when("/account-profile/my-redeem", {
            templateUrl: "views/member_zone/my.redeem.html",
            controller: 'checkLoginCtrl'
        });

        $routeProvider.when("/account-profile/my-survey", {
            templateUrl: "views/member_zone/my.survey.html",
            controller: 'checkLoginCtrl'
        });

    }

    function checkLoginController($scope, $rootScope, $location, userFactory) {
        var loginStatus = userFactory.loggedin();

        if (!loginStatus) {
            alert('Please Login First!');
            $location.path('/login');
        }
    }

})();

But the view still gets displayed before user is navigated to log-in page.

Could anyone help? Thanks so much in advance.

score 1 · Accepted Answer · answered Oct 30 '14 at 10:10

1

You can use a resolve function

 $routeProvider.when("/home", {
            templateUrl: "views/index.html",
            resolve:{
              checkLogin: function (sessionService) {
              sessionService.redirectIfLogged();
              }
            }
        });

So this ensures your check is runned before the view is rendered

answered Oct 30 '14 at 10:10

itsme

47,321
93
214
341

Thanks so much, sbaaaang, I have read about this method in , however, I don't quite understand, the example in the book is like: `$routeProvider.otherwise({ templateUrl: "/tableView.html", controller: "tableCtrl", resolve: { data: function (productsResource) { return productsResource.query(); } } });` , and it was said the function should return a promise, the view won't be displayed until the promise is resolved. But in your code, the function assigned to checkLogin doesn't return anything. Honestly, I am confused now (I am a newbie to AngularJS). – VincentZHANG Oct 31 '14 at 02:18
@VincentZHANG sure , you just have to make return the promise , mine is only a starting point ;) – itsme Oct 31 '14 at 08:01
Thank you so much, finally, I worked it out in this way: `$routeProvider.when("/path/to/page", { templateUrl: "path/to/file.html", resolve: { loggedin: ["$q", "userFactory", "$location", function checkPermit($q, userFactory, $location) { var deferred = $q.defer(); var logStatus = userFactory.loggedin(); if (logStatus) { deferred.resolve({ message: "Proceed to change route." }); } else { deferred.reject({ message: "Redirect to the default page." }); alert("Please Login First!"); $location.path("/login"); } return deferred.promise; }] } });` – VincentZHANG Nov 06 '14 at 06:47
btw, as you see, the code I applied here contains a little logic, and now I have to repeat it for all the routes that I want to protect from non-registered visitor accessing. Do I have a choice to centralize that piece of code? Thank you again. – VincentZHANG Nov 06 '14 at 06:51
@VincentZHANG you're welcome sometimes the angular doc is not so exhaustive, but glad that you fixed! – itsme Nov 06 '14 at 07:50

AngularJS - Determine if the view should be displayed by an ajax call result upon the route changes

1 Answers1

Linked