AngularJS Partial Views Security

Question

I'm trying to secure the partial views so user cannot't switch views without a login but having trouble. The code is below:

       var loginApp = angular.module('loginApp', [
            'ngCookies',
            'ngResource',
            'ngSanitize',
            'ngRoute'
        ])

    //
    //
    //
    //   -------------- Cannot get this to work ------------
    //
    //
    //
    //    loginApp.factory('authInterceptor', function ($q, $location) {
    //        debugger;
    //        return {
    //            request: function (config) {
    //                config.headers = config.headers | {};
    //                if (localStorage.auth_token) {
    //                    config.headers.token = localStorage.auth_token;
    //                }
    //                return config;
    //            },
    //            responseError: function (response) {
    //
    //                if (response.status === 401 || response.status === 500) {
    //                    $location.path('/');
    //                }
    //                return $q.reject(response);
    //            }
    //        }
    //    })
    //
    //    loginApp.config(function ($httpProvider) {
    //        $httpProvider.interceptors.push('authInterceptor');
    //    })


        loginApp.config(function ($routeProvider) {
            $routeProvider
                .when('/', {
                    templateUrl: 'views/login.html',
                    controller: 'loginController'
                })

                .when('/expertView', {
                    templateUrl: 'views/b.html',
                    controller: 'bViewController'
                })

        });


        loginApp.controller('bViewController', function ($scope) {
                  //$scope.message = 'Everyone come and see how good I look!';
        });



        var loginController = function ($scope, $http, $location) {
            $scope.user = {};
            $scope.user.username = "name";
            $scope.user.userID = "123456";
            $scope.user.password = "444444444";
            $scope.user.ui = "true";

            $scope.user.submitForm = function (item, event) {
                var data = {
                    userID: $scope.user.userID,
                    password: $scope.user.password,
                    ui: $scope.user.ui
                };

                $http({
                    url: '/api/v1/auth/login',
                    method: "POST",
                    dataType: "json",
                    data: data,
                    headers: {
                        'Accept': 'application/json, text/javascript',
                        'Content-Type': 'application/json; charset=utf-8'
                    }

                }).success(function (data, status, headers, config) {
                    console.log("Success!");
                }).error(function (data, status, headers, config) {
                    console.log("Submitting to Server failed!");
                });
            }
        }

I just need to secure the views and make sure user cannot (switch) access views without login.

Answer 1

First create a constant that can determine the access level for each route for example

 angular.module("App")
.constant('USER_ROLES', {
  logedIn : 'true'
});

then add them to the definition of the route as

.when('/write',{
    templateUrl:'templates/write.html',
    access_level:USER_ROLES.logedIn
})

After that in the run function check $rootScope.$on('$locationChangeStart' event and inside it you can access the route by var location = $location.path(); var route = $route.routes[location];and then access the user role by route.access_level;