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

Question

我想限制用戶訪問我的angular js應用程序中的/ dashboard視圖和/ add-item視圖或任何其他視圖。

這是我的路由器

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中鍵入/ add-item，我的add-item頁面正在打開，然后突然關閉，因為服務器返回401，並且出現了登錄頁面。如果用戶未登錄，我不想打開任何視圖。

我是angularjs的新手，我對此感到困惑。 請幫忙。

Answer 1

如果令牌不存在，您可以保存用戶的位置，以便在用戶登錄后將其帶回到同一頁面。您可以在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

您應該在路由配置中使用resolve 。 例：

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發生時重定向到登錄名，但是現在它將順利進行並且視圖沒有閃爍。

這是一個很好的方法，它將解決您以及以后可能遇到的其他問題。