如果未通过异常身份验证，则angularjs重定向到登录页面

Question

编辑：忘记提及我与AngularJs在一起仅一周了，因此，如果您看到某些东西，您认为应该做得更好，并且与问题无关，请随时在评论部分告诉我。

好的，所以我有我的身份验证控制器和提供程序，由于它们与问题范围无关，因此将不显示。然后，我有一个拦截器来检查拨打电话时用户是否已通过身份验证。如果是这样，我将Authentication请求的标头设置为包括用户的Token（如果没有），则将用户重定向到登录页面，甚至不向服务器发出请求（很明显，如果有人绕过此请求，AuthorizeAPI上也会有一个）。

我想要添加一些例外，这意味着即使用户没有身份验证令牌，我也希望允许某些页面。如果是特定路径，我可以执行此操作，但是我想允许访问我的404页面，并且它位于Routing我指定.otherwise要转到404页面的位置，我该如何做以使我的拦截器仅重定向到如果不转到此页面，请登录。

拦截器

.factory('authInterceptorService', ['$q', '$location', 'localStorageService', function ($q, $location, localStorageService) {

    var authInterceptorServiceFactory = {};

    var authData = localStorageService.get('authorizationData');

    var _request = function (config) {

        config.headers = config.headers || {};

        if (authData) {
            config.headers.Authorization = 'Bearer ' + authData.token;
        } else if ($location.path != '/accounts/login' && $location.path != '/accounts/register') {
            $location.path('/accounts/login');
        }

        return config;
    }

    var _responseError = function (rejection) {
        if (rejection.status === 401) {
            $location.path('/accounts/login');
        }
        return $q.reject(rejection);
    }

    authInterceptorServiceFactory.request = _request;
    authInterceptorServiceFactory.responseError = _responseError;

    return authInterceptorServiceFactory;
}])

在我的路由中

 $urlRouterProvider.otherwise('/page-not-found');

 $stateProvider
     (...)//rest of the states

     .state('page-not-found', {
         url: '/page-not-found',
         templateUrl: '/Content/partials/error/404.html',
         data: {
             displayName: false
         }
     })

     (...)//rest of the states

我试图添加'/page-not-found'到我的文件中，if但是它不能按预期工作，因为到第一次检查位置时，它仍然没有被重定向。

编辑 charlietfl感到很困惑，我现在正在尝试使用resolve，但它甚至没有传递我的函数。

我从拦截器中删除了以下代码：

else if ($location.path != '/accounts/login' && $location.path != '/accounts/register') {
    $location.path('/accounts/login');
}

并将新的添加service到身份验证模块：

.service('authCheckService', ['$http', '$q', 'localStorageService', function ($http, $q, localStorageService) {
    var self = {
        'onlyLoggedIn': function ($state, $q) {
            var deferred = $q.defer();
            var authData = localStorageService.get('authorizationData');
            console.log(authData);
            if (authData) {
                deferred.resolve();
            } else {
                deferred.reject();
                $state.go('login');
            }
            return deferred.promise;
        }
    }

    return self;
}]);

我试图称其为：

.state('smo-dashboard', {
        url: '/dashboard',
        templateUrl: '/Content/partials/dashboard.html',
        resolve: authCheckServiceProvider.onlyLoggedIn
})

请注意，我正在尝试登录authData var来检查其是否正常运行，但是没有，并且控制台上也没有错误。

Answer 1

最终弄清楚了如何使用“解决”来解决它。

首先，我完全删除了以前使用的拦截器。然后我在“路由”中创建了一个函数.config，用于每个人resolve的身份验证。终于处理了resolve我正在使用$stateChangeError的重定向到登录名state

路由配置

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

    // function to check the authentication //
    var Auth = ["$q", "authService", function ($q, authService) {
        authService.fillAuthData;
        if (authService.authentication.isAuth) {
            return $q.when(authService.authentication);
        } else {
            return $q.reject({ authenticated: false });
        }
    }];

    /* if the state does not exist */
    $urlRouterProvider
        .otherwise('/page-not-found');

    $stateProvider

        // state that allows non authenticated users //
        .state('home', {
            url: '/',
            templateUrl: '/Content/partials/home.html',
        })

        // state that needs authentication //
        .state('smo-dashboard', {
            url: '/dashboard',
            templateUrl: '/Content/partials/dashboard.html',
            resolve: {
                auth: Auth
            }
        })

        // errors //
         .state('page-not-found', {
             url: '/page-not-found',
             templateUrl: '/Content/partials/error/404.html'
         })

        // accounts //
        .state('login', {
            url: '/accounts/login',
            templateUrl: '/Content/partials/account/login.html'
        })

        // OTHER STATES //
    }
);

在MainController中

$scope.$on("$stateChangeError", function (event, toState, toParams, fromState, fromParams, error) {
    $state.go("login");
});