Angular6中的REST API和管理Web应用程序

Question

I have fully function Admin panel made using angular6. Following is a sample coding

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'
            }
        ]
    }
];

In 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 { }

Now the AuthGuardService is used to check authentication and redirect users to login etc.

export class AuthGuardService implements CanActivate { private user: Observable; private userDetails: firebase.User = null; public mUser : UsersItem; private 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;                       
     }
}

}

I want to add some separate rest apis to be accessible by some external users. I am not sure how can I add them.

the url should be something like

https://localhost:42xx/api/v1/getData GET

I have tried creating a separate components eg ApiModule however they get redirect to login page.

Is there anyway I can make the system not trigger AuthGuardService for a specific url like above Secondly how can I create REST APi based on angular6

Answer 1

I don't think this is related to auth-guard. The initial routing should be manged by your web server. If the server request has /api/* respond directly from the server. If anything else, respond with static content ie index.html , foo.js , bar.png , etc. To make it work with ng serve , you need to update your proxy.conf.json , as @penleychan mentioned.
See https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md