如何在angularjs應用程序中限制視圖

Question

我想限制用戶在我的角度js應用程序中的訪問/儀表板視圖和/添加項目視圖或任何其他視圖。

這是我的路由器

app.config(function($stateProvider, $urlRouterProvider){ 

     $urlRouterProvider.otherwise('login'); 

     $stateProvider. 
      state('app.dashboard', { 
       url: '/dashboard', 
       templateUrl: appHelper.viewsPath('dashboard/views/dashboard'), 
       controller: 'DashBoardController as DashBordCtrl', 
    }). 

      // Add Item 
      state('app.add-item', { 
       url: '/add-item', 
       templateUrl: appHelper.viewsPath('item/views/add-item'), 
       controller: 'ItemController as ItemCtrl', 
      }) 
     }); 

登錄我存儲我的本地存儲的令牌後。如果令牌不存在，我希望用戶不訪問任何視圖。

這是我的登錄控制器

$scope.register = function(credentials){ 
     LoginService.post(credentials,function(success){ 
      $state.go('app.add-item'); 
      SessionService.set("token",success.accessToken); 


      },function(error){ 
     FlashService.showError("Please Enter Valid Email Password"); 
     }); 
    } 
    } 

在401錯誤我正在重定向到登錄頁面是這樣的：

app.config(function ($httpProvider) { 
    // $http.defaults.headers.common.Authorization = ''; 
    delete $httpProvider.defaults.headers.common['X-Requested-With']; 

    $httpProvider.interceptors.push(function ($location, $q, SessionService, FlashService) { 
     return { 
      request: function (config) { 
       config.headers = config.headers || {}; 
       config.headers.Authorization = SessionService.get('token'); 
       return config; 
      }, 
      responseError: function (response) { 
       if (response.status === 401) { 
        SessionService.unset('token'); 
        $location.path('/login'); 
       } 
       return $q.reject(response); 
      } 
     }; 
    }); 
}); 

但是，如果我在URL類型/加項，我的加載項頁面正在打開，然後突然關閉，因爲服務器返回401，並且登錄頁面出現。如果用戶未登錄，我不想打開任何視圖。

我是新的angularjs，我很困惑如何做到這一點。請幫忙。

Answer 1

如果令牌不存在，您可以保存用戶的位置帶他回到同一頁面，他有logged-in.You可以在app.js查看下面的代碼後：

app.config(function($stateProvider, $urlRouterProvider){  

     $stateProvider. 
      state('app.dashboard', { 
       url: '/dashboard', 
       templateUrl: appHelper.viewsPath('dashboard/views/dashboard'), 
       controller: 'DashBoardController as DashBordCtrl', 
    }). 

      // Add Item 
      state('app.add-item', { 
       url: '/add-item', 
       templateUrl: appHelper.viewsPath('item/views/add-item'), 
       controller: 'ItemController as ItemCtrl', 
      }) 
$urlRouterProvider.otherwise('login'); 
     }); 

$ urlRouterProvider .otherwise（'login'）用app.config中的$ urlRouterProvider.otherwise（'app/dashboard'）替換。如果它是$ urlRouterProvider.otherwise（'login'），那麼您有一個令牌，並且仍然會登錄頁面。

app.config(function ($httpProvider) { 
     // $http.defaults.headers.common.Authorization = ''; 
     delete $httpProvider.defaults.headers.common['X-Requested-With']; 

     $httpProvider.interceptors.push(function ($location, $q, SessionService, FlashService) { 
      return { 
       request: function (config) { 
        config.headers = config.headers || {}; 
        config.headers.Authorization = SessionService.get('token'); 
        return config; 
       }, 
       responseError: function (response) { 
        if (response.status === 401) { 
         SessionService.unset('token'); 
         $location.path('/login'); 
        } 
        return $q.reject(response); 
       } 
    if (!SessionService.get('token');) { 
        /* You can save the user's location to take him back to     the same page after he has logged-in */ 
        $rootScope.savedLocation = $location.url(); 

        $location.path('/login'); 
       } 
      }; 
     }); 
    }); 

Answer 2

你應該在你的路由配置使用決心。例如：

state('app.add-item', { 
      url: '/add-item', 
      templateUrl: appHelper.viewsPath('item/views/add-item'), 
      controller: 'ItemController as ItemCtrl', 
      resolve: ['SomeService', function(SomeService) { 
       return SomeService.getDataFromApi(); 
      }] 
     }) 

望着這個例子中，如果SomeService返回401，這意味着一個錯誤，即路由控制器永遠不會實例化併爲此你不能訪問視圖。您的攔截器仍然可以完成他的工作，並在401發生時重定向到登錄，但現在它會順利進行並且不會出現閃爍的視圖。

這是一個很好的辦法，它可以解決你的問題，也可以解決你以後可能遇到的問題。