0
  • 我有一个文件，与烧瓶一起提供，受基于令牌的身份验证保护。
  • 我想从 Angular 应用程序提供下载
  • 令牌存储在角度会话中并放入每个 $http.get 或 post 的标题中

但是当我只是放置一个指向烧瓶路径的链接时，令牌不会添加到请求标头中，因为它不是角度 $http.get() 而只是一个普通的锚，我不能这样做（对吗？）。

我不想将 url 中的令牌作为查询字符串参数传递。我如何向用户提供下载？我应该先将它 $http.get() 转换成 Angular 然后将它作为文件下载通过隧道吗？

登录后的令牌存储：

$window.sessionStorage.token = results.response.user.authentication_token;

它被注入到每个 $http get 或 post 中：

config.headers['Authentication-Token'] = $window.sessionStorage.getItem('token');

烧瓶（带有烧瓶安全）部分：

@app.route("/download", methods=['GET'])
@auth_token_required
def download():
    response = make_response(open('filename.ext').read())
    response.headers["Content-Disposition"] = "attachment; filename=download.ext"
    return response

我该如何解决这个问题？

4

1 回答 1

0

首先你通过 $http.get() 获取数据

然后我发现了两种方法：

  1. 将数据作为 base64 编码数据插入到 href 属性中

  2. 将数据作为 javascript blob 插入并在 href 属性中放置一个 blob 链接

第一种方法是由@Christian 在评论中推荐的文章提出的。我实现了它，您可以在下面找到代码。但是，该方法使较大文件（在这种情况下为 csv 文件）的 Chrome 崩溃，显然这是chrome 的限制。所以我推荐方法2。

方法二

Angular（对于这种情况下的 csv 文件，请相应地更改类型：'text/csv' 对于其他文件：

$http.get('/downloadpath').
    success(function(downloadresult){
        fileData = new Blob([downloadresult], { type: 'text/csv' }); 
        fileUrl = URL.createObjectURL(fileData);
        $scope.download_href = fileUrl;
    });

HTML：

<a href="{{download_href}}" download="filename.ext">download</a>

烧瓶：

@app.route("/downloadpath", methods=['GET'])
@auth_token_required
def download():
    response = open('filename.ext','br').read()
    return response

为了完整起见，这里是方法1：

方法一

 $http.get('/downloadpath').
    success(function(downloadresult){
        $scope.download_href = downloadresult;
    });

对于 html 也是一样的：

<a href="{{download_href}}" download="filename.ext">download</a>

烧瓶（例如 csv 文件，如果您有另一个文件，请更改 'data:text/csv'）：

@app.route("/downloadpath", methods=['GET'])
@auth_token_required
def download():
    encoded = base64.b64encode(open('export.csv','br').read())
    response = 'data:text/csv;base64,{}'.format(str(encoded, encoding='utf-8'))
    return response

两种方法的角度要求

您需要将方法 2 的 blob 协议和方法 1 的数据协议列入白名单：

var app = angular.module('myApp', []);

app.config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|data|blob):/);
    }
]);
于 2015-03-31T14:47:23.377 回答