Angular CLI + Windows 身份验证后端



我创建了一个 Angular CLI 项目,该项目对包含 Web api 服务的后端项目进行了代理引用。

launchSettings.json(后端项目(:

...
  "iisSettings": {
    "windowsAuthentication": true,
    "anonymousAuthentication": false,
    "iisExpress": {
      "applicationUrl": "http://localhost:10863/",
      "sslPort": 0
    }
  },
...

proxy.conf.json(前端项目(:

{
  "/api": {
    "target": "http://localhost:10863",
    "secure": false,
    "logLevel": "debug"
  }
}

package.json(前端项目(:

...
"scripts": {
    "ng": "ng",
    "start": "start http://localhost:4200 && ng serve --proxy-config proxy.conf.json",
    "build": "ng build --prod --output-path=..\CoreTest\wwwroot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
...

然后我启动后端并通过运行 npm start 启动 Kestrel 网络服务器。使用 angular2 服务,我对其中一个后端服务执行 http-get 操作。由于后端服务在具有Windows身份验证的IISExpress中运行(我想要 Windows 身份验证(,我收到 401 错误。

我可以做npm run build并浏览到我的 IISExpress url 并加载索引.html正如 ng build 发布的那样,但我想使用 ng serve 方法,因为开发更流畅,因为 ng serve 在内存中工作。

我的问题是:如何在开发过程中将Angular CLI与Windows身份验证一起使用?

对于它的价值,更好的解决方案是使用代理 js 文件 https://github.com/angular/angular-cli/issues/5627#issuecomment-289381319

我在这里发现了一个黑客:http://www.meekdeveloper.com/angular-cli-asp-net-core-windows-authentication/它有效。我的后端项目现在可以使用 User.Identity.Name 正确识别调用用户。这真的是一个黑客,如果 Angular CLI 可以正式支持这一点,那就太好了!

希望这有帮助。

创建一个包含以下内容的文件 proxy.conf.json(将目标 url 替换为后端的 url(:

{
    "/api": {
        "target": "http://localhost:20938",
        "secure": false
    }
}

创建一个文件 proxy.conf.js 包含以下内容(将目标 url 替换为后端的 url(:

const Agent = require("agentkeepalive");
module.exports = {
    '/api': {
        target: "http://localhost:20938",
        secure: false,
        agent: new Agent({
            maxSockets: 100,
            keepAlive: true,
            maxFreeSockets: 10,
            keepAliveMsecs: 100000,
            timeout: 6000000,
            keepAliveTimeout: 90000
        }),
        onProxyRes: proxyRes => {
            const key = "www-authenticate";
            proxyRes.headers[key] = proxyRes.headers[key] &&
                proxyRes.headers[key].split(",");
        }
    }
};

将这一行放在 package.json 文件中的"脚本"部分:

"start": "ng serve --proxy-config proxy.conf.json --o --port 4200"

运行npm start .

最新更新