使用条件 HTTP 和 HTTPs 路由的前端开发

Question

我目前正在使用 MEAN 堆栈进行 Web 开发。我的问题是如何在同一网站上 mix/redirect HTTP 和 HTTPs 页面？

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

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

我的后端有中间件设置，所以如果你使用 HTTP 请求 /money 它会 return 一些错误（目前 returning 301 已永久移动..）

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

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

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

我的问题是： 1. 我的思考方向正确吗？
2、可行吗？

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

Answer 1

这里有几点需要考虑。

首先，是的，当涉及到金钱时，您应该始终使用 HTTPS。这里的 S 代表安全，所以你可以想象这意味着常规 HTTP 是不安全的。使用常规 HTTP，内容以纯文本形式发送，因此任何可以看到请求的人都可以看到并复制其中的内容。因此，如果您要发送财务数据、发送 passwords/login 请求、发送私人用户数据等，您应该始终确保使用 HTTPS。

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

无论如何，进入实际问题。是的，您的想法是正确的。当从 HTTP 转到 HTTPS 时，您将不得不重新加载页面，但是将 https 硬编码到任何这样的 link 中并不是一个好的解决方案。幸运的是 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>

使用条件 HTTP 和 HTTPs 路由的前端开发

Front-end development with conditional HTTP and HTTPs routes

angularjs

http

https

frontend