始终重定向到首页

时间:2018-10-24 15:44:15

标签: angular routing angular5

当我尝试输入/ candidates url路径时,应用程序总是重定向到主页。其余路径工作正常。 控制台也不会引发任何错误。

路由模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from '../components/login/login.component';
import { UnauthorizedComponent } from '../components/unauthorized/unauthorized.component';
import { WelcomeComponent } from '../components/welcome/welcome.component';
import { AdminComponent } from '../components/questionnaire/admin/admin.component';
import { QuestionPageComponent } from '../components/questionnaire/question-page/question-page.component';
import { ThankYouComponent } from '../components/questionnaire/thank-you/thank-you.component';
import { UserGuard } from '../guards/user/user.guard';
import {CandidatesComponent} from '../components/questionnaire/candidates/candidates.component';

const routes: Routes = [

  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'unauthorized',
    component: UnauthorizedComponent
  },
  {
    path: 'home',
    component: WelcomeComponent,
    canActivate: [UserGuard]
  },
  {
    path: 'candidates',
    component: CandidatesComponent,
    canActivate: [UserGuard]

  },

  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [UserGuard]
  },
  {
    path: 'question-page',
    component: QuestionPageComponent,
    canActivate: [UserGuard]
  },
  {
    path: 'thank-you',
    component: ThankYouComponent,
    canActivate: [UserGuard]
  },

  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  }
];

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

应用组件

import { Component, NgZone, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { UserService } from './services/user/user.service';
import * as firebase from 'firebase/app';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  user;
  constructor(
    public router: Router,
    private userService: UserService,
    private zone: NgZone
  ) {}

  ngOnInit() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.user = user;
        this.zone.run(() => {
          this.router.navigate(['/home']);
        });
      } else {
        this.user = undefined;
        this.router.navigate(['/login']);
      }
    });
  }

  showUserMenu() {
    return !(this.router.isActive('login', true) || this.router.isActive('unauthorized', true));
  }

  logout() {
    this.userService.logout();
  }

  goTo(route) {
    this.router.navigate([route]);
  }


}

用户防护

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { UserService } from '../../services/user/user.service';

@Injectable()
export class UserGuard implements CanActivate {
  constructor(
    public router: Router,
    private userService: UserService
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const user = this.userService.getCurrentUser();
    const ts4 = user && user.email.endsWith('@ts4-inc.com');
    if (ts4) {
      return true;
    } else if (user) {
      this.router.navigateByUrl('unauthorized');
      return false;
    } else {
      this.router.navigateByUrl('login');
      return false;
    }
  }
}

对于此代码,我无法访问路由/候选对象,我只想知道问题出在哪里,它总是重定向到主页。我在做什么错了?

0 个答案:

没有答案