小编cer*_*lex的帖子

我正在尝试使用Firebase Auth为Angular 2路由构建AuthGuard.

这是AuthGuard服务:

import { Injectable }             from '@angular/core';
import { CanActivate, Router,
         ActivatedRouteSnapshot,
         RouterStateSnapshot }    from '@angular/router';
import { AuthService }            from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private AuthService: AuthService, 
                private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.AuthService.loggedIn) { return true; }

    this.router.navigate(['login']);
    return false;
  }
}

这是AuthService,它检查用户是否登录并将结果绑定到其构造函数中的"loggedIn"属性.

import { Injectable } from '@angular/core';
import { AngularFire } from 'angularfire2';
import { Router } from '@angular/router';

@Injectable()
export class AuthService {
loggedIn: …

我正在尝试了解令牌如何在Firebase存储中运行.

每当我的网络应用程序将图像上传到FS时,它都会向其公共网址添加一个令牌.问题是每当您将相同的图像文件上传到Web应用程序的另一部分时,您似乎没有获得另一个文件,而是已经上传的文件URL的不同令牌,因此呈现前一个403错误注册图像显示.

有办法解决这个问题吗？

例:

storageRef.put(picture.jpg);
uploadTask.snapshot.downloadURL 
// returns something like https://firebasestorage.googleapis.com/v0/b/<your-app>/o/picture.jpg?alt=media&token=09cb2927-4706-4e36-95ae-2515c68b0d6e

那个url然后显示在img src中的某个地方.

<img src="https://firebasestorage.googleapis.com/v0/b/<your-app>/o/picture.jpg?alt=media&token=09cb2927-4706-4e36-95ae-2515c68b0d6e">

如果用户重复该过程并在应用的另一部分上传相同的picture.jpg,而不是在Firebase存储中获取全新副本,则该文件将被以新标记结尾的URL覆盖; 说12345.

所以:

 <img src="https://...picture.jpg?alt=media&token=12345"> // New upload renders fine
 <img src="https://...picture.jpg?alt=media&token=09cb2927-4706..."> // But old upload breaks because of wrong url

我一直在收到Invalid argument in put at index 0: Expected Blob or File错误.有趣的是,论证完全是一个档案......

这是代码:

var file = document.getElementById('cke_69_fileInput')
          .contentWindow.document.getElementById('cke_69_fileInput_input').files[0];

var storageUrl = 'noticias/imagenes/';
var storageRef = firebase.storage().ref(storageUrl + file.name);
console.warn(file); // Watch Screenshot
var uploadTask = storageRef.put(file);

这是在要求文件错误之前警告的实际文件的屏幕截图...

这是我的规则,适用于img目录:

match /img {
  match /{fileId} {
    allow read, 
          write: if request.resource.contentType.matches('image/jpeg')
                 || request.resource.contentType.matches('image/png')
                 || request.resource.contentType.matches('image/gif')
                 && request.resource.size < 2 * 1024 * 1024
    }
  }
}

问题是这些规则也被应用于delete(),因为它也是一个write方法,所以它总是返回一个权限错误.我在文档中找不到任何关于此的内容.如何推迟POST/PUT规则和DELETE规则？

界面：

export interface User {
  id: number;
  name: string;
  foo: string;
  bar: string;
}

如何检查后端返回的对象是否正确实现了用户界面？

我正在尝试注销，然后导航到登录URL，但是此URL中的authguard阻止了登录的用户查看它，并且由于在解决诺言之前已到达第二行，因此您需要单击两次方法事件以使其起作用。

logout(){
    this.angularfire.auth.logout();
    this.router.navigate(['']);
  }

解决承诺后，是否可以在回调中实现router.navigate？我已经尝试了then（），但是我的语法不正确，或者验证类型有问题...

这是我的云功能。它应该获取一个 http 发布的图像并将其上传到存储，返回 url。

exports.uploadImageToEditor = functions.https.onRequest((req, res) => {
        const img = JSON.parse(JSON.stringify(req.body));
        const bucket = admin.storage().bucket();

        return bucket.file('blog/foo.jpg').save(img.data, { 
          resumable: false, 
          metadata: { 
            contentType: 'image/jpeg' 
          } 
        })
          .then(() => {
              return cors(req, res, () => {
                  res.status(200).send({ "url": bucket.file('foo.jpg').getSignedUrl()});
                });
            });
    });

这是图像在客户端中实际发送的方式：

uploadImage(file, endPoint) {
        if (!endPoint) {
            throw new Error('Image Endpoint isn`t provided or invalid');
        }
        const                  formData = new FormData();
        if (file) {
            formData.append('file', file);
            const                  req = new HttpRequest('POST', endPoint, formData, {
                reportProgress: true …

我正在尝试使用 ViewChild 从父组件调用子方法：

...

export class Parent {
  @ViewChild(ProfileImageComponent) profileImage: ProfileImageComponent;
  ...

  updateProfile() {
    ...
    this.profileImage.updateAvatar();
  }
}

问题是这仅适用于父视图中的第一个子组件实例：

...
<profile-image></pofile-image> <!-- only this one gets updated -->
...
<profile-image></pofile-image>
...
<profile-image></pofile-image>
...

如何调用每个 profileImage children 方法以便更新所有内容？

自从将Firebase的Cloud Functions升级到Node8和ES17以来，在尝试更新功能时出现TsLint错误。它抛出Promises must be handled appropriately以下代码：

app.get('*', (req, res) => {
    const isBot = detectBot(req.headers['user-agent']);

    if (isBot) {
        const botUrl = generateUrl(req);
        // If bot, fetch url via rendertron
        fetch(`https://foo.com/render/${botUrl}`)
            .then(rendertronRes => rendertronRes.text())
            .then(body => {
                res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
                res.set('Vary', 'User-Agent');

                res.send(body.toString());
            });
    } else {
        // Not a bot, fetch the regular Angular app
        fetch('https://bar.com/')
            .then(regularRes => regularRes.text())
            .then(body => {
                res.send(body.toString());
            })
            .catch(err => res.send(err));
    }
});

最奇怪的部分是它抱怨第二次获取，而不是第一次获取。

这是我的 firebase.json。我正在尝试将 /sitemaps 重定向到 Firebase 存储中动态生成的站点地图。不幸的是，重写其余路由的通配符会覆盖重定向。指定重写除该 url 之外的所有内容的最佳方式是什么？

    "redirects": [
      {
        "source" : "/sitemaps",
        "destination" : "https://firebasestorage.googleapis.com/v0/b/foo",
        "type" : 301
      }
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "bar"
      }
    ]