Question

我想传入对api进行REST调用所需的用户名和密码组合。

Controller.js

var app = angular.module('myApp', []);

//The service to put the interceptor configuration on (not on all $http method calls)
app.factory('getCallsApi', ['$http', function($http) {
    return {
        get: function(callback) {
            $http.get(/* REST URI */).success(function(data) {
                callback(data);
            });  
        }
    }
}]);

var Interceptor = function($q) {
    return {
        request: function(config) {
            //TODO: Pass in username and password (hardcoded) to get through authentication

        },
        requestError: function(rejection) {

        },
        response: function(config) {
            //TODO: ADD Cross origin headers

        },
        responseError: function(rejection) {

        }
    }
}

app.config(['$httpProvider', function($httpProvider) {  
    $httpProvider.interceptors.push(Interceptor);
}]);

myApp.controller('appController', ['$scope','getCallsApi', function($scope, getCallsApi) {
  getCallsApi.get(function(data) {
    console.log(data);
  });
}]);

我目前在控制台中收到两个错误。首先是未经授权访问的401状态以及在请求的资源上找不到的跨源头的错误。我不能自己将X origin标头放在请求的资源上，因为我没有权限编辑API的响应。

Answer 1

不是针对跨源问题，但这里是如何向请求标头添加内容。在我的例子中，我传入一个存储在localstorage中的令牌。我们将该值绑定到角度常量并将其注入拦截器服务：

.constant('AUTH_TOKEN', localStorage.getItem('myapp.authToken'))

在你的拦截器中：

    var Interceptor = function ($q) {
        return {
            request: function (config) {

                if (AUTH_TOKEN) {
                    config.headers['Authorization'] = 'Token ' + AUTH_TOKEN;
                }
                return config;
            }
        }
    }

REST的简单身份验证可以使用Angular服务的请求拦截器进行调用

1 个答案: