Я пытаюсь сделать приложение доступным только после входа в систему с использованием Ionic 4 (4.10.2 с Angular 7.3.1).После выполнения этого урока (https://devdactic.com/ionic-4-login-angular/) я не могу перейти к той части моего приложения, которая использует ion-tabs. Chrome всегда показывает это в журнале консоли: «Uncaught (in обещание): Ошибка: невозможно сопоставить ни один маршрут». URL Segment: 'members / tab1' "
Приложение будет использовать Laravel-backend, и я хочу использовать токены для защиты соединения. Но пока я использую только фиктивный токен из учебника.Когда я пытаюсь связать что-то отличное от вкладок после входа в систему, он работает просто отлично, но это не решает мою проблему.
Маршрутизация в app-routing.module.ts:
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', loadChildren: './public/login/login.module#LoginPageModule' },
{ path: 'register', loadChildren: './public/register/register.module#RegisterPageModule' },
{
path: 'members',
canActivate: [AuthGuard],
loadChildren: './members/member-routing.module#MemberRoutingModule'
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
member-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: 'message', loadChildren: './message/message.module#MessagePageModule' },
{ path: 'playerview', loadChildren: './playerview/playerview.module#PlayerviewPageModule' },
{ path: 'playerlist', loadChildren: './playerlist/playerlist.module#PlayerlistPageModule' },
{ path: 'teamview', loadChildren: './teamview/teamview.module#TeamviewPageModule' },
{ path: 'teamlist', loadChildren: './teamlist/teamlist.module#TeamlistPageModule' },
{ path: 'teammanagement', loadChildren: './teammanagement/teammanagement.module#TeammanagementPageModule' }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MemberRoutingModule { }
InitialiseApp от app.component.ts:
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this.authenticationService.authenticationState.subscribe(state => {
if (state) {
this.router.navigate(['members', 'tabs']);
} else {
this.router.navigate(['login']);
}
});
});
}
Маршрутизация в tabs.router.module.ts:
const routes: Routes = [
{
path: 'tabs',
canActivate: [AuthGuard],
component: TabsPage,
children: [
{
path: 'tab1',
children: [
{
path: '',
canActivate: [AuthGuard],
loadChildren: '../tab1/tab1.module#Tab1PageModule'
}
]
},
{
path: 'tab2',
children: [
{
path: '',
canActivate: [AuthGuard],
loadChildren: '../tab2/tab2.module#Tab2PageModule'
}
]
},
{
path: 'tab3',
children: [
{
path: '',
canActivate: [AuthGuard],
loadChildren: '../tab3/tab3.module#Tab3PageModule'
}
]
},
{
path: 'tab4',
children: [
{
path: '',
canActivate: [AuthGuard],
loadChildren: '../tab4/tab4.module#Tab4PageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
canActivate: [AuthGuard],
redirectTo: '/members/tabs/tab1',
pathMatch: 'full'
}
];
Моя пробная кнопка входа в систему в login.page.html:
<ion-button (click)="login()" expand="block" routerLink="../members/tab1">Login</ion-button>
После того, как вы нажмете кнопку входа, я хочу, чтобы пробная регистрация запомнила, что вы вошли в систему и чтоВы можете видеть навигацию по вкладкам и страницы.
Если мне нужно добавить auth.guard.ts или anytХинг, пожалуйста, скажите мне.Заранее спасибо!