2017-01-06 17 views
3

私が困ってガードを使用して、元のナビゲーションルートをキャプチャを抱えているにガードとルートをリダイレクトアンギュラ2.私のサイトが承認ガードによって保護されたコアモジュール、および保護されていないのログインページで構成されていキャプチャAngular2

コアモジュールには独自のアプリケーションルートファイルが定義されており、未定義ルートはルートパスにリダイレクトされます。

私のトップレベルのルーティングモジュールです。

import { NgModule }    from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { AuthGuard }    from './auth'; 

const routes: Routes = [ 
    // Login module is public 
    { path: 'login', loadChildren: 'app/auth/auth.module#AuthModule' }, 

    // Core route protected by auth guard 
    { path: '',  loadChildren: 'app/core/core.module#CoreModule', canLoad: [AuthGuard] }, 

    // otherwise redirect to home 
    { path: '**',  redirectTo: '' } 
]; 

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

ここにAuthGuardクラスがあります。

import { Injectable } from '@angular/core'; 
import { Router, CanLoad, Route } from '@angular/router'; 
import { AuthService } from './auth.service'; 

@Injectable() 
export class AuthGuard implements CanLoad { 

    constructor(
    private authService: AuthService, 
    private router: Router 
) {} 

    canLoad(route: Route): boolean { 
    this.authService.redirectUrl = `/${route.path}`; 
    console.log('path:' + route.path); 

    if (this.authService.isLoggedIn()) { 
     return true; 
    } else { 
     this.router.navigate(['/login']); 
     return false; 
    } 
    } 
} 

これは非常に簡単ログインです/スキームをリダイレクトする、しかしroute.path値に関係なく、私が何にナビゲートURLの、常に空です。私はそれが{ path: '**', redirectTo: '' }ルートと何か関係があると思っていますが、わかりません。ユーザーが実際にログインしている場合、私は唯一のメインモジュールがロードされたいので、私はcanActivateを使用したくない

私が期待したものは、私が/foobarに移動した場合、その後route.pathがでfoobarのように設定されるだろうということでしたAuthGuardクラスですが、そうではありません。したがって、私は、ユーザーがログインした後に、正しいリダイレクトを行うことができません、常に空ですpathMatchを追加

+0

はどのようにして 'リダイレクションのためroute.path'を使用していますか? –

+0

ルートは 'this.authService.redirectUrl'に保存され、ユーザーがログインするとそのパスに手動でリダイレクトされます。これは私の意図です。とにかくパスは常に空であるため動作しません。 –

+0

'this.authService.redirectUrl ='/$ {route.path} '' - 'route.path'が使われる場所は? –

答えて

0

試してみてください。このような「フル」:

{パス「**」、redirectTo ' 」、pathMatch: '' フル}

または

import {CanActivate, RouterStateSnapshot, ActivatedRouteSnapshot} from "@angular/router"; 
import { Subscription, Observable } from "rxjs/Rx"; 



export class HomepageGuard implements CanActivate { 


canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean { 
    console.log(`[homepage.guard.ts]-[canActivate()]`); 
    console.log(route); 
    console.log(state); 
    // are you allowed to continue 
    return true; 
} 

}