使用条件 HTTP 和 HTTPS 路由进行前端开发

Question

我目前正在使用 MEAN 堆栈进行 Web 开发。我的问题是如何在同一个网站上混合/重定向 HTTP 和 HTTPS 页面？

对于大多数情况，我使用 HTTP 协议与后端通信。对于某些页面，我绝对需要使用 HTTP（例如 /shop 路由，我使用了一个 iframe 来显示来自其他网站的信息。此外，对于某些页面，我需要从其他 API 服务提供商处获取 HTTP GET。）。看来我无法通过 HTTPs 设置来实现这些。

在某些情况下，我使用 HTTPs 与后端通信（例如 /money 路由）...等。显然你需要有钱的 HTTPS。

我的后端设置了中间件，因此如果您使用 HTTP 请求 /money 它将返回一些错误（当前返回 301 已永久移动..）

但我不确定如何进行前端开发。对于 Angular 部分，我应该只做一些配置，所以当路由由 /money 组成时，我只需在 HTTPs 中重新加载整个页面，我是否应该明确确保链接看起来像这样？

<a ng-href="https://www.domain.com/#!/money">money page</a>

但这对我来说似乎是很多硬编码。

我的问题是： 1. 我的想法是否正确？
2. 可行吗？

谢谢，非常感谢任何想法！

Answer 1

这里有几点需要考虑。

首先，是的，当涉及金钱时，您应该始终使用 HTTPS。这里的 S 代表安全，因此您可以想象这意味着常规 HTTP 是不安全的。使用常规 HTTP 时，内容以纯文本形式发送，因此任何可以在此过程中看到请求的人都可以看到并复制其中的内容。因此，如果您正在执行诸如发送财务数据、发送密码/登录请求、发送私人用户数据等操作，则应始终确保使用 HTTPS。

您还应该记住，您不应该在 HTTPS 页面上加载 HTTP 内容，这会导致浏览器警告不安全的内容，甚至直接阻止请求。

无论如何，进入实际问题。是的，你的想法是正确的。当从 HTTP 转到 HTTPS 时，您将不得不完全重新加载页面，但是将 https 硬编码到任何此类链接中都不是一个很好的解决方案。幸运的是，Angular 为我们提供了decorators 指令，允许我们链接他们的行为。您可以使用它来装饰 ngHref，以便在满足某些条件时自行添加 https。

然而，装饰器并不是那么容易上手，或者至少不是我最后一次阅读文档，所以这里有一个可以满足您的需求并且您可以对其进行编辑以涵盖更多情况：

myApp.config(function($provide) {
    $provide.decorator('ngHrefDirective', function($delegate) {
      var original = $delegate[0].compile;
      $delegate[0].compile = function(element, attrs, transclude) {
        if(attrs.ngHref.indexOf('money') !== -1) {
            attrs.ngHref = 'https://example.com/'+attrs.ngHref;
        }
        return original(element, attrs, transclude);
      };
      return $delegate;
    })
});

这将采用任何包含单词 money 的 ng-href 指令，并更改输入数据以包含带有 https 的完整路径。它会变成这样：

<a ng-href="/money">Link that should be re-written</a>
<a ng-href="/other">Link that should not be re-written</a>

会变成这样：

<a href="https://example.com/money>Money link</a>
<a href="/other">Link that should not be re-written</a>