로그인을 할 때 로그인을 한 후 화면의 주소를 강제로 입력을 할 경우 로그인 성공 페이지로 자동으로 이동이 된다.
resolve를 이용하면 로그인을 하지 않고, 로그인 완료 페이지로 강제로 이동할 수 없게 한다.
resolve : 라우팅을 시도할 때 캐쉬에 인증 정보가 있는지 검사를 하고 인증 정보가 있을 경우 실행을 하게 된다.
$scope, $rootScope
$scope는 지역변수, $rootScope 는 전역변수쯤으로 생각하면 될 듯??
계층 구조가 $rootScope < $scope로 되어있음
controller.js
var app = angular.module('mainApp', ['ngRoute']); app.config(function($routeProvider){ $routeProvider.when('/', { templateUrl : 'login.html' }).when('/dashboard', { //인증이 성공됐을 경우 실행 resolve:{ "check" : function($location, $rootScope){ if(!$rootScope.loggedIn){ $location.path('/'); } } }, templateUrl : 'dashboard.html' }).otherwise({ redirectTo : '/' }); }); app.controller('loginCtrl', function($scope, $location, $rootScope){ $scope.submit = function(){ if($scope.username == 'admin' && $scope.password == 'admin'){ //$rootScope를 사용하면 전역변수로 사용할 수 있다 //$scope는 지역변수? $rootScope.loggedIn = true; console.log("loggedin : " + $rootScope.loggedIn); $location.path('/dashboard'); } else { alert('login Failur'); } }; });
login.html
<div ng-controller="loginCtrl"> <form action="/" id="myLogin"> Username : <input type="text" ng-model="username" id="username"><br /> UserPassword : <input type="text" ng-model="password" id="password"><br /> <button type="button" ng-click="submit()">로그인</button> </form> </div>
index.html
<!DOCTYPE html> <html lang="en" ng-app="mainApp"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script type="text/javascript" src="js/angular-route.min.js"></script> <script type="text/javascript" src="js/controller.js"></script> </head> <body> <div ng-view></div> </body> </html>
결과화면
'JavaScript > jQuery&Ajax' 카테고리의 다른 글
| 아이디 중복체크&비밀번호체크 (0) | 2018.05.28 |
|---|---|
| Ajax로 새로고침 없이 글쓰기, 검색하기 (0) | 2018.05.26 |
