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

Question

我使用 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 存储帐户中运行？

Answer 1

看来您没有使用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 { }