Javascript 使用$resource使用AngularJS对第三方API进行的安全API调用

我必须使用AngualrJS前端与基于PHP的API通信。我的资源结构如下：

app.factory('Basket', ['$resource', '$http', 
function($resource, $http){
    $http.defaults.headers.post["Content-Type"] = "text/plain";
    return { 
        newBasket: $resource(env + '/rest/v1/newbasket'),
        newLine: $resource(env + '/rest/v1/newbasketline'),
        removeBasketLine: $resource(env + '/rest/v1/removebasketline'),
        getBasketItems: $resource(env + '/rest/v1/getbasketlines/:hash', {hash: '@hash'}),
        getDbBasketIds: $resource(env + '/rest/v1/getbasketids/:hash', {hash: '@hash'})
    };   
}]);

API要求我在HTTP头HTTP\U APIKEY中传递令牌。我可以用这样的标题：

$http.defaults.headers.common['APIKEY'] = 'myapikey';

但是任何人都可以查看源代码来获取我的密钥，然后将其用于邪恶目的

---

我似乎找不到任何关于如何使用AngularJS安全地发送API访问令牌的建议，有什么想法吗？

这是所有SPA网站的常见情况-它们将数据存储在客户端，因此用户可以访问，与此无关。但您可以加密本地存储，如本问题中所述：