REST API和angular6中的管理web应用程序

我有使用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 { 私人用户：可观察； private userDetails:firebase.User=null； 公共博物馆：UsersItem； 私有url:string

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，以供一些外部用户访问。我不知道如何添加它们

url应该类似于

得到

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

我是否可以让系统不触发AuthGuardService以获取上述特定url

---

其次，如何基于angular6创建RESTAPI我认为这与auth guard无关。初始路由应由web服务器管理。如果服务器请求有

/api/*

直接从服务器响应。如果还有其他问题，请使用静态内容进行响应，例如

index.html

，

foo.js

，

bar.png

，如@penleychan所述，要使其与

ng serve

一起工作，您需要更新您的

proxy.conf.json

。

---

请参见

不确定API服务器如何与您的应用程序绑定，它们是否在同一个域中？如果是这样，您需要根据您的服务器设置URL重写，对于本地开发，您可以使用proxy.conf。json@penleychan是的，我想在同一个域上设置，你能解释更多关于url重写的内容吗。基本上，我的域上有一个功能强大的web应用程序，我想在其中添加rest api，供一些外部用户用于同一个域。对于本地开发，您必须为依赖于主机的生产服务器找到/配置一个rest api。