Angular2 - 星云主题 API 端点答案

【问题标题】：Angular2 - Nebular theme API endpointsAngular2 - 星云主题 API 端点
【发布时间】：2019-12-09 04:28:28
【问题描述】：

我正在 Angular2 下开发应用程序，我选择 Nebular 前端 - https://akveo.github.io/nebular/#/home

文档对我来说不是很详细，而且我不是 Angular2 专家。

我在部分挣扎 - API 端点 https://akveo.github.io/nebular/#/docs/auth/configuring-a-provider

我可以在哪里保存 API 基点？在哪个文件或文件的一部分？

受影响的代码：

{
 baseEndpoint: 'http://...
...

我的代码（core.module.js）：

import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NbEmailPassAuthProvider, NbAuthModule } from '@nebular/auth';

import { throwIfAlreadyLoaded } from './module-import-guard';
import { DataModule } from './data/data.module';
import { AnalyticsService } from './utils/analytics.service';

import { environment } from './../../environments/environment';

const NB_CORE_PROVIDERS = [
  ...DataModule.forRoot().providers,
  ...NbAuthModule.forRoot({
    providers: {
      email: {
        service: NbEmailPassAuthProvider,
        config: {
          delay: 3000,
          login: {
            rememberMe: true,
          },
        },
      },
    },
    forms: {
      validation: {
        password: {
          required: true,
          minLength: 6,
          maxLength: 255,
        },
        email: {
          required: true,
        }
      }
    }
  }).providers,
  AnalyticsService
];

@NgModule({
  imports: [
    CommonModule,
  ],
  exports: [
    NbAuthModule,
  ],
  declarations: [],
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    throwIfAlreadyLoaded(parentModule, 'CoreModule');
  }

  static forRoot(): ModuleWithProviders {
    return <ModuleWithProviders>{
      ngModule: CoreModule,
      providers: [
        ...NB_CORE_PROVIDERS,
      ],
    };
  }
}

【问题讨论】：

标签： api templates angular2-template nebular

【解决方案1】：

我正在尝试使用它，并且我在手册的同一部分。据我所知，baseEndpoint: 'http://... 事物和其他配置在身份验证提供程序config 变量上进行。看起来它属于NgEmailPassAuthProviderConfig 类型（在@nebular/auth/providers/email-pass-auth.options 上定义）。

@NgModule({
  imports: [
   // ...

   NbAuthModule.forRoot({
         providers: {
           email: {
             service: NbEmailPassAuthProvider,
             config: {
                baseEndpoint: 'http://localhost:8080', // <-- here
                login: {
                  rememberMe: true,
                },
             },
           },
         },
       }), 
  ],
});

我已经设法让它在 Spring REST API 上调用 api 方法。我可以使用status: 200 在浏览器上看到 HttpResponse，但仍然收到“哦，快！出了点问题。”NbLoginComponent 上的消息。

【讨论】：

【解决方案2】：

为了正确创建 api，请按照以下步骤操作

1) 在您的本地主机上实现this：

2) 将此代码添加到core.module.ts

 strategies: [
      NbPasswordAuthStrategy.setup({
        name: 'email',
        login: {
          requireValidToken: false,
        },
        baseEndpoint: 'http://localhost:4400/api/auth/',
        logout: {
          redirect: {
            success: '/auth/login',
            failure: '/auth/login',
          },
        },
        requestPass: {
          redirect: {
            success: '/auth/reset-password',
          },
        },
        resetPass: {
          redirect: {
            success: '/auth/login',
          },
        },
        errors: {
          key: 'data.errors',
        },
      }),
    ],

【讨论】：

【解决方案3】：

我建议在项目的根目录下创建一个代理proxy.conf.json，里面有内容

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

然后使用命令启动 Angular 应用程序 $ ng serve --port 8097 --proxy-config proxy.conf.json

记住您在 ng serve 命令中提到的 * 8097 * 端口

完成添加您的基本网址如下：

{
 baseEndpoint: '/api/',
...

有关代理配置的更多信息，请参阅https://morioh.com/p/07bddb33e3ab

希望对你有帮助

【讨论】：