Javascript AngularJS-从网站注销不起作用

Javascript AngularJS-从网站注销不起作用,javascript,angularjs,session,Javascript,Angularjs,Session,我正在使用angularJS和PHP开发一个网站。如果凭据有效,用户可以登录,如果有效,PHP将设置会话并返回我存储在localStorage中的令牌 我创建了一个服务来检查令牌的真实性。我还有一个注销控制器。但我的注销功能无法正常工作。我删除了本地存储令牌并销毁了会话,我被导航到了索引页面,但我仍然可以查看我更改URL的其他页面 这是我的登录控制器 (function() { angular .module('myApp.login', []) .controller('L

我正在使用angularJS和PHP开发一个网站。如果凭据有效,用户可以登录,如果有效,PHP将设置会话并返回我存储在localStorage中的令牌

我创建了一个服务来检查令牌的真实性。我还有一个注销控制器。但我的注销功能无法正常工作。我删除了本地存储令牌并销毁了会话,我被导航到了索引页面,但我仍然可以查看我更改URL的其他页面

这是我的登录控制器

(function() {

  angular
    .module('myApp.login', [])

  .controller('LoginController', function($scope, $http, $location) {
    var vm = this;

    $scope.post = {};
    $scope.post.login = [];
    $scope.vm = {};
    $scope.index = '';

    var baseUrl = 'api/';

    // function to submit the form after all validation has occurred            
    vm.login = function(isValid) {
      // check to make sure the form is completely valid
      if (isValid) {
        $http({
            method: 'post',
            url: baseUrl + 'login',
            data: $.param($scope.vm),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          })
          .success(function(data, status, headers, config) {
            if (data.success) {
              if (localStorage['token']) {
                localStorage.removeItem('token');
              }
              localStorage.setItem("token", JSON.stringify(data.login_token));

              $location.path('/home');
            } else {

              if (localStorage['token']) {
                localStorage.removeItem('token');
              }

              vm.errorMessage = data.msg;
            }
          }).
        error(function(data, status, headers, config) {
          if (localStorage['token']) {
            localStorage.removeItem('token');
          }
          vm.errorMessage = data.msg;
        });
      }
    };


  });

})();
登录成功后,设置令牌。您可以在上面看到,然后我将用户重定向到主控制器,如下所示:

-(function() {

    angular
      .module('myApp.home', [])

    .factory('myHomeService', function($http) {
      var baseUrl = 'api/';
      return {
        getUserSessInfo: function() {
          return $http.get(baseUrl + 'get_user_session');
        }
      };
    })

    .controller('HomeController', function($scope, $routeParams, myHomeService, AuthService) {
        var vm = this;
        var token;
        if (localStorage['token']) {
          token = JSON.parse(localStorage['token']);
        } else {
          token = "";
        }

        if (token) {
          AuthService.checkToken(token);

          //To get user session value
          myHomeService.getUserSessInfo().success(function(data) {
            vm.id = data.id;
            //vm.userName   = data.username;
          });

          $scope.logout = function() {
            var data = {
              token: token
            }
            AuthService.logOut(token);
          }

        });
    })();
在home controller中,我检查令牌并调用执行用户身份验证的服务
AuthService

这里是AuthService。它有两个功能。一个用于检查令牌,另一个用于注销

(function() {

angular
.module('myApp.AuthenticationService', [])

.factory('AuthService', ["$http", "$location", function($http, $location){
    var vm = this;
    var baseUrl = 'api/';
    vm.checkToken = function(token)
    {        
        var data = {token: token};

        $http.post(baseUrl + 'validateUserToken', data).success(function(response)
        {
            if (response.msg === "unauthorized")
            {
                //console.log("Logged out");
                $location.path('/login');
            } 
            else 
            {
                //console.log("Logged In");
                return response.msg;
            }
        }).error(function(error)
        {
            $location.path('/login');
        })

    }

    vm.logOut = function(token)
    {        
        var data = {token: token};

        $http.post(baseUrl + 'destroyUserToken', data).success(function(response)
        {
            if (response.msg === "Logged out")
            {
                 localStorage.clear();
                //console.log("Logged out");
                $location.path('/login');
            } 
        }).error(function(error)
        {
                localStorage.clear();
            $location.path('/login');
        })

    }
   return vm;
}]);

})();
当用户单击注销链接时,将调用注销控制器。这是:

(function() {

  angular
    .module('myApp.logout', [])

  .controller('LogoutController', function($scope, $routeParams, AuthService) {
    var vm = this;

    //If user is not logged in
    var token;
    if (localStorage['entrp_token']) {
      token = JSON.parse(localStorage['entrp_token']);
    } else {
      token = "something stupid";
    }
    AuthService.logOut(token);

  });
})();

但即使完成了所有这些操作,用户也可以通过更改url导航到较旧的页面。如何防止这种情况发生?

您需要在路由过程中处理问题。当用户未登录并且请求的页面需要其他页面时,您应该重定向到其他页面,如“Unauthorized.html”或类似页面

我正在使用
$routeProvider
进行路由。我还没有尝试过使用AngularUI路由器,所以如果这不适合您的需要,请原谅我

我在路由上添加了属性
loginRequired
,以及
requiredRoles
,以确定当前用户是否有权访问特定页面

我使用
$routeChangeStart
检查页面条件是否满足,例如当前用户是否已登录并有权访问页面。未能满足条件,我导航到另一个页面

从我的旧项目中提取的代码:

.config(["$locationProvider", "$routeProvider", "$httpProvider", "KeepaliveProvider", "IdleProvider",
            function ($locationProvider, $routeProvider, $httpProvider, KeepaliveProvider, IdleProvider) {

            var templateLocation = "/Templates";

            $locationProvider.html5Mode({
                enabled: true,
                requireBase: true,
                rewriteLinks: true
            }).hashPrefix("#");

            $routeProvider
                .when("/", {
                    templateUrl: templateLocation + "/Home.html", //"/Product-List.html", // 
                    controller: "HomeController", //"ProductController", // 
                    loginRequired: false,
                    requiredRoles: []
                })
                .when("/Report", {
                    templateUrl: templateLocation + "/Report.html",
                    controller: "ReportController",
                    loginRequired: true,
                    requiredRoles: ["Admin"]
                })
                .when("/About", {
                    templateUrl: templateLocation + "/About.html",
                    controller: "AboutController",
                    loginRequired: false,
                    requiredRoles: []
                })
                .when("/Contact", {
                    templateUrl: templateLocation + "/Contact.html",
                    controller: "ContactController",
                    loginRequired: false,
                    requiredRoles: []
                })
                .when("/Register", {
                    templateUrl: templateLocation + "/Register.html",
                    controller: "RegisterController",
                    loginRequired: false,
                    requiredRoles: []
                })
                .when("/Login", {
                    templateUrl: templateLocation + "/Login.html",
                    controller: "LoginController",
                    loginRequired: false,
                    requiredRoles: []
                })
                .when("/User-List", {
                    templateUrl: templateLocation + "/User-List.html",
                    controller: "UserController",
                    loginRequired: true,
                    requiredRoles: ["Admin", "Secretary"]
                })
                .when("/User-Profile/:userId", {
                    templateUrl: templateLocation + "/User-Profile.html",
                    controller: "UserController",
                    loginRequired: true,
                    requiredRoles: []
                })
                .when("/TermsAndCondition", {
                    templateUrl: templateLocation + "/Terms-And-Condition.html",
                    controller: "SupportController",
                    loginRequired: false,
                    requiredRoles: []
                })
                .when("/EmailConfirmed", {
                    templateUrl: templateLocation + "/EmailConfirmed.html",
                    controller: "SupportController",
                    loginRequired: false,
                    requiredRoles: []
                })
                .when("/ResetPassword", {
                    templateUrl: templateLocation + "/ResetPassword.html",
                    controller: "SupportController",
                    loginRequired: false,
                    requiredRoles: []
                })
                .when("/ForgotPassword", {
                    templateUrl: templateLocation + "/ForgotPassword.html",
                    controller: "SupportController",
                    loginRequired: false,
                    requiredRoles: []
                })
                .when("/Unauthorized", {
                    templateUrl: templateLocation + "/Unauthorized.html",
                    controller: "UnauthorizedController",
                    loginRequired: false,
                    requiredRoles: []
                })
                .when("/ErrorHandler", {
                    templateUrl: templateLocation + "/ErrorHandler.html",
                    controller: "ErrorController",
                    loginRequired: false,
                    requiredRoles: []
                })
                .otherwise({
                    templateUrl: templateLocation + "/Error404.html",
                    controller: "ErrorController",
                    loginRequired: false,
                    requiredRoles: []
                });

        }])             
 .run(["$q", "$rootScope", "$location", "AccountService", "Idle", function ($q, $rootScope, $location, AccountService, Idle) {

            Idle.watch();
            var templateLocation = "/Templates";
            var postLogInRoute;

            $rootScope.$on("$routeChangeStart", function (event, nextRoute, currentRoute) {
                if (AccountService.isLoggedIn() &&
                    (nextRoute.templateUrl == templateLocation + "/Register.html" ||
                    nextRoute.templateUrl == templateLocation + "/Login.html")) {
                    $location.path("/Unauthorized").replace();
                    postLogInRoute = $location.path();
                }
                else if (nextRoute.loginRequired && !AccountService.isLoggedIn()) {
                    $location.path("/Login").replace();
                    postLogInRoute = $location.path();
                }
                else if (nextRoute.templateUrl.length != templateLocation + "/Unauthorized.html" && !AccountService.isUserAuthorized(nextRoute.requiredRoles)) {
                    $location.path("/Unauthorized").replace();
                    postLogInRoute = $location.path();
                }
                //else if (postLogInRoute && AccountService.isLoggedIn()) {
                //    $location.path(postLogInRoute).replace();
                //    postLogInRoute = null;
                //}
                else {
                    // Do nothing
                }
            });

        }])

在呈现模板之前,您可以在路由上使用
resolve
,以确定用户是否已登录

检查此项以了解如何操作

var onlyLoggedIn = function ($location,$q,Auth) {
    var deferred = $q.defer();
    if (Auth.isLogin()) {
        deferred.resolve();
    } else {
        deferred.reject();
        $location.url('/login');
    }
    return deferred.promise;
};


angular.module('YourModule')
.factory('Auth', function() {
var isLogin = function() {
console.log(localStorage.isLogged)
return localStorage.isLogged === "true";
}
return {isLogin: isLogin}
})

.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController',
        resolve: {loggedIn: onlyLoggedIn}
    }).
    otherwise({
        redirectTo: '/home'
    });
});

当用户通过更改url导航到旧页面时,服务器是否会使用新数据进行响应?是。。不使用会话参数的函数返回结果,使用会话参数的函数返回错误@如果用户未登录并试图查看较旧的页面,您希望将用户重定向回登录页面,对吗?是的……没错。我不希望他们在注销后访问页面。我有很多控制器,比如家庭控制器,这些也需要在那里检查@ARIFY您可以在
路线上使用
解析
。如果你能提供一把小提琴,我可以试着帮忙好的,我会试试这个@阿里夫