Перенаправление на вход в систему, когда пользователь не вошел в систему, или пользователь пытается получить доступ к странице напрямую с URL-адреса, используя angularjs

1. Используйте угловые.js, angular-route.js, angular-cookies.js и app.js на индексной странице следующим образом:

     <script src="//code.angularjs.org/1.2.20/angular.js"></script> <script src="//code.angularjs.org/1.2.20/angular-route.js"></script> <script src="//code.angularjs.org/1.2.13/angular-cookies.js"></script> <script src="app.js"></script> 

2. В app.js

     var app = angular.module('app', ['ngRoute', 'ngCookies']); app.config(config); app.run(run); config.$inject = ['$httpProvider','$routeProvider', '$locationProvider']; function config($httpProvider, $routeProvider, $locationProvider) { //Set routing $routeProvider .when('/login', { controller: 'LoginController', templateUrl: 'login/login.view.html', controllerAs: 'vm' }) .otherwise({ redirectTo: '/login' }); } //Write following code to make user login after page refresh run.$inject = ['$rootScope', '$location', '$cookieStore']; function run($rootScope, $location, $cookieStore, $http, chatService) { // keep user logged in after page refresh $rootScope.globals = $cookieStore.get('globals') || {}; if ($rootScope.globals.currentUser) { // set token in request header // $http.defaults.headers.common['Authorization'] = $rootScope.globals.currentUser.authdata; } //On location change redirect user to login page if not login else redirect based on role $rootScope.$on('$locationChangeStart', function (event, next, current) { // redirect to login page if not logged in and trying to access a restricted page //allow login and register page for all(login/notlogin) user var restrictedPage = $.inArray($location.path(), ['/login', '/register']) === -1; var loggedIn = $rootScope.globals.currentUser; if (restrictedPage && !loggedIn) { $location.path('/login'); } else{ $scope.role=$rootScope.globals.currentUser.user.role; if(data.role == "admin"){ $window.location.href="AdminPage.html"; } else if(data.role == "Sales"){ $window.location.href="sales_form.html"; } else if(data.role == "Account"){ $window.location.href="account_form.html"; } else if(data.role == "Technical"){ $window.location.href="Technical_Form.html"; } else{ $scope.errorMsg="username or password is incorrect"; } } }); } 

   3. В login-Control напишите следующий код

        app.controller('LoginCtrl',function($scope,$http,$window){ $scope.login = function(){ data={ email:$scope.email, pwd:$scope.pwd } $http.post("widget/login.php",data).success(function(data){ if(!data.success){ $scope.errorMsg="username or password is incorrect"; } else{ //Set cookie $rootScope.globals = { currentUser: { user: data } $cookieStore.put('globals', $rootScope.globals); //Redirect url $window.location.href="/"; } }); 

вы должны использовать угловую маршрутизацию вместо $ window.location.href.

Позвольте мне показать вам, используя ui-router.Add эту строку в index.html после загрузки загруженной библиотеки.

 <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> 

В вашем приложении app.js

 var routerApp = angular.module('routerApp', ['ui.router']); routerApp.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/home'); $stateProvider // HOME STATES AND NESTED VIEWS ======================================== .state('login', { url: '/login', templateUrl: 'login.html', controller : 'LoginController' }) // SALES PAGE AND MULTIPLE NAMED VIEWS ================================= .state('sales', { url: '/sales', templateUrl: 'sales_form.html', controller : 'SalesController' ...... ...... }); }); 

Теперь в вашем контроллере

  app.controller('LoginCtrl',function($scope,$http,$window,$state){ $scope.login = function(){ data={ email:$scope.email, pwd:$scope.pwd } $http.post("widget/login.php",data).success(function(data){ console.log(data); if(!data.success){ $scope.errorMsg="username or password is incorrect"; $state.go('login'); } else{ $scope.role=data.role; $scope.id=data.id; if(data.role == "admin"){ $state.go('admin'); //add admin state as admin in ui-router like sales } else if(data.role == "Sales"){ $state.go('sales'); } ..... else{ $scope.errorMsg="username or password is incorrect"; $state.go('login'); } } }); } }); 

Вам нужно сохранить переменную роли в корнеплодах, чтобы каждый контроллер мог получить к ней доступ.

После успешного входа в систему сохраните переменную роли в rootScope

  $rootScope.role=data.role; 

Затем в каждом контроллере проверьте значение роли и перенаправьте идентификатор iser, роль не соответствует требуемой роли

  if($rootScope.role != "Sales"){ $window.location.href="login.html"; } 

Что вам нужно – это служба для обработки логина / выхода из системы, которая также сохраняется в loggedInState. Услуги – это надлежащий масштабируемый способ передачи данных вокруг углового приложения

 module.service('LoginService', LoginService); function LoginService() { var isLoggedIn = false; var service = { login: function() { //do login work loggedIn = true; }, logout: function() { //do logout work loggedOut = false; }, get isLoggedIn() { return isLoggedIn; } }; return service; } 

Вы можете использовать разрешение маршрута на пути продаж, чтобы попасть в LoginService и перенаправить на логин, если он не вошел в систему. Дополнительная информация здесь: https://johnpapa.net/route-resolve-and-controller-activate-in-angularjs/

Предполагая, что Angular работает на клиенте и знает, что PHP работает на сервере, я бы не рекомендовал делать эту задачу в Angular, если у вас нет веской причины. Это происходит не потому, что это невозможно, а потому, что (как правило) результат запуска кода на клиентской машине не следует доверять, в то время как результаты от кода, запускаемого на сервере (обычно), можно доверять.

В PHP

 session_start(); if($_SESSION(['loggedIn'])) { if($_SESSION(['role']) == 'sales') { //Do something } //Do something else } else { //Ask them to log in } 

Выполняя что-то в PHP (или, точнее, используя язык на стороне сервера), вы можете более точно настроить то, что хотите. Что делать, если кто-то отключает Javascript? Получат ли они доступ к привилегированной информации? Что, если кто-то злонамерен (нужен не сотрудник), может ли он передать состояние на клиентской машине, чтобы получить доступ?

У меня была такая же проблема, и я разрешил ее, представив некоторые документы.

У нас был backend как Java, с угловыми js.Я отправляю то же самое, что работает отлично. Это может вам помочь.

LogonController.js

 scope.loginMerchant = function(merchant){ MerchantRepository.loginMerchant(merchant) .then(function (response){ scope.emailId=response.data.emailId; MerchantRepository.setEmailId(scope.emailId); if(response.data.userType == "merchant"){ state.go("merchanthome"); } else { alert(" ID/Password is Invalid..."); state.go("merchantlogon"); } }); }; 

MerchantRepository.js

Вы можете сделать это в своем репозитории, чтобы во время входа в систему он установил emailId.And извлекается всякий раз, когда URL доступен

 this.setEmailId=function(emailId){ this.emailId=emailId; window.sessionStorage.setItem("emailId",emailId); } this.getEmailId=function(){ return window.sessionStorage.getItem("emailId"); } 

HomePageController.js

 scope.user=MerchantRepository.getEmailId(); if(scope.user== 'null' || scope.user== null){ state.go("logon"); }; 

Поэтому каждый раз, когда вы вводите URL-адрес страницы, контроллер загружает и проверяет данные для входа. Если нет перенаправлений на страницу входа.

редактировать

И если вы также хотите отключить проблему с кнопкой «Назад», добавьте это в код выше.

LogonController.js

 doMerchantLogout(); function doMerchantLogout() { MerchantRepository.doMerchantLogout().then( function(result) { scope.merchantSatus = result.data; scope.emailId= null;//so it set to null,this satisfies condition and redirects to login page MerchantRepository.setEmailId(scope.emailId); }); }; 

Надеюсь, это может помочь вам. Это рабочий фрагмент.

спасибо

На мой взгляд, самый простой способ достичь своей цели – создать ввод скрытого типа и передать значение вашей сессии: 1, если вы вошли в систему, и 0, если вы вышли из системы в качестве образца.

Затем создайте условие внутри Углового. Если значение модели равно = 0, то перенаправление на страницу входа, иначе перенаправление где-нибудь.

попробуйте использовать $ state.

  angular.module('app',[]) app.controller('LoginCtrl',function($scope,$state){ $scope.login = function(){ data={ email:$scope.email, pswd:$scope.pswd } $http.post("/login.php",data).success(function(data){ console.log(data); if(!data.success){ $scope.errorMsg="username or password is incorrect"; $state.go('app.login'); } else{ $scope.role=data.role; $scope.id=data.id; if(data.role == "admin"){ $state.go('app.admin'); //add admin state as admin in ui-router like sales } else if(data.role == "Sales"){ $state.go('app.sales'); } ... ... else{ $scope.errorMsg="username or password is incorrect"; $state.go('app.login'); } } }); } });