我可以使用 RequireJS 设置授权标头吗？

Question

我们希望为使用 RequireJS 进行依赖管理的 AngularJS 应用程序（公共/私有）提供 2 组资源。基本上登录页面上的所有内容都是公开的，一旦登录，将加载另一个 angularjs 应用程序（新的 requirejs 配置），该应用程序将加载需要身份验证才能访问的资源。

有没有办法配置requirejs在加载资源时设置授权头？

Answer 1

这取决于您所说的“资源”以及您的服务器是如何配置的。但总的来说 - 是的，因为您使用的是 AngularJS，您可以使用 $httpProvider 来注入拦截器服务。

例如，在服务中：

        var dependencies = ['$rootScope', 'userService'];

        var service = function ($rootScope, userService) {
            return {
                request: function(config) {
                    var currentUser = userService.getCurrentUser();
                    var access_token = currentUser ? currentUser.access_token : null;

                    if(access_token) {
                        config.headers.authorization = access_token;
                    }
                    return config;
                },
                responseError: function (response) {
                    if(response.status === 401) {
                        $rootScope.$broadcast('unauthorized');
                    }
                    return response;
                }
            };
        };

        module.factory(name, dependencies.concat(service));

然后，在你配置好你的路由之后，你可以使用：

$httpProvider.interceptors.push( 'someService');

你可以在这里找到更多关于拦截器的信息：https://docs.angularjs.org/api/ng/service/$http#interceptors

---

更新

您也许可以使用文本插件来尝试接收它，但我看不出保护客户端代码的意义。另外，如果你想使用优化，资源只会放在一个文件中......

 config: {
        text: {
            onXhr: function (xhr, url) {
               xhr.setRequestHeader('Authorization','Basic ' + token);
            }
        }
    }

参考：custom-xhr-hooks

---

另一个更新

您也可以使用 urlArgs（主要用于缓存失效）而不使用文本插件：

require.config({
    urlArgs: 'token='+token,
    ...
)}