Angularjs-如何防止用户在未登录的情况下进入内部页面，以及如何在成功登录后存储会话

我正在使用angularjs和angularjs ui路由。我正在构建一个登录页面，我想防止任何用户在没有登录的情况下进入内部页面。我发现了一个类似的问题，但它缺乏信息。我还想在成功登录时存储会话

这是我的homeroute.js

    'use strict';

var application = angular.module('App', ['ui.router']);

    application.config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

        // For unmatched routes
        $urlRouterProvider.otherwise('/');

        // Application routes
        $stateProvider
            .state('login', {
                url: '/login',
                templateUrl: './views/login.html',
                controller: 'logincontroller'
            })
            .state('/', {
                url: '/',
                templateUrl: './views/home.html'
            })
             .state('customerHome', {
                url: '/customerHome',
                templateUrl: './views/customerHomepage.html'
            })
            .state('signup', {
                url: '/signup',
                templateUrl: './views/register.html',
                controller: 'registercontroller' 
            });
    }
]);

        application.run(function($rootScope, $location) {
        var customerHome = ['/customerHome'];
        $rootScope.$on('$routeLogin', function() {
            if(customerHome.indexOf($location.path()) != -1 && sessionStorage.getItem('userLogin')) {
                $location.path('/login');
            }
        });
    });

    application.controller('registercontroller', ['$scope', '$http', function($scope, $http) {
                $scope.formData = {};
                $scope.userform = "";
                $scope.register = function() {
                    $http({
                        method: 'POST',
                        url: './services/loginsubmit.php',
                        data: $scope.formData
                    }).then(function(response) {
                        console.log(response);
                        if(response.data.empty == true) {
                            $scope.userform = "Please fill the form.";
                        } else if(response.data.emailError == true) {
                            $scope.userform = "Invalid Email.";
                        } else if(response.data.validation == true) {
                            $scope.userform = "Username already exists.";   
                        } else if(response.data.validateUsername == true) {
                            $scope.userform = "Username must be more than 5 characters.";
                        } else if(response.data.validatePassword == true) {
                            $scope.userform = "Password must be more than 5 characters.";
                        } else if(response.data.registerSuccess == false) {
                            $scope.userform = "Registration Successful.";
                            $scope.formData = {};
                        } else if(response.data.registerSuccess == true) {
                            $scope.userform = "Registration Failed";
                        }
                    });
                }
            }]);

    application.controller('logincontroller', ['$scope', '$http', '$location', '$rootScope', function($scope, $http, $location, $rootScope) {
        $scope.loginData = {};
        $scope.loginUser = "";
        $scope.login = function() {
            $http({
                method: 'POST',
                url: './services/loginservice.php',
                data: $scope.loginData
            }).then(function(response) {
                console.log(response);
                if(response.data.UsernameLogin == true) {
                    $scope.loginUser = "Invalid username or password.";
                } else {
                    sessionStorage.setItem('userLogin', response.data.usernameSession); 
                    $location.path('/customerHome');        
                }
            });
        }
    }]);

这是我的loginservice.php

---

要使用PHP执行此操作，您需要将用户凭据（或登录状态）保存到
$\u SESSION
，并在每次提供文件时对其进行验证。您需要为文件提供
php
扩展名以实现兼容性

将index.php设置为在表单提交时调用自身

当使用用户名和密码调用时，对它们进行身份验证，并将
$\u SESSION['authenticated']
变量设置为
true
，以防真实登录

现在，每次为模板提供服务时，请检查此
$\u会话
变量

  <?PHP 
    if ($_SESSION['authenticated'] == false)
        die('Permission denied');
  ?>




但是，尽管它可以工作，但有许多新的更安全的方法可以通过应用程序.run（）中的方法来处理此问题，例如。
，您需要检查状态更改，并根据用户是否登录来防止或允许状态更改。例如：

        $rootScope.$on('$stateChangeStart', function (event, toState){

            if(toState.name === 'login'){
                return;
            }
            else if (!session.getAccessToken()) {    
                $state.go('login');
                event.preventDefault();                 
            }
            else{
                return;
            }

        });

这里的会话是一项服务。它检查会话存储中是否找到访问令牌。如果未找到，则阻止用户访问内部页面

现在，在从登录页面调用登录API之后，将响应中的访问令牌存储到会话存储中，并将状态更改为所需的主页

注意：您可能更喜欢使用本地存储而不是会话存储来存储访问令牌。
不要在前端使用会话存储，因为某些浏览器无法使用会话存储
    <!-- Navigation Bar -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#!/">Hostelry Service</a>
        </div>
        <ul class="nav navbar-nav">
          <li><a href="#!/">Home</a></li>
          <li><a href="#">Hostelries</a></li>
          <li><a href="#">Compare</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#!signup"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
          <li><a href="#!login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        </ul>
      </div>
    </nav>
<div class="row"  style="padding-top: 100px;">
  <div class="col-md-4 col-md-offset-4">
    <div class="panel panel-primary">
      <div class="panel-heading" style="padding-left: 190px;">Log in</div>
      <div class="panel-body">
        <form method="POST" ng-submit="login()">
          <input class="form-control" type="text" ng-model="loginData.username" placeholder="Username"><br>
          <input class="form-control" type="password" ng-model="loginData.password" placeholder="Password"><br>
          <button type="submit" class="btn btn-primary btn-block">Submit</button><br>
          <p class="alert alert-success" ng-show="loginUser">{{loginUser}}</p>
        </form>
      </div>
  </div>
</div>

  <?PHP 
    if ($_SESSION['authenticated'] == false)
        die('Permission denied');
  ?>

        $rootScope.$on('$stateChangeStart', function (event, toState){

            if(toState.name === 'login'){
                return;
            }
            else if (!session.getAccessToken()) {    
                $state.go('login');
                event.preventDefault();                 
            }
            else{
                return;
            }

        });