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. 将您的网络服务器配置为重定向到 {root}/index.html当它获得像 auth/callback 这样的子路由时
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 { }