将授权标头添加到单击的链接
Posted
技术标签:
【中文标题】将授权标头添加到单击的链接【英文标题】:Add authorization header to clicked link 【发布时间】:2018-12-25 00:51:33 【问题描述】:我是 Angular 新手,继承了旧版本,请耐心等待。
我的 Angular 1.5.7 应用程序需要从受承载令牌身份验证 https://somedomain.com/api/doc/somefile.pdf
保护的 API 服务器获取文件。所以我需要设置一个这样的标题:Authorization: Bearer xxxxxxxxxxxx
.
我尝试使用Postman 请求文件并设置标题Authorization: Bearer xxxxxxxxxxxx
并且有效。
在 Angular 1.5.7 中,我在 view.html 中有一个类似 <a href="url" ng-show="url" target="_blank"> PDF</a>
的链接,其中 url
= https://somedomain.com/api/doc/somefile.pdf
。
问题是我不知道如何在链接中添加标题。我认为这是不可能的。我必须创建一个这样的链接:<a>PDF</a>
,当点击 Angular 接管时,打开一个新窗口并在那里加载文件。
我查看了这些可能解决我的问题的堆栈溢出问题,但老实说,我不知道如何实施这些解决方案:
Add HTTP Header in javascript to requests for images Set HTTP header for one request更新
我的解决方案是使用下面的代码创建一个指令。它之所以有效,是因为当点击链接时,current 窗口已经设置了授权标头,因此授予了对文件的访问权限。
<a href="https://somedomain.com/api/doc/somefile.pdf" ng-click="openPdf($event)">PDF</a>
function openPdf($event)
// Prevent default behavior when clicking a link
$event.preventDefault();
// Get filename from href
var filename = $event.target.href;
$http.get(filename, responseType: 'arraybuffer')
.success(function (data)
var file = new Blob([data], type: 'application/pdf');
var fileURL = URL.createObjectURL(file);
// Open new windows and show PDF
window.open(fileURL);
);
【问题讨论】:
出于好奇,API 方法是什么样的?您要返回什么响应类型等?谢谢! 【参考方案1】:你不能使用拦截器。点击的链接将由浏览器请求处理,而不是系统。您需要将点击事件处理程序(使用 event.preventDefault() 方法)附加到此链接并使用您自己的函数发送获取请求。这将为请求添加标头
【讨论】:
您的回答让我走上了正轨,这帮助我解决了这个问题:***.com/questions/21729451/… 没问题最近还不得不从 NodeJS 服务器访问私有 pdf 文件。花点时间弄清楚【参考方案2】:您可以尝试使用interceptors
。基本上,您将能够检查每个 HTTP 调用并将 Authorization 标头附加到您想要的那些。
Here 是带有 Authorization 标头的具体用法的链接,this 是一般解释拦截器的链接。
【讨论】:
【参考方案3】:我的解决方案是在页面加载时运行 AngularJS 脚本,而不是等待用户点击。在这种情况下,您可以使用 $http.get(URL, options)
调用并像这样传递您的 Authorization 标头:
<script>
var app = angular.module('myApp', []);
var config = headers: 'Authorization': 'Bearer <access_token>' ;"
app.controller('myCtrl', function($scope, $http)
$scope.boxRootFolder = 'loading';
$http.get('https://api.box.com/2.0/folders/0/items', config)
.then( function(response)
$scope.boxRootFolder = response.data;
);
);
</script>
【讨论】:
以上是关于将授权标头添加到单击的链接的主要内容,如果未能解决你的问题,请参考以下文章