AngularJS部分视图安全性

时间:2014-09-23 20:34:03

标签: angularjs angularjs-routing angularjs-factory

我正在尝试保护部分视图,因此用户无法在没有登录但是遇到麻烦的情况下切换视图。代码如下:

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

我只需要保护视图并确保用户无法在没有登录的情况下(切换)访问视图。

1 个答案:

答案 0 :(得分:2)

首先创建一个可以确定每个路径的访问级别的常量,例如

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

然后将它们添加到路径定义

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

之后在运行功能检查$rootScope.$on('$locationChangeStart'事件中,您可以通过var location = $location.path(); var route = $route.routes[location];访问路径,然后通过route.access_level;

访问用户角色