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

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 源头放在请求的资源上，因为我无权编辑 API 的响应。

Answer 1

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

.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;
            }
        }
    }