Javascript 如何使brower在标头中设置Oauth2承载访问令牌？

我需要帮助。 我的SpringOAuth2安全配置仅适用于RestAPIs，但不适用于浏览器资源加载事件

我在服务器上有两种类型的资源：开放资源和安全资源。打开文件夹中的所有内容都不需要身份验证，而安全文件夹中的所有内容都需要身份验证

----打开（home.html、HomeController.js等） ----安全（secure.html、secure.js等）

在home.html及其控制器中，我有一个登录密码表单，我调用我的httpService来验证令牌并将其保存在cookie中：

(function(angular) {
    var HomeController = function($scope, $rootScope, AppConstants, SharingService, httpService, $httpParamSerializer, $http, $state, DependencyLoaderService) {

        $scope.data = {username:'', password:''};

        $scope.doAdminLogin = function() {

            httpService.login($scope.data, function(response){
                if (response.data && response.data.error)
                    alert(response.data.error_description);
            });
        }

        $scope.securedPage = function() {
            $state.go('secured');
        }

        $scope.securedApi = function() {

            var url = '/api/superadmin/getAdminProfileList';
            httpService.get(url, null, false, function(response){
                $scope.securedApiResponse = JSON.stringify(response);
            }, function(response){
                $scope.securedApiResponse = JSON.stringify(response);
            });
        }

    };
    HomeController.$inject = [ '$scope', '$rootScope', 'AppConstants', 'SharingService', 'httpService', '$httpParamSerializer', '$http', '$state', 'DependencyLoaderService'];
    angular.module('todoapp.controllers').controller('HomeController', HomeController);
}(angular));

httpService

/**=========================================================
 * Module: Service .js Class for handling all http reqeusts.
 =========================================================*/

(function(angular) {
    angular
        .module('todoapp')
        .service('httpService', ['$http','$state', '$httpParamSerializer', 'AppConstants', '$cookies', function($http, $state, $httpParamSerializer, AppConstants, $cookies) {      



            /**
             * credentials (JSON object) : contains username and password
             * errorCallback (callback function) : callback function to handle rest-api call failed status.
             */
            this.login = function(credentials, errorCallback) {
                credentials.grant_type = AppConstants.OAUTH2_GRANT_TYPE;

                var request =  $http({
                    method : 'POST',
                    url    :  AppConstants.BASE_URL + AppConstants.URL_OAUTH_TOKEN,
                    headers: {
                        "Authorization": AppConstants.OAUTH2_AUTHORIZATION,
                        "Content-type": "application/x-www-form-urlencoded"
                    },
                    data: $httpParamSerializer(credentials)
                });

                return( request.then(function(data){
                    $http.defaults.headers.common.Authorization = 'Bearer ' + data.data.access_token;
                    var cookieExpiresIn = new Date();
                    cookieExpiresIn.setSeconds(cookieExpiresIn.getSeconds() + data.data.expires_in);
                    $cookies.put('access_token', data.data.access_token, {expires : cookieExpiresIn });

                    console.log('sucessfully authenticated');
                }, errorCallback) );
            }

            /**
             * url (string) : the url of the rest-api call.
             * data (json) : json-payload of the data sent to the post function
             * isCache (boolean) : boolean value to specifiy whether to cache the resoure on the browser.
             * successCallback (callback function) : callback function to handle rest-api call success status.
             * errorCallback (callback function) : callback function to handle rest-api call failed status.
             */
            this.post=function(url, data, isCache, successCallback, errorCallback) {
                var request =  $http({
                    method: 'POST',
                    url: url,
                    data: data,
                    cache: isCache
                });

                return( request.then(successCallback, errorCallback) );
            }

            /**
             * url (string) : the url of the rest-api call.
             * params (json) : json-payload of the params sent to the post function
             * isCache (boolean) : boolean value to specifiy whether to cache the resoure on the browser.
             * successCallback (callback function) : callback function to handle rest-api call success status.
             * errorCallback (callback function) : callback function to handle rest-api call failed status.
             */
            this.get = function(url, params, isCache, successCallback, errorCallback) {
                var request = $http({
                    url : url,
                    method: 'GET',
                    params: params,
                    cache: isCache
                });
                return ( request.then(successCallback, errorCallback) );
            }

            /**
             * url (string) : the url of the rest-api call.
             * params (json) : json-payload of the params sent to the post function
             * isCache (boolean) : boolean value to specifiy whether to cache the resoure on the browser.
             * successCallback (callback function) : callback function to handle rest-api call success status.
             * errorCallback (callback function) : callback function to handle rest-api call failed status.
             */
            this.put = function(url, params, isCache, successCallback, errorCallback) {
                $http({
                    url : url,
                    method: 'PUT',
                    params: params,
                    cache: isCache
                }).success(successCallback).
                   error(errorCallback);
            }

            /**
             * url (string) : the url of the rest-api call.
             * params (json) : json-payload of the params sent to the post function
             * isCache (boolean) : boolean value to specifiy whether to cache the resoure on the browser.
             * successCallback (callback function) : callback function to handle rest-api call success status.
             * errorCallback (callback function) : callback function to handle rest-api call failed status.
             */
            this.del = function(url, params, isCache, successCallback, errorCallback) {
                var request = $http({
                    url : url,
                    method: 'DELETE',
                    params: params,
                    cache: isCache
                });

                return ( request.then(successCallback, errorCallback) );
            }

            function handleError(response) {
                console.log(response);
                if ( ! angular.isObject( response.data ) || ! response.data.message) {
                    $.smallBox({
                        title : 'An unknown error occurred. <p>URL: <a href='+response.config.url+' target=_blank style="color:white;margin-left:10px;">' + response.config.url + '</a><p>',
                        content : '',
                        color : '#A65858',
                        iconSmall : 'fa fa-times',
                        timeout : 5000
                    });
                    return( $q.reject( 'An unknown error occurred.' ) );
                }

                return( $q.reject( response.data.message ) );
            }
            function handleSuccess(response) {
                return( response.data );
            }
        }])
}(angular));

/**=========================================================
*模块：用于处理所有http请求的Service.js类。
=========================================================*/
（功能（角度）{
有棱角的
.module（'todoapp'）
.service（'httpService'、['$http'、'$state'、'$httpParamSerializer'、'AppConstants'、'$cookies'，函数（$http、$state、$httpParamSerializer、AppConstants、$cookies）{
/**
*凭证（JSON对象）：包含用户名和密码
*errorCallback（回调函数）：用于处理rest api调用失败状态的回调函数。
*/
this.login=函数（凭证、错误回调）{
credentials.grant\u type=AppConstants.OAUTH2\u grant\u type；
var请求=$http({
方法：“POST”，
url:AppConstants.BASE\u url+AppConstants.url\u OAUTH\u令牌，
标题：{
“授权”：AppConstants.OAUTH2_授权，
“内容类型”：“应用程序/x-www-form-urlencoded”
},
数据：$httpParamSerializer（凭据）
});
返回（请求）然后（函数（数据）{
$http.defaults.headers.common.Authorization='Bearer'+data.data.access_令牌；
var cookieExpiresIn=新日期（）；
cookieExpiresIn.setSeconds（cookieExpiresIn.getSeconds（）+data.data.expires\u in）；
$cookies.put（'access_token'，data.data.access_token，{expires:cookieExpiresIn}）；
console.log（'successfully authenticated'）；
}，errorCallback））；
}
/**
*url（字符串）：RESTAPI调用的url。
*数据（json）：发送到post函数的数据的json有效负载
*isCache（布尔）：用于指定是否在浏览器上缓存资源的布尔值。
*successCallback（回调函数）：处理rest api调用成功状态的回调函数。
*errorCallback（回调函数）：用于处理rest api调用失败状态的回调函数。
*/
this.post=函数（url、数据、isCache、successCallback、errorCallback）{
var请求=$http({
方法：“POST”，
url:url，
数据：数据，
缓存：iCache
});
return（request.then（successCallback，errorCallback））；
}
/**
*url（字符串）：RESTAPI调用的url。
*params（json）：发送给post函数的params的json负载
*isCache（布尔）：用于指定是否在浏览器上缓存资源的布尔值。
*successCallback（回调函数）：处理rest api调用成功状态的回调函数。
*errorCallback（回调函数）：用于处理rest api调用失败状态的回调函数。
*/
this.get=函数（url、参数、isCache、successCallback、errorCallback）{
var请求=$http({
url:url，
方法：“GET”，
params:params，
缓存：iCache
});
return（request.then（successCallback，errorCallback））；
}
/**
*url（字符串）：RESTAPI调用的url。
*params（json）：发送给post函数的params的json负载
*isCache（布尔）：用于指定是否在浏览器上缓存资源的布尔值。
*successCallback（回调函数）：处理rest api调用成功状态的回调函数。
*errorCallback（回调函数）：用于处理rest api调用失败状态的回调函数。
*/
this.put=函数（url、参数、isCache、successCallback、errorCallback）{
$http({
url:url，
方法：'放'，
params:params，
缓存：iCache
}).成功（successCallback）。
错误（errorCallback）；
}
/**
*url（字符串）：RESTAPI调用的url。
*params（json）：发送给post函数的params的json负载
*isCache（布尔）：用于指定是否在浏览器上缓存资源的布尔值。
*successCallback（回调函数）：处理rest api调用成功状态的回调函数。
*errorCallback（回调函数）：用于处理rest api调用失败状态的回调函数。
*/
this.del=函数（url、参数、isCache、successCallback、errorCallback）{
var请求=$http({
url:url，
方法：“删除”，
params:params，
缓存：iCache
});
return（request.then（successCallback，errorCallback））；
}
函数句柄错误（响应）{
控制台日志（响应）；
如果（！angular.isObject（response.data）| |！response.data.message）{