홈>
angularjs와 angularjs ui-route를 사용하고 있습니다. 로그인 페이지를 만들고 있는데 사용자가 로그인하지 않고 내부 페이지로 이동하지 못하게하고 싶습니다. 비슷한 질문이 있지만 정보가 부족합니다. 또한 로그인에 성공하면 세션을 저장하고 싶습니다.
여기서는 나의 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');
}
});
}
}]);
Here is my loginservice.php
<?php
include '../connection/connect.php';
$formLogin = json_decode(file_get_contents("php://input"));
$data = array();
$check_UsernameLogin = false;
$username = $formLogin->username;
$password = $formLogin->password;
$login = mysqli_query($conn, "SELECT username FROM customer WHERE username='$username' AND customer_password='$password'");
$check_username = mysqli_num_rows($login);
if($check_username == 0) {
$check_UsernameLogin = true;
} else {
$check_UsernameLogin = false;
}
$data["UsernameLogin"] = $check_UsernameLogin;
$data["usernameSession"] = $login;
echo json_encode($data);
?>
내 login.html입니다
<!-- 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>
내 customerHomepage.html은
<!-- 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>
angularjs에서 .run () 및 $rootScope를 처음 사용합니다.
- 답변 # 1
- 답변 # 2
PHP로이를 수행하려면 사용자 자격 증명 (또는 로그인 상태)을
<올>$_SESSION
에 저장해야합니다. 파일을 제공 할 때마다 확인하십시오. 당신은 당신의 파일php
를 제공해야 호환성을위한 확장 프로그램.양식 제출시 자신을 호출하도록 index.php를 설정하십시오.
사용자 이름과 비밀번호로 호출하면 인증하고
$_SESSION['authenticated']
를 설정하십시오true
에 변수 정식 로그인의 경우지금이
$_SESSION
를 확인하십시오 템플릿을 제공 할 때마다<?PHP if ($_SESSION['authenticated'] == false) die('Permission denied'); ?>
그러나 작동하지만 jwt와 같은 방법을 통해이를 처리하는 새롭고 안전한 방법이 많이 있습니다.
관련 자료
- security - 성공적인 인증없이 UI5 앱 내부 페이지 표시 방지
- filesystems - btrfs는 저널링없이 데이터 손상을 어떻게 방지합니까?
- keycloak - 보안 취약성을 방지하기 위해 URL에서 세션 코드 제거
- php - 중복없이 세션 변수에 배열을 저장하는 다른 방법이 있습니까?
- swift - Objective-C없이 NSKeyedArchiver에서 예외가 발생하지 않도록 방지
- amazon web services - 특정 태그없이 역할이 EC2와 연결되는 것을 어떻게 방지합니까?
- java - 명령 창을 닫을 때 세션을 종료하지 않고 프로덕션 모드에서 grail 응용 프로그램을 시작하는 방법은 무엇입니까?
관련 질문
- angularjs : 객체의 속성이 Angular에 없는지 확인하는 방법은 무엇입니까?
- AngularJS 라우팅 문제 ui-router
- javascript : ui-router onEnter 후크가 여러 번 실행 됨
- javascript : 동적 경로 및 동적 종속성이있는 각도 모듈화
- html - 컨트롤러 만 처음 실행 탭을 클릭했습니다 - angularjs
- angular ui router - AngularJS에서 두 웹 페이지 사이에 필터링 된 객체 배열에 액세스하는 방법은 무엇입니까?
- angularjs - 중첩 된 상태에서 하위 상태로 리디렉션 할 수 없습니다
- angularjs - 제로 패딩 된 리드가있는 ui-sref가 잘립니다
- javascript - angularjs 라우팅 문제 (ui-router)
- angular ui router - Prerender가 angularjs가있는 IIS에서 토큰을 감지하지 못합니다
application.run ()에서 사용자가 로그인했는지 여부에 따라 상태 변경을 확인하고 상태 변경을 방지하거나 허용해야합니다. 예를 들면 다음과 같습니다.
여기서 세션은 서비스입니다. 세션 저장소에 액세스 토큰이 있는지 확인합니다. 찾을 수없는 경우 사용자가 내부 페이지로 이동하지 못하게합니다.
이제 로그인 페이지에서 로그인 API를 호출 한 후 응답 토큰 형태의 액세스 토큰을 세션 저장소에 저장하고 상태를 원하는 홈 페이지로 변경하십시오.
참고 : 액세스 토큰을 저장하기 위해 세션 저장소 대신 로컬 저장소를 사용하는 것이 좋습니다.