从重定向请求中获取标头到 angular-js 应用程序答案

【问题标题】：Grabbing a header from a redirect request to an angular-js application从重定向请求中获取标头到 angular-js 应用程序
【发布时间】：2016-08-09 04:22:51
【问题描述】：

我有以下情况：我有两个应用程序需要相互通信：一个 JSF 登录页面和一个 angular-js 应用程序。我无法修改 JSF 登录页面。我可以修改 Angular 应用程序。

用户通过访问 JSF 登录页面进行登录。用户从浏览器访问 JSF 页面并填写登录表单。如果成功通过身份验证，JSF 将生成一个令牌并将该令牌发送到带有重定向到具有 angular-js 应用程序的 index.html 的标头中。 angular-js 应用程序如何从该重定向中获取该令牌？

【问题讨论】：

标签： javascript angularjs authentication access-token

【解决方案1】：

这取决于你需要什么样的请求头。

如果是xhr，您很可能会使用http 服务来处理您的请求。它的承诺得到（在两种状态下：失败和成功）object 作为带有header() 方法的参数，这是您需要的方法。您可以获取更多信息here：

响应对象具有以下属性：

data - {string|Object} – 使用转换函数转换的响应正文。

status - {number} - 响应的 HTTP 状态代码。

headers - {function([headerName])} – 标头获取函数。

config - {Object} - 用于生成请求的配置对象。

statusText {string} – 响应的 HTTP 状态文本。

编辑

当您需要从初始页面请求而不是 xhr 获取标头时，在引导 angular 之前会遇到困难。不幸的是，javascript 无法访问它们。

一种解决方案可能是使用cookies 而不是标头来存储您需要的数据。但在这种情况下，您应该在请求发射器端进行一些更改。

另一种方法是在提供 html 之前在服务器上处理请求。之后，您可以直接在标记中传递它们，或者以某种方式记住它们，然后直接从 Angular 发送 xhr 请求。但是如果你有一个简单的静态页面，你将无法实现它。

【讨论】：

如果我有角，我如何才能访问我尚未完成的请求的响应？
其他一些应用程序重定向到一个 Angular 应用程序，并且该重定向包含一个我想在我的 Angular 应用程序中访问的标头。
我是否可以使用 cookie 将标头存储在旧应用的浏览器中，然后使用新应用读取这些 cookie？您可以跨应用程序读取 cookie 吗？
好的，我明白你的意思了。在引导 Angular 之前，您必须从初始页面请求中获取标头。一会，我会考虑我的答案。
页面只是静态html？或由某些东西（php、ruby、aspb 节点等）解释/编译？

【解决方案2】：

我认为您必须创建一个 http 拦截器，该拦截器将从 http 请求中获取标头，而不是将其存储在 cookie 或本地存储中。

编辑：试试这个：

module.factory('myTokenInterceptor', ['$cookies', function($cookies) {  
    var myTokenInterceptor =  { 
        'request': function(config) {
        if (config.url=='index.html') 
        {
         var myToken=config.headers['myToken'];
         $cookies.put('myToken', myToken);

        };

    }
    };
    return myTokenInterceptor;
}]);
module.config(['$httpProvider', function($httpProvider) {  
    $httpProvider.interceptors.push('myTokenInterceptor');
}]);

"module" 可以是您的任何 Angular 应用程序模块。在您的控制器中，您可以使用以下方法获取令牌的值：

var token=$cookies.get('myToken');

【讨论】：

我可以跨应用程序共享 cookie 吗？
您不必使用来自 JSF 应用程序的 cookie，因为您将使用 http 拦截器直接从 http 标头获取令牌

【解决方案3】：

我确实有类似的情况。通过 JSF 应用程序登录页面（App1）对用户进行身份验证，并在链接上单击调用 servlet，在 doPost() 内部使用令牌/JWT 创建 Cookie，并将 cookie 添加到响应标头并重定向到 Angular JS（应用程序 2）。 Angular 应用程序从 cookie 读取令牌并在本地环境中运行良好。但同样不适用于真实域名。获取未定义的 cookie。

doPost() Domain.com/App1 内部

Cookie cookie = new Cookie("AUTH_SESSION", URLEncoder.encode(
                token, "UTF-8"));
        cookie.setDomain(domain.com);
        cookie.setMaxAge(30);
        cookie.setHttpOnly(false);
        cookie.setPath(“/”);
        response.addCookie(cookie);
String redirectUrl = bean.getRedirectServletUrl();
        response.sendRedirect(redirectUrl);

AngularApp 内部 Domain.com/app2

angular.module('app').service('CookieInitializer',
  ['$cookies', 'Session', '$location', CookieInitializer]);

function CookieStateInitializer($cookies, Session, $location) {
  var init = function() {
    var cookie = $cookies.get('FS_SESSION'); // undefined when using domain name

这两个应用程序都通过上下文路径来区分。并添加代理以使两个应用程序使用相同的域名。

Domain.com/app1
domain.com/app2 --> apphost.com:443

【讨论】：