2016-10-14 193 views
4

如果用戶沒有找到,那麼每個$ routeChangeStart都存在問題,如果我只是輸入url,它仍然會引導我訪問頁面。角度驗證

現在我已經重寫了服務器上的規則。

Options +FollowSymlinks 
RewriteEngine On 
# Don't rewrite files or directories 
RewriteCond %{REQUEST_FILENAME} -f [OR] 
RewriteCond %{REQUEST_FILENAME} -d 
RewriteRule^- [L] 

RewriteRule (.*) /index.html [L] 

這裏是app.js

var app = angular.module('myApp', ['ngRoute']); 
app.config(function($httpProvider){ 


    // attach our Auth interceptor to the http requests 
    $httpProvider.interceptors.push('AuthInterceptor'); 


}); 


app.run(['$rootScope','$scope','Auth', '$location', function($rootScope, $scope, Auth, $location){ 
    $rootScope.$on('$routeChangeStart', function(event){ 
     $scope.loggedIn = Auth.isLoggedIn(); 
     console.log(Auth.isLoggedIn()); 

     Auth.getUser().then(function(response){ 
      console.log(response); 
      $scope.user = response; 
     }).catch(function(error){ 
      console.log(error); 
     }); 

    }); 
}]); 

這裏是我的角度權威性工廠

app.factory('AuthToken', function($window){ 

    var authTokenFactory = {}; 

    authTokenFactory.setToken = function(token){ 
     if(token){ 
      $window.localStorage.setItem('token', token); 
     }else{ 
      $window.localStorage.removeItem('token'); 
     } 
    }; 

    authTokenFactory.getToken = function(){ 
     return $window.localStorage.getItem('token'); 
    } 

    return authTokenFactory; 
}); 


app.factory('Auth', function($http, $q, AuthToken, Passingtoken){ 

    var authFactory = {}; 

    authFactory.login = function(email, password){ 
     var data = { 
      email: email, 
      password: password 
     }; 

     return $http.post('/loginForm.php', JSON.stringify(data)).then(function(response){ 
      // console.log(response); 
      AuthToken.setToken(response.data); 
      return response; 
     }).catch(function(e){ 
      console.log(e); 
      return $q.reject(e.data); 
     }); 
    }; 


    authFactory.logout = function(){ 
     AuthToken.setToken(); 
    }; 

    authFactory.isLoggedIn = function(){ 
     if(AuthToken.getToken()){ 
      return true; 
     }else{ 
      return false; 
     } 
    }; 

    authFactory.getUser = function(){ 
     var defer = $q.defer(); 
     if(AuthToken.getToken()){ 
      var userdata = JSON.parse(Passingtoken.getUserData()); 
      userdata = userdata[0].data; 
      console.log(userdata); 

      /** 
      * get the token. Might make this a service that just gets me this token when needed. 
      */ 
      $http.post('/decode.php', { 
       userdata 
      }).then(function(response){ 
       console.log(response.data.rows[0]); 
       //$scope.username = response.data.rows[0].fullname; 
       defer.resolve(response.data.rows[0]); 
      }, function(e){ 
       console.log(e); 
      }); 
     }else{ 
      return $q.reject({ 
       message: 'User not found' 
      }); 
     } 
     return defer.promise; 
    }; 


    return authFactory; 
}); 


app.factory('AuthInterceptor', function($q, $location, AuthToken){ 

    var interceptorFactory = {}; 

    interceptorFactory.request = function(config){ 
     // grab a token 
     var token = AuthToken.getToken(); 
     // if token is there added to header 
     if(token){ 
      config.headers['x-access-token'] = token; 
     } 

     return config; 
    }; 

    interceptorFactory.responseError = function (response) { 

     if (response.status == 403){ 
      AuthToken.setToken(); 
      $location.path('/login'); 
     } 
     return $q.reject(response); 

    }; 


    return interceptorFactory; 
}); 

這裏是maincontroller我在哪裏檢查路由變化

app.controller('mainCtrl', ['$scope', 'Passingtoken', '$http','$window', 'Auth', '$location', '$rootScope', function($scope, Passingtoken, $http, $window, Auth, $location, $rootScope){ 

    // check for loggin in 
    $scope.loggedIn = Auth.isLoggedIn(); 

    // rootscope 
    $rootScope.$on('$routeChangeStart', function(event){ 
     $scope.loggedIn = Auth.isLoggedIn(); 
     console.log(Auth.isLoggedIn()); 

     Auth.getUser().then(function(response){ 
      console.log(response); 
      $scope.user = response; 
     }).catch(function(error){ 

      console.log(error); 
     }); 

    }); 


    $scope.logged = function(){ 
     if($scope.loginData.email !== '' && $scope.loginData.password !== ''){ 
      Auth.login($scope.loginData.email, $scope.loginData.password).then(function(response){ 
       //console.log(response); 
       if(response.data !== 'failed'){ 
        Passingtoken.addData(response); 
        $location.path("/home"); 
        //$window.location.reload(); 
       }else{ 

       } 
      }, function(e){ 
       console.log(e); 
      }); 
     } 
    }; 



    /** 
    * Logout function 
    */ 
    $scope.logout = function(){ 
     Auth.logout(); 

     $scope.username = ""; 
     $location.path("/"); 
    } 

}]); 

In $ rootcope。我正在檢查用戶是否有令牌,如果用戶沒有,那麼路由可以改變(我正在使用jwt),但如果我通過url,那麼即使我沒有令牌,它也會帶我到任何地方。在我的主控制器中,我嘗試在.catch()中添加$ location.path('/'),然後在每次更改路由時,即使我未登錄並嘗試單擊登錄名,它也會將我重定向到該路徑到那條道路,這是有道理的。我只是迷失在如何確保用戶無法通過網址進入,角度應該檢查每個請求。任何幫助將不勝感激。

預先感謝您

+0

你應該在(「$ routeChangeStart」)移動你的'$'打電話給你的主應用程序模塊的'run'部分 – Phil

+0

@Phil。 –

+0

我在說的是你應該 – Phil

回答

0

移動這部分的代碼到你的應用程序的運行塊。我不是用來看部分都

$rootScope.$on('$routeChangeStart', function(event){ 
     $scope.loggedIn = Auth.isLoggedIn(); 
     console.log(Auth.isLoggedIn()); 

     Auth.getUser().then(function(response){ 
      console.log(response); 
      $scope.user = response; 
     }).catch(function(error){ 

      console.log(error); 
     }); 

    }); 
+0

這是行不通的。我在我的app.js中添加了.run模塊,但如果通過url,我仍然可以訪問這些頁面 –