Angular 将身份验证HTTP头添加到NativeScript映像

我正在使用HttpInterceptor为我的常规HTTP请求添加带有令牌的authenticator头，但是这似乎不包括映像请求

<Image src="https://example.net/image.png"></Image>

---

从不显示为未经验证。我假设这是由于映像使用了较旧版本的Http客户端。有没有一种简单的方法可以添加头，而不必单独加载每个资源。任何模块或扩展图像类都可以

您可以将

src

属性绑定到视图模型，使用

http

模块下载图像，完成后将本地缓存路径分配给视图模型，图像将被通知并加载

如果您打算经常重用，请尝试扩展

Image

，以构建一个自定义组件，该组件允许使用header

---

更新：

您可以将

src

属性绑定到视图模型，使用

http

模块下载图像，完成后将本地缓存路径分配给视图模型，图像将被通知并加载

如果您打算经常重用，请尝试扩展

Image

，以构建一个自定义组件，该组件允许使用header

---

更新：

我修改了上面的示例：

import { fromBase64, fromNativeSource } from "tns-core-modules/image-source";
import { Cache } from "tns-core-modules/ui/image-cache";
import { Image } from "tns-core-modules/ui/image";
import * as Sqlite from 'nativescript-sqlite';

const cache = new Cache();
const sqlite = new Sqlite('cache.sqlite', {
    multithreading: !!Sqlite.HAS_COMMERCIAL,
    migrate: true
})
    .then(async db => {
        await db.execSQL(`
        CREATE TABLE IF NOT EXISTS
            image_cache (
                url TEXT PRIMARY KEY,
                base_64 TEXT NOT NULL,
                timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
            )
        `);
        console.log('Table created');
        return db;
    })
    .catch(e => {
        console.error('Table not created', e);
        throw e;
    });

function setToDbCache (url, imageSource) {
    return sqlite
        .then(db => {
            return db.execSQL('INSERT OR REPLACE INTO image_cache (url, base_64) VALUES(?, ?)', [url, imageSource.toBase64String()]);
        }, () => 0);
}
function getFromDbCache (url) {
    return sqlite
        .then(async db => {
            let res = await db.get('SELECT base_64 FROM image_cache WHERE url = ?', [url]);
            if (res.length) {
                return fromBase64(res[0]);
            }
            return null;
        })
        .catch(() => null);
}

export default class RemoteImage extends Image {
    _createImageSourceFromSrc(url) {
        // look into image-cache if exists
        const image = cache.get(url);
        if (image) {
            this.imageSource = fromNativeSource(image);
        } else {
            this.imageSource = null;
            this.isLoading = true;
            // look into sqlite-cache if exists
            getFromDbCache(url)
                .then(image => {
                    if (image) {
                        this.imageSource = image;
                        this.isLoading = false;
                        // write it in image-cache
                        // TODO: iOS
                        cache.set(url, image.android);
                    } else {
                        // request image (writes in cache automatically)
                        cache
                            .push({
                                key: url,
                                url: url,
                                completed: (image, key) => {
                                    if (url === key) {
                                        this.imageSource = fromNativeSource(image);
                                        this.isLoading = false;
                                        // write it in sqlite-cache too
                                        setToDbCache(url, this.imageSource);
                                    }
                                }
                            });
                    }
                });
        }
    }
}

---

在这里，我使用了标准与

相结合，我修改了上面的示例：

import { fromBase64, fromNativeSource } from "tns-core-modules/image-source";
import { Cache } from "tns-core-modules/ui/image-cache";
import { Image } from "tns-core-modules/ui/image";
import * as Sqlite from 'nativescript-sqlite';

const cache = new Cache();
const sqlite = new Sqlite('cache.sqlite', {
    multithreading: !!Sqlite.HAS_COMMERCIAL,
    migrate: true
})
    .then(async db => {
        await db.execSQL(`
        CREATE TABLE IF NOT EXISTS
            image_cache (
                url TEXT PRIMARY KEY,
                base_64 TEXT NOT NULL,
                timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
            )
        `);
        console.log('Table created');
        return db;
    })
    .catch(e => {
        console.error('Table not created', e);
        throw e;
    });

function setToDbCache (url, imageSource) {
    return sqlite
        .then(db => {
            return db.execSQL('INSERT OR REPLACE INTO image_cache (url, base_64) VALUES(?, ?)', [url, imageSource.toBase64String()]);
        }, () => 0);
}
function getFromDbCache (url) {
    return sqlite
        .then(async db => {
            let res = await db.get('SELECT base_64 FROM image_cache WHERE url = ?', [url]);
            if (res.length) {
                return fromBase64(res[0]);
            }
            return null;
        })
        .catch(() => null);
}

export default class RemoteImage extends Image {
    _createImageSourceFromSrc(url) {
        // look into image-cache if exists
        const image = cache.get(url);
        if (image) {
            this.imageSource = fromNativeSource(image);
        } else {
            this.imageSource = null;
            this.isLoading = true;
            // look into sqlite-cache if exists
            getFromDbCache(url)
                .then(image => {
                    if (image) {
                        this.imageSource = image;
                        this.isLoading = false;
                        // write it in image-cache
                        // TODO: iOS
                        cache.set(url, image.android);
                    } else {
                        // request image (writes in cache automatically)
                        cache
                            .push({
                                key: url,
                                url: url,
                                completed: (image, key) => {
                                    if (url === key) {
                                        this.imageSource = fromNativeSource(image);
                                        this.isLoading = false;
                                        // write it in sqlite-cache too
                                        setToDbCache(url, this.imageSource);
                                    }
                                }
                            });
                    }
                });
        }
    }
}

---

在这里，我使用标准与

IMHO相结合-当您请求这样的图像时，它不会通过拦截器。一个选项是将auth头添加到查询字符串中。感谢您的回复。我不确定查询字符串是否受支持，而且放在那里也不会感到100%舒服。我还必须在401响应上编写URL，这可能更为棘手https://example.net/image.png?a=1“。这是支持的。另外，它不是一个wireshark用户看不到的东西，就像你试图输入的标题一样，不幸的是，它会被记录在日志等中。我已经检查过了，但在Office365 oAuth2 version 1实现中找不到任何提及它的内容。不幸的是，IMHO-当您请求这样的映像时，它不会通过拦截器。一个选项是将auth头添加到查询字符串中。感谢您的回复。我不确定查询字符串是否受支持，而且放在那里也不会感到100%舒服。我还必须在401响应上编写URL，这可能更为棘手https://example.net/image.png?a=1“。这是支持的。另外，它不是一个wireshark用户看不到的东西，就像你试图输入的标题一样，不幸的是，它会被记录在日志等中。我已经检查过了，很遗憾在Office365 oAuth2版本1实现中找不到任何关于它的内容。谢谢Manjo。根据问题，我正在寻找扩展类和避免手动加载每个资源的示例。我希望有人已经通过简单地重写函数解决了这个问题。@BenMorris you go。注意：通过自己使用

ImageSource.fromUrl

处理远程图像，我们在Android中释放了解码宽度和高度、缓存等功能。这个例子可以通过实现缓存和解码来进一步改进。谢谢@Manoj，我也需要捕捉401s，但这对我来说是一个好的开始。谢谢你的帮助，谢谢你，曼乔。根据问题，我正在寻找扩展类和避免手动加载每个资源的示例。我希望有人已经通过简单地重写函数解决了这个问题。@BenMorris you go。注意：通过自己使用

ImageSource.fromUrl

处理远程图像，我们在Android中释放了解码宽度和高度、缓存等功能。这个例子可以通过实现缓存和解码来进一步改进。谢谢@Manoj，我也需要捕捉401s，但这对我来说是一个好的开始。谢谢你的帮助。