无法从Ionic的登录页面路由到菜单页面

时间：2019-03-25 02:32:01

标签： angular ionic-framework angular-ui-router

我用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() {
  }

}

结果仍然在登录页面上，无法转到另一个页面。但是当我打印输出时，通过了身份验证阶段。请帮助我。

1 个答案:

答案 0 :(得分：0)

我只是删除菜单，并将其留空，如下所示。菜单出现。 

{
path: '',
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' },

]

}

相关问题
最新问题