AngularJS $ http请求授权标头更改令牌

时间:2015-06-01 20:45:45

标签: angularjs

用户登录后我有这个$ http电话,以获得用户'细节。当用户登录时,我将令牌存储在 user.token 中,如下所示:

  

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYW1laWQiOiIzZGMwM2FiOC0wZGFiLTQ1ZGYtYjEwNS03Y2VmNDA4ZjQ4YWQiLCJ1bmlxdWVfbmFtZSI6InIzcGxpY2EiLCJodHRwOi8vc2NoZW1hcy5taWNyb3NvZnQuY29tL2FjY2Vzc2NvbnRyb2xzZXJ2aWNlLzIwMTAvMDcvY2xhaW1zL2lkZW50aXR5cHJvdmlkZXIiOiJBU1AuTkVUIElkZW50aXR5IiwiQXNwTmV0LklkZW50aXR5LlNlY3VyaXR5U3RhbXAiOiI4NGIyMjMzMi1jOTkyLTQ1YjItYWI0Yi1mYzU1YzkzYWU3NjIiLCJyb2xlIjoiQWRtaW5pc3RyYXRvciIsImlzcyI6Imh0dHA6Ly9sb2NhbGhvc3Q6NTgxMjciLCJhdWQiOiJkM2U3OWM4MS0xNjNmLTQwMTMtODA2NC0zMDc1OTBhOWMwYmYiLCJleHAiOjE0MzMyNzc2NDIsIm5iZiI6MTQzMzE5MTI0Mn0.erNou7AjihJrp2glS89zNYYFc65mREscGwl45wVUSYA

然后我接受此令牌并将其传递给 $ http 这样的调用:

$http.get('api/users', { headers: { 'Authorization': 'Bearer ' + user.token }, params: { username: model.userName } });

但是如果我检查这个电话,它会改变我的标记。 fiddler中的请求如下所示:

  

授权:承载cF9xV4hw3psCq2of-wRDn-cRE_IifwzCYyoS-c5Njdk4dGu7EGGQ8Bl_XOr8uEGMAFkxR0paqfCI4Aq17VWP6BDxMZN2Nkk7WIfPLVrilKkMybmGxbOqAKqwl3F1qnEvtlvdgQtdpAqgR6-s1oFU0QemRVaQiyOPbmJwEyfh5mYrNVLuZniPPCvpZvOKKBSpinpCY-vNINI3SYvbZyVpRza18aFJfXy-JgUSN3YZBmg1T4JFjMucCueqAWlulGaDGRc8hAXp7RYnxeUtDO7yOhPzQehjVVxl59Lz461DpsXcZjuEILhlFXbyC4yn24DHIFfLs0_x9DCZwodXaaAwoCmRI_vx8yLpjfoPcmnOR_20lLlWp0pOODOqoKSRxZldnRZO8pbilo_AcYHSCQlyeMPOevvO1bP8yggGdCe_LVQiTNJgzhMccKRcziZqZjPCMw0Kz_OLkR5w2ayS5JTdfA

这不是我通过的令牌。有谁知道为什么会发生这种情况?

1 个答案:

答案 0 :(得分:0)

凯文正确地说,我是在我的 http拦截器上设置的。它看起来像这样:

.factory('AuthInterceptorService', ['$rootScope', '$q', '$location', function ($rootScope, $q, $location) {

    // Function to handle a request
    var request = function (config) {

        // Get the current user
        var user = $rootScope.user;

        // Get the current headers or an empty object
        config.headers = config.headers || {};

        // If we have a user
        if (user && user.token) {

            // Then set the authorization header
            config.headers.Authorization = 'Bearer ' + user.token;
        }

        // Return our config
        return config;
    };

    // Function to handle errors
    var responseError = function (rejection) {

        // If we have unauthorized access
        if (rejection.status === 401) {

            // Redirect to our login page
            $location.path('/account/login');
        }

        // Return our rejected promise
        return $q.reject(rejection);
    };

    return {
        request: request,
        responseError: responseError
    };
}])

解决问题我只是简单地调用if语句来查看授权标头是否已经设置如下:

.factory('AuthInterceptorService', ['$rootScope', '$q', '$location', function ($rootScope, $q, $location) {

    // Function to handle a request
    var request = function (config) {

        // Get the current user
        var user = $rootScope.user;

        // Get the current headers or an empty object
        config.headers = config.headers || {};

        // If we have a user
        if (user && user.token) {

            // If we don't already have the authorization header set
            if (!config.headers.Authorization) {

                // Then set the authorization header
                config.headers.Authorization = 'Bearer ' + user.token;
            }
        }

        // Return our config
        return config;
    };

    // Function to handle errors
    var responseError = function (rejection) {

        // If we have unauthorized access
        if (rejection.status === 401) {

            // Redirect to our login page
            $location.path('/account/login');
        }

        // Return our rejected promise
        return $q.reject(rejection);
    };

    return {
        request: request,
        responseError: responseError
    };
}])

简单:)