REST API 以及 Angular6 中的 Admin Web 应用程序答案

【问题标题】：REST API along with Admin web app in angular6REST API 以及 Angular6 中的 Admin Web 应用程序
【发布时间】：2019-01-21 17:47:37
【问题描述】：

我有使用 angular6 制作的功能齐全的管理面板。以下是示例编码

export const AppRoutes: Routes = [
    {
        path: 'login',
        component: LoginComponent,
    },
    {
        path: '',
        component: CommonLayoutComponent,
        children: [            
            {
                path: 'dashboard',
                loadChildren: './dashboard/dashboard.module#DashboardModule'
            },              
            {
                path: 'help',
                loadChildren: './help/help.modules#HelpModule'
            },     
            {
                path: '404', 
                component: Page404Component, 
                canActivate: [AuthGuardService] 
            },            
            {
                path: '', redirectTo: '/dashboard', pathMatch: 'full'
            },
            {
                path: '**', redirectTo: '/404'
            }
        ]
    }
];

在 AppModule 中

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        RouterModule.forRoot(AppRoutes, { useHash: true }),
        NgbModule.forRoot(),
        FormsModule,
        PerfectScrollbarModule,
        AngularFireModule.initializeApp(environment.firebase),
        NgxSpinnerModule,
        AngularFireDatabaseModule,
        BrowserAnimationsModule,
        ScrollToModule,
    ],    
    declarations: [
        AppComponent,
        CommonLayoutComponent,
        Page404Component,
        LoginComponent,
        Sidebar_Directives,
        DropZoneDirective,
        FileSizePipe
        ],
    providers: [AngularFireStorage, AngularFireAuth, AuthGuardService],
    bootstrap: [AppComponent]
})


export class AppModule { }

现在AuthGuardService 用于检查身份验证并将用户重定向到登录等。

导出类 AuthGuardService 实现 CanActivate { 私人用户：可观察的；私人用户详细信息：firebase.User = null; 公共 mUser : 用户项；私人网址：字符串；

constructor(private authAf : AngularFireAuth, private db : AngularFireDatabase, 
            private router:Router
        ) 
{
    this.user = authAf.authState;
    this.user.subscribe(
      (user) => {
        if (user) {

        }
        else {

        }
      }
    );
}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
{
    const mUrl = state.url;
    console.log(mUrl);
    this.url = mUrl.substr(mUrl.lastIndexOf('/') + 1)
    if (this.userDetails != null) 
    {
      console.log("User Details are not null");
      return true;
    } 
    else
    {
         this.redirectToLogin();
         // Some logic
         this.redirectToDashboard();
         return false;                       
     }
}

}

我想添加一些单独的 rest api 以供某些外部用户访问。我不确定如何添加它们。

网址应该类似于

https://localhost:42xx/api/v1/getData获取

我尝试创建一个单独的组件，例如 ApiModule，但是它们会重定向到登录页面。

无论如何我可以让系统不触发 AuthGuardService 为特定的 url 像上面其次，如何基于 angular6 创建 REST APi

【问题讨论】：

不确定 API 服务器如何与您的 Angular 绑定，它们是否在同一个域中？ localhost:4200?如果是这样，您需要根据您的服务器设置 URL 重写，对于本地开发，您可能可以使用 proxy.conf.json
@penleychan 是的，我想在同一个域上设置，你能解释更多关于 URL 重写的信息吗？基本上我在我的域上有一个功能性的网络应用程序，我想在那里添加一些外部用户用于同一域的 rest api
对于本地开发，github.com/angular/angular-cli/blob/master/docs/documentation/… 您必须为您的生产服务器找到/配置一个依赖于您的主机的服务器。

标签： angular angular6

【解决方案1】：

我认为这与 auth-guard 无关。初始路由应由您的 Web 服务器管理。如果服务器请求有/api/*，则直接从服务器响应。如果还有其他问题，请回复静态内容，即index.html、foo.js、bar.png 等。要使其与ng serve 一起使用，您需要更新您的proxy.conf.json，如@penleychan 所述。
见https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

【讨论】：