How to set default component and to change component after function-CodePudding

Two questions: How to i set a "main" component? I currently have 3 components, "App.component" that only includes the header and footer of the app, the PublicPageComponent which is public for everyone and only displays a Msal login button that allows users to log in using their microsoft account and a RestrictedComponent which is only shown to people that are logged in.

Currently: After starting the app, i get thrown into App.component which means i only see the header and footer, after that i need to click on a routerLink in order to switch components to the PublicPage, after i have logged in i need to click on another routerLink which then sends me to the RestrictedPage, how can i make this more seemless?

What i want: To instantly show PublicPage as a default and then automatically change to RestrictedComponent after a successful log-in.

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MaslGuard } from './masl.guard';
import { PublicPageComponent } from './public-page/public-page.component';
import { RestrictedPageComponent } from './restricted-page/restricted-page.component';

const routes: Routes = [{
  path: 'public-page', component: PublicPageComponent
}, {
  path: 'restricted-page', component: RestrictedPageComponent, canActivate: [MaslGuard]
}, {
  path: '', component: PublicPageComponent,
}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

html in AppComponent:

<a id="info" routerLink="public-page">| Information</a>
<a id="rest" routerLink="restricted-page" *ngIf="isLoggedIn()">Best Practice </a>
<router-outlet></router-outlet>

A lot of code and components so let me know if there's more needed.

public-page.component.ts:

  //Logs in User with a redirect window
  login() {
    this.msalService.loginRedirect();
  }

  //Checks if user is logged in
  isLoggedIn(): boolean {
    return this.msalService.instance.getActiveAccount() != null
  }
}

public-page.component.html

<body>
<div id="background">
    <h1>Welcome</h1>
    <button id="logIn" (click)="login()" *ngIf="!isLoggedIn()">Log in </button>
</div>

/Edit 1:

path: '',redirectTo:'public-page', pathMatch:'full'

Adding the above code to app-routing.module.ts solved the first question. Now i only want to go to restricted-page at the end of the login() function in public-page component

CodePudding user response：

Add one more route as default (empty) redirect to public page

{
  path: '',redirectTo:'public-page', pathMatch:'full'
}

CodePudding user response：

I faced same issue apply all possible solution but finally this solve my problem

export class AppRoutingModule {
      constructor(private router: Router) {
         this.router.errorHandler = (error: any) => {
           this.router.navigate(['404']); // or redirect to default route
         }
      }
}

Hope this will help you.

CodePudding user response：

for question 2 you have to change a tags:

<a id="info" routerLink="/public-page">| Information</a>

<a id="rest" routerLink="/restricted-page" *ngIf="isLoggedIn()">Best Practice </a>