5

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

当我调用静态应用程序 ( https://<projectname>.z6.web.core.windows.net) 的基本 url 时，它会正确重定向到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直接调用 eg，它会返回 404（如果我对 Web 应用程序执行相同操作，则会显示登录组件）。

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

4

2 回答 2

2

看起来您没有使用HashLocationStrategy，因此 404 可能是因为网络服务器在auth/callback. 你有两个选择：

  1. {root}/index.html将您的网络服务器配置为在获得子路由时重定向到auth/callback
  2. 使用 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 { }
于 2020-01-31T16:48:32.327 回答
0

当您将 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>

来源

或者您可以添加 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}]

来源

希望这有帮助。谢谢

于 2020-02-04T19:49:54.453 回答