Hi. I am new in ionic and angular and I am trying to create a single page with authentication. I have side menu different for user and visitor. My foled structure looks like this:
./app/
./app/user/profile/
./app/user/logout/
./app/visitor/login/
./app/visitor/registration/
And I am trying to navigate from user/profile folder/page after logout to visitor/login.
When visitor visit the page, he can see this:
After login, I redirected him to another page and after that, he can see this:
But after logout, I only call
`this.router.navigateByUrl(“visitor/login-internal”);, side menu is nowhere and you can see this:
To generate side menu for visitor and user, I am using this code, same for visitor.page.html and user.page.html:
<ion-app>
<ion-split-pane content-id="visitor-menu">
<ion-menu side="start" content-id="visitor-menu">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let page of appPages; let i = index">
<ion-item routerDirection="root" [routerLink]="[page.url]" lines="none" detail="false"
[class.selected]="selectedIndex == i">
<ion-icon [name]="page.icon" slot="start"></ion-icon>
<ion-label>{{ page.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<div class="ion-page" id="visitor-menu">
<ion-content class="ion-padding">
<ion-router-outlet class="ion-page" id="visitor-menu"></ion-router-outlet>
</ion-content>
</div>
</ion-split-pane>
</ion-app>
Pages in the menu is stored in visitor.page.ts and user.page.ts. Here is example of visitor.page.ts, code for user.page.ts is almost equal:
@Component({
selector: 'app-visitor',
templateUrl: './visitor.page.html',
styleUrls: ['./visitor.page.scss'],
})
export class VisitorPage implements OnInit {
public selectedIndex = 0;
public appPages = [
{
title: 'Quick match',
url: '/visitor/quick-match',
icon: 'football'
},
{
title: 'Login',
url: '/visitor/login-internal',
icon: 'log-in'
},
{
title: 'Registration',
url: '/visitor/registration-internal',
icon: 'person-add'
},
{
title: 'Login via Google',
url: '/visitor/login-google',
icon: 'logo-google'
}
];
constructor() { }
ngOnInit() {
}
}
Here is example of visitor-routing.module.ts, user-routing.module.ts is almost equal:
const routes: Routes = [
{
path: '',
component: VisitorPage,
children: [
{
path: 'login-facebook',
loadChildren: () => import('./login-facebook/login-facebook.module').then( m => m.LoginFacebookPageModule)
},
{
path: 'login-google',
loadChildren: () => import('./login-google/login-google.module').then( m => m.LoginGooglePageModule)
},
{
path: 'login-internal',
loadChildren: () => import('./login-internal/login-internal.module').then( m => m.LoginInternalPageModule)
},
{
path: 'registration-internal',
loadChildren: () => import('./registration-internal/registration-internal.module').then( m => m.RegistrationInternalPageModule)
},
{
path: 'quick-match',
loadChildren: () => import('./quick-match/quick-match.module').then( m => m.QuickMatchPageModule)
}
]
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class VisitorPageRoutingModule {}
In app folder, main/root folder, I have almost nothing, only app-routing.module.ts has some of my code:
const routes: Routes = [
{ path: '', redirectTo: 'visitor/login', pathMatch: 'full' },
{
path: 'errors',
loadChildren: () => import('./errors/errors.module').then( m => m.ErrorsPageModule)
},
{
path: 'visitor',
loadChildren: () => import('./visitor/visitor.module').then( m => m.VisitorPageModule),
canLoad: [AuthGuard],
data: { 'accessLevel': AccessLevel.VISITOR }
},
{
path: 'user',
loadChildren: () => import('./user/user.module').then( m => m.UserPageModule),
canLoad: [AuthGuard],
data: { 'accessLevel': AccessLevel.USER }
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
I am sure that I have something absolutely wrong in my routing logic.
Here is ionic info:
Ionic:
Ionic CLI : 5.4.16 (C:\Users\frant\node_modules\ionic)
Ionic Framework : @ionic/angular 5.1.1
@angular-devkit/build-angular : 0.901.6
@angular-devkit/schematics : 9.1.6
@angular/cli : 9.1.6
@ionic/angular-toolkit : 2.2.0
Capacitor:
Capacitor CLI : 2.1.0
@capacitor/core : 2.1.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : browser 6.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)
Utility:
cordova-res : 0.14.0
native-run : 1.0.0
System:
NodeJS : v12.13.0 (C:\Program Files\nodejs\node.exe)
npm : 6.12.0
OS : Windows 10
Application running with command ionic serve on localhost WIN 10 64 bit.
Thank you and sorry for any advice or time what you spend because of my problem.
