Firebase SPA 重写规则不重定向到 index.html答案

【问题标题】：Firebase SPA rewrite rules not redirecting to index.htmlFirebase SPA 重写规则不重定向到 index.html
【发布时间】：2019-12-14 12:21:37
【问题描述】：

我刚开始使用 AngularJS 框架在 Firebase 主机上构建一个单页应用程序。我已经运行firebase init 并选择将所有url 重写为/index.html 如下所示：

"hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },

我的局部视图模板存储在以下文件夹中：

public/templates/home/dashboard.html
public/templates/courses/default.html

我的 Angular 路由 工作正常，并让我的 public/index.html 检查授权访问，包括那些部分视图，如果用户尚未通过身份验证，则将用户重定向到登录视图。

但是，当我尝试将模板 HTML 文件的 URL 直接粘贴到浏览器地址栏时，Firebase 不会重定向到/index.html： p>

http://localhost:5000/templates/home/dashboard.html
http://localhost:5000/templates/courses/default.html

以上所有模板文件都加载到浏览器上，任何知道这些模板文件 URL 的未经授权的用户都可以查看这些文件。我尝试将以下规则添加到我的 firebase.json 文件中，但它们都不起作用：

测试 #1：

"rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }, 
      {
        "source": "/templates/**/.*",
        "destination": "/index.html"
      }
    ]

测试 #2：

"rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }, 
      {
        "source": "/templates{,/**}",
        "destination": "/index.html"
      }
    ]

注意：我每次尝试都重新启动firebase serve，但我不确定缓存是否会影响这种类型的测试。我也不知道怎么清除服务器缓存。

我的问题是：

在直接访问这些部分视图模板时，为了将用户重定向到/index.html，编写 url 重写规则的正确方法是什么？
如果无法通过 Firebase url 重写规则阻止对部分视图模板的直接访问，出于安全目的，我还有其他方法可以阻止这种情况吗？

【问题讨论】：

标签： angularjs firebase single-page-application firebase-hosting firebase-tools

【解决方案1】：

Firebase 托管服务的静态内容优先于动态重写。 See this hosting order.

如果您不希望直接访问这些视图，您可以将它们移动到云功能并设置您的主机以重新路由“模板”以服务于该云功能。然后您可以配置您的云功能以根据需要提供/拒绝访问。

【讨论】：

如果我迁移到云功能，那么我的 Angular templateUrl 呢？我尝试在firebase.json 中设置301 重定向，从源/templates/home/dashboard.html 到/ 的第一个条目正在工作，但是从源/templates/courses/default.html 到/course 的第二个条目，它也对应于我的$routeProvider 配置，无法正常工作：Chrome 显示You can wait for it to become responsive or exit page.。知道它有什么问题吗？
抱歉，301 重定向似乎也不起作用，它似乎与需要以编程方式执行 http 请求 的 Angular 的 templateUrl 冲突。

【解决方案2】：

使用重定向而不是重写

"hosting": {
    "redirects": [ {
        "source": "/foo",
        "destination": "/bar",
        "type": 301
    } ]
}

将 ** 添加到 source 以在 destination 附加 URL 字符串。

例如

"hosting": {
    "redirects": [ {
        "source": "/foo**",
        "destination": "/bar",
        "type": 301
    } ]
}

导致/foo?var=bar 重定向到/bar?var=bar

请参阅Configure redirects 了解更多信息。

【讨论】：