如果未通过异常进行身份验证,angularjs将重定向到登录页面

前端之家收集整理的这篇文章主要介绍了如果未通过异常进行身份验证,angularjs将重定向到登录页面前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
编辑:忘了提到我一直在和AngularJs一起工作一周,所以如果你看到一些你认为应该改变的东西并且与问题无关,请随时在评论部分告诉我.

好的,所以我有我的身份验证控制器和提供程序,我不会显示,因为它们与问题的范围无关.
然后我有一个拦截器来检查用户是否在进行呼叫时进行了身份验证.如果是这样的话,我在请求上设置Authentication头以包含用户的令牌,如果不是我将用户重定向登录页面,甚至不向服务器发出请求(显然如果有人绕过这个,那么它也是API的授权) .

我想要的是添加一些例外,这意味着即使用户没有Auth Token,也有一些我想要允许的页面.如果它是一个特定的路径,我能够这样做,但是我想允许访问我的404页面并且它在我指定的路由中.另外去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消化我现在正试图使用​​决心,但它甚至没有通过我的功能.

我从拦截器中删除了这段代码

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

并向身份验证模块添加新服务:

.service('authCheckService',['$http','$q',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以检查它是否正常工作但它不是,并且控制台上也没有错误.

最后想出了如何使用resolve解决它.

首先,我完全删除了之前使用过的拦截器.
然后我在Routing .config中创建了一个函数,用于验证的每个解析.最后处理我的决心我正在使用$stateChangeError重定向登录状态

路由配置

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

    // function to check the authentication //
    var Auth = ["$q","authService",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',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");
});
原文链接:https://www.f2er.com/angularjs/143371.html

猜你在找的Angularjs相关文章