如果用戶還沒有登錄，重定向到登錄頁面Angular JS

Question

如何防止用戶輸入應用網址，如果他沒有登錄。

App.js：

var MTApp = angular.module('MTApp', ['MEControllers','ui.router','services']); 

    MTApp.config(function($stateProvider, $urlRouterProvider) { 
     $urlRouterProvider.otherwise('/'); 

     $stateProvider 
     .state('/', { 
       url: '/', 
       templateUrl: 'login.html'})    
      .state('login-app', { 
       url : '/Login', 
       templateUrl : 'login.html'}) 

      .state('input-parameters', { 
      url : '/Parameters', 
      templateUrl : 'parameters.html'}); 
    }) 

main.js: 

    var MEControllers = angular.module('MEControllers',[]); 
    MEControllers.controller('LoginAppCtrl', LoginAppCtrl); 
    MEControllers.controller('RequestCtrl', RequestCtrl); 

    function LoginAppCtrl($scope, $http,utilities,$location,$rootScope) {   
      var self = this; 

      self.request = { 
        user: '', 
        password:'' 
      } 
      self.postprocess = function(){ 
       //self.request.values = self.request.values.split(","); 
      } 
      self.submitRequest = function(){ 
       self.postprocess(); 
       console.log(self.request); 
       $http({ 
        method : 'POST', 
        url : url, 
        headers: {'Content-Type': 'application/json'}, 
        data : self.request 
       }).success(function(data, status, headers, config) { 

        if (data.status) { 
         // successfull login 
        // User.isLogged = true; 
        // User.username = data.user; 
        // $rootScope.loggedInUser = $scope.user; 
         $location.path("/Parameters"); 
        } 
        else { 
        // User.isLogged = false; 
         //User.username = ''; 
        } 

       }).error(function(data, status, headers, config) { 
        alert('Invalid Login Details'); 
       }); 

      } 

      this.validate = function(){ 
       console.log(self.request); 


      } 
     } 

     function RequestCtrl($scope, $http,utilities,$location) { 
      var self = this;    
      self.request = { 

      } 
      self.postprocess = function(){ 

      } 
      self.submitRequest = function(){ 
       self.postprocess(); 
       console.log(self.request); 
       $http({ 
        method : 'POST', 
        url : url, 
        headers: {'Content-Type': 'application/json'}, 
        data : self.request 
       }).success(function(data, status, headers, config) { 

        utilities.setOutput(data);      
        console.log(data); 


       }).error(function(data, status, headers, config) { 
        alert('Error!'); 
       }); 

      } 

      this.validate = function(){ 
       console.log(self.request); 


      } 
     } 

我怎樣才能得到indocation如果用戶登錄？ 此外我怎樣才能防止用戶通過網址輸入頁面，如何隱藏網址？

Answer 1

你可以做objectwith身份驗證信息的本地存儲和查詢，當用戶啓動這樣的程序：

if(window.localStorage.auth) { 
    $urlRouterProvider.otherwise('/tab/index'); 
}else{ 
    $urlRouterProvider.otherwise('/login'); 
} 

，並在你的主控制器是這樣的：

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ 
    event.preventDefault(); 
    if(window.localStorage.auth) { 
     $state.go(toState.name) 
    }else{ 
     $urlRouterProvider.otherwise('/login'); 
    } 

}) 

應該檢查時路線改變。

Answer 2

你可以在$ rootcope service的幫助下完成它。每個routeChange開始檢查用戶是否登錄（你可以創建服務來檢查），如果用戶登錄重定向到所需的頁面，否則重定向到登錄頁面。 這裏是必需的代碼

app.run(['$rootScope', '$location', 'Auth', function ($rootScope, $location, Auth) { 
     $rootScope.$on('$routeChangeStart', function (event) { 

      if (!Auth.isLoggedIn()) { 
       console.log('DENY'); 
       event.preventDefault(); 
       $location.path('/login'); 
      } 
      else { 
       console.log('ALLOW'); 
       $location.path('/home'); 
      } 
     }); 
    }]); 

    .factory('Auth', function(){ 
    var user; 

    return{ 
     setUser : function(aUser){ 
      user = aUser; 
     }, 
     isLoggedIn : function(){ 
      return(user)? user : false; 
     } 
     } 
    }) 

ps： - 對不起，英語不好。

Source