Я создал логин со страницами меню в ionic.Я не могу перейти на страницу меню после этапа аутентификации.Это тоже не показывало ошибку.Не могли бы вы мне помочь?
Вот мой код, который я пробовал.
app.routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './guards/auth.guard';
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', loadChildren: './public/login/login.module#LoginPageModule' },
{
path: 'menu', canActivate: [AuthGuard],
loadChildren: './protected/menu/menu.module#MenuPageModule'
},
{
path: 'reportlist', canActivate: [AuthGuard],loadChildren: './reportlist/reportlist.module#ReportlistPageModule' },
{ path: 'profile', canActivate: [AuthGuard], loadChildren: './protected/profile/profile.module#ProfilePageModule' },
{ path: 'profile-edit', canActivate: [AuthGuard], loadChildren: './protected/profile-edit/profile-edit.module#ProfileEditPageModule' },
{ path: 'report-detail', canActivate: [AuthGuard], loadChildren: './protected/report-detail/report-detail.module#ReportDetailPageModule' },
{ path: 'report-create', canActivate: [AuthGuard], loadChildren: './protected/report-create/report-create.module#ReportCreatePageModule' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { OraclemcsService } from './services/oraclemcs.service';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
public appPages = [
{
title: 'Login',
url: '/login',
icon: 'login',
render: true
},
/*{
title: 'ReportList',
url: '/reportlist',
icon: 'list',
render: false
}, */
{
title: 'menu',
url: '/menu',
icon: 'list',
render: false
}
];
public stateFlag = false;
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private authService: OraclemcsService,
private router: Router
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this.authService.authenticationState.subscribe(state=>{
if (state) {
this.stateFlag = true;
this.router.navigate(['menu']);
// this.router.navigate(['menu']);
this.appPages = [
{
title: 'profile',
url: '/profile',
icon: 'person',
render: false
},
{
title: 'reportList',
url: '/reportlist',
icon: 'list',
render: false
},
{
title: 'menu',
url: '/menu',
icon: 'list',
render: false
}
];
} else {
this.router.navigate(['login']);
this.stateFlag = false;
this.appPages = [
{
title: 'Login',
url: '/login',
icon: 'log-in',
render: true
}
];
}
});
});
}
logout() {
this.authService.logout();
}
}
login.page.html
<ion-header>
<ion-toolbar>
<ion-buttons slot="end">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title color="primary">Care Mobile</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-grid>
<ion-row justify-content-center>
<ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
<div text-center>
<ion-text color="primary">
<h3>Login</h3>
</ion-text>
</div>
<div padding>
<ion-item>
<ion-input type="text" [(ngModel)]="username" placeholder="Username"></ion-input>
</ion-item>
<ion-item>
<ion-input type="password" [(ngModel)]="password" placeholder="Password"></ion-input>
</ion-item>
</div>
<div padding>
<ion-button color="primary" (click)="login()" expand="block">Login</ion-button>
<!--ion-button (click)="callweblogicservice()" expand="block">CallService</ion-button-->
<!--ion-button (click)="logoutweblogic()" expand="block">weblogic logout</ion-button-->
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
login.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { LoginPage } from './login.page';
const routes: Routes = [
{
path: '',
component: LoginPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [LoginPage]
})
export class LoginPageModule {}
login.page.ts
import { Component, OnInit } from '@angular/core';
import { OraclemcsService } from './../../services/oraclemcs.service';
import { MenuController } from '@ionic/angular';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
public username: string;
public password: string;
constructor(private authService: OraclemcsService, private NavCtrl: MenuController ) { }
ngOnInit() {
}
login() {
console.log('User Name & Password' + this.username + this.password);
this.authService.login(this.username, this.password);
this.password = null;
//code to login to WEBLOGIC
//this.authService.loginWeblogic(this.username , this.password);
}
}
menu.page.html
<ion-split-pane>
<ion-menu contentId="content">
<ion-header>
<ion-toolbar>
<ion-title>CARE</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
<ion-item [routerLink]="p.url" routerDirection="root" [class.active-item]="selectedPath === p.url">
<ion-label>
{{ p.title }}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content" main></ion-router-outlet>
</ion-split-pane>
menu.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { MenuPage } from './menu.page';
import { AuthGuard } from 'src/app/guards/auth.guard';
//import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
//import { AppRoutingModule } from 'src/app/app-routing.module';
const routes: Routes = [
{
path: 'menu',
component: MenuPage,
children:[
{
path: 'reportlist', canActivate: [AuthGuard], loadChildren: './reportlist/reportlist.module#ReportlistPageModule' },
{ path: 'profile', canActivate: [AuthGuard], loadChildren: './protected/profile/profile.module#ProfilePageModule' },
{ path: 'profile-edit', canActivate: [AuthGuard], loadChildren: './protected/profile-edit/profile-edit.module#ProfileEditPageModule' },
{ path: 'report-detail', canActivate: [AuthGuard], loadChildren: './protected/report-detail/report-detail.module#ReportDetailPageModule' },
{ path: 'report-create', canActivate: [AuthGuard], loadChildren: './protected/report-create/report-create.module#ReportCreatePageModule' },
]
},
{
path: '',
redirectTo: './reportlist/reportlist.module#ReportlistPageModule' ,
}
];
@NgModule({
imports: [ CommonModule, FormsModule, IonicModule,
HttpClientModule, RouterModule.forChild(routes)],
exports: [RouterModule],
declarations: [MenuPage]
})
export class MenuPageModule {}
menu.page.ts
import { Component, OnInit } from '@angular/core';
import { Router, RouterEvent } from '@angular/router';
@Component({
selector: 'app-menu',
templateUrl: './menu.page.html',
styleUrls: ['./menu.page.scss'],
})
export class MenuPage implements OnInit {
selectedPath = '';
public pages = [
{
title: 'Profile',
url: '/menu/profile'
},
{
title: 'Report',
url: '/menu/reportlist'
}
];
constructor(private router: Router) {
this.router.events.subscribe((event: RouterEvent) => {
this.selectedPath = event.url;
});
}
ngOnInit() {
}
}
Результат все еще находится на странице входа и не может перейти на другую страницу.Но этап аутентификации пройден, когда я распечатываю.Пожалуйста, помогите мне.