AngularJS-从网站注销不起作用

AngularJS- logout from website not working

本文关键字：不起作用 注销 网站 AngularJS-      更新时间：2023-09-26

我正在使用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);
          }
        });
    })();

在主控制器中，我检查令牌并调用执行用户身份验证的服务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 导航到旧页面。我该如何防止这种情况？

在呈现模板之前，您可以在路由上使用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'
    });
});

您需要在路由期间处理事情。如果用户未登录，并且请求的页面另有要求，则应重定向到其他页面，例如"未经授权.html"或类似内容。

我正在使用$routeProvider进行路由。我还没有尝试使用角度ui路由器，所以如果这不符合您的需求，请原谅我。

我在路由中添加了一个属性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
                }
            });
        }])
相关文章：