Question

我正在尝试使用angular js路由制作安全的Web应用程序，而且我不知道如何解决。

我有2个用户：

-ADMIN可以访问两个路由页面。 “ / main”和“ / adminPage”。

-USER只能访问'/ main'。

这是我用来登录应用程序的功能：

function adminLogin(userName,password){

        var deferred = $q.defer();

          $http.post("http://localhost//rest/config/getAdminUserXmlFileForLogin?adminUsername="+userName+"&adminPassword="+password).
        then(function( response) {

                 console.log("userName "+ userName+ "  response.data " + response.data );
               var result = response.data;

               if(result == "Failed"){
                   //raise error to admin modal and refresh page.
                   $rootScope.AdministratorLoginFailed = true;
                   $("#adminLoginError").html(response.data);

                   deferred.reject(response.data);
               }else{
                   $rootScope.AdministratorLoginFailed = false;

                   adminInfo = {
                           "role" : "admin",
                           "username" : response.data.username,
                           "password" : response.data.password
                   };

                   sessionStorage.setItem("adminInfo", JSON.stringify( adminInfo ));

                   $("#adminLogin").modal('hide');

                    $location.path('/adminPage');

                      deferred.resolve( adminInfo );
               }

          }, function(error) {

              $("#adminLoginError").html(error);
              $rootScope.adminLoggedIn = true;
              deferred.reject(error);
          });

          return deferred.promise;
    }

这是我登录USER的功能：

function userLogin (username, password){

            var url = 'http://localhost/rest/user/getUserlogin?username='+username+'&password='+password;
            var appXhttp = new XMLHttpRequest();
            appXhttp.onreadystatechange = function() {
                if (this.readyState == 4) {


                    if (this.status == 200){
                        $(".loader").fadeOut("slow");


                         userDetails = {'role':'user','username': username, 'password' : password};
                          sessionStorage.setItem('userDetails', JSON.stringify(userDetails));
                        $rootScope.loggedIn = true;


                          //Redirect to main page 
                    if(userDetails && this.responseText != "Failed"){
                     $rootScope.blueprints = JSON.parse(this.responseText);

                                 $location.path('/main');

                    }else{
                        $rootScope.oginFailed = true;
                        //$(".loader").css("display","none");
                        //$(".loader").fadeOut("fast");
                    }

                      console.log( "user " + username + " succesfully Logged into app");

                      }
                    else  //Login Failed
                    {


                        alert('Permission Denied \nCheck usernme or password , please try again later. ');
                        $rootScope.loginFailed = true;
                        $rootScope.GoogleLoginFailed = true;


                        //$(".loader").css("display","none");
                        $(".loader").fadeOut("fast");

                        }
                }
            };
            appXhttp.open("GET", url, true);

            appXhttp.send();

          }

这是我的路由：

angular.module("myApp").config(function($routeProvider) {

$routeProvider.when("/", { 
    templateUrl : "scripts/login/login.html",
    controller : "loginCtrl"
 }).when('/adminPage', {
    templateUrl : "scripts/administrator/admin.html",
    controller  : "myAppCtrl",
    data: {
        role:  "admin"
    }
}).when('/main', {
    templateUrl : "scripts/app/main.html",
    controller  : "myAppCtrl",
    data: {
        role:  "user"
    }
}).otherwise({
    redirectTo  : '/'
});});

这是控制器之后的$ rootScope：

app.run(function($rootScope, $location){$rootScope.$on('$routeChangeStart', function(e, to, MyService){

 if(to.data && to.data.role != "admin"  ||  MyService.getAdminInfo === false{
                 e.preventDefault();
                $location.path('/');
 }

});

}）;

我需要的是没有人可以使用带有'/'或'/ main'或'/ adminPage'的URL来访问应用程序。
仅当您登录且处于会话状态时，您才能访问这些页面。我现在所拥有的仅适用于管理页面，并且对于其他页面而言并不安全。

最诚挚的问候，

如何使用angular js保护Web应用程序路由

0 个答案: