Angular 应用托管 Azure 存储容器 - Azure 身份验证回调和路由失败

Question

我使用 NgxAdmin 开发了一个 Angular 8 应用程序并将其托管为 Azure Web 应用程序。它在 NbAuthModule 的帮助下使用 Azure AD Oauth2 身份验证。一切正常。 现在我尝试在 Azure 存储帐户上托管相同的 SPA。我将新的回调 url 添加到 Azure 广告应用注册并更新了 NbOAuth2AuthStrategy.setup-method 中的 redirectUri。

当我调用静态应用程序的基本 URL (https://<projectname>.z6.web.core.windows.net) 时，它会正确重定向到 https://<projectname>.z6.web.core.windows.net/auth/login?return=%2Fpages%2Fdashboard。 我可以通过 Azure Ad 登录。然后 url 更改为 https://<projectname>.z6.web.core.windows.net/auth/callback#access_token=eyJ0eXAiOiJKV1Q... 并且应该重定向到之前定义的 return-url /pages/dashboard。但我得到的只是回调链接上的 404。

此外，如果我尝试打电话，例如直接https://<projectname>.z6.web.core.windows.net/auth/login，它返回一个404（如果我对web应用做同样的事情，就会显示登录组件）。

我做错了什么？是否需要在我的 Angular 代码中进行其他更改以使路由在 Azure 存储帐户中运行？

Answer 1

您似乎没有使用HashLocationStrategy，因此404 可能是因为网络服务器在auth/callback 中没有任何文件夹/文件。你有两个选择：

1. 将您的网络服务器配置为在获得像auth/callback 这样的子路由时重定向到{root}/index.html
2. Use the HashLocationStrategy，它将在您的路由前加上#，例如：

https://<projectname>.z6.web.core.windows.net/#/auth/callback?access_token=eyJ0eXAiOiJKV1Q

https://<projectname>.z6.web.core.windows.net/#/auth/login?return=/#/pages/dashboard

以下是启用哈希定位策略的方法：

@NgModule({   
    imports: [
      /* more imports here */
      RouterModule.forRoot(routes, { useHash: true })
    ],   
    declarations: [
       /* components here */ 
    ],
    providers: [   
       /* services here */ 
    ],
    bootstrap: [ AppComponent ]
 }) 
 export class AppModule { }

Answer 2

当您将 Angular 应用程序部署到服务器时，您需要重写 URL 才能使用路由。 我假设您使用的是 iis 服务器并将以下内容添加到 web.config

<system.webServer>
 <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

Source

或者您可以添加 Hash Location 策略，这会在路由开始前生成 #（例如：https://sample.com/#/login）

在 app.module.ts 中

import {LocationStrategy, HashLocationStrategy} from '@angular/common';

导入后向提供者添加以下行。

{provide: LocationStrategy, useClass: HashLocationStrategy}

例如：

providers: [AuthService, 
            AuthGuard, 
            FlxUiDataTable,
            {provide: LocationStrategy, useClass: HashLocationStrategy}] 

Source

希望这会有所帮助。谢谢