2016-08-03 3 views
2

현재 라우터에 ner를 사용하도록 내 앱이 업데이트되었습니다. 나는 보호 된 경로를 제외한 모든 것을했다.각도 2 RC4 라우터 제공 업체

주.

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

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(private _authService: AuthService, protected _router: Router) {} 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean { 

     if (state.url !== '/login' && !this._authService.isLoggedIn()) { 
      this._router.navigate(['/login']); 
      return false; 
     } 

     return true; 
    } 
} 

및 응용 프로그램 경로에

내가 가진 : 나는 오래된 라우팅 및 미세 모두를 사용하는 전

export const routes: RouterConfig = [ 
    { 
    path: '', 
    component: LoginComponent 
    }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'home', component: HomeComponent, canActivate: ['AuthGuard']}, 
    { path: 'charts', component: ChartsComponent}, 
    { path: 'performance', component: PerformanceComponent}, 
    { path: 'news', component: NewsComponent}, 
    { path: 'transactions', component: TransactionsComponent}, 
    { path: 'portfolio', component: PortfolioComponent}, 
    { path: 'crossRates', component: CrossRatesComponent}, 
    { path: 'report', component: ReportComponent}, 
    { path: 'security', component: SecurityPricesComponent}, 
]; 

// Export routes 
export const APP_ROUTER_PROVIDERS = [ 
    provideRouter(routes) 
]; 

내가 auth.guard.ts을 implementeed

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {disableDeprecatedForms, provideForms} from '@angular/forms'; 
import {HTTP_PROVIDERS} from '@angular/http'; 
import 'rxjs/Rx'; 

import {AuthService} from './services/auth.service'; 
import {InsaService } from './services/insa.service'; 

import {AppComponent} from './app.component'; 

import {appStateProvider} from './providers/AppStateProvider' 
// Import configured routes 
import { APP_ROUTER_PROVIDERS } from './app.routes'; 
import {AuthGuard} from './services/auth.guard' 

bootstrap(AppComponent, [appStateProvider, APP_ROUTER_PROVIDERS, AuthService, AuthGuard, HTTP_PROVIDERS, InsaService ,disableDeprecatedForms(), provideForms()]) 
.catch(err => console.error(err)); 

: TS는 다음과 같습니다 . 이제 AuthGuard에 대한 공급자가 없습니다. 내가 부트 스트랩 공급자에 포함 시켰습니다. 생성자 안에 내 app.component.ts에서

내가 가진 :

사용자가 그 안에 기록되어 있지 않은 경우 나 라우터를 업데이트하기 전에
if (this._authService.isLoggedIn()) { 
     this._router.navigate(['/home']); 
    } 
    else { 
     this._router.navigate(['/login']); 
    } 

은 로그인 페이지로 리디렉션, 다른 사람이 홈 페이지 및 사용자 나오지 않았어로 리디렉션 ' 그가 로그인하지 않을 때까지 집에 돌아 가지 않아야합니다. 내가 틀렸고 공급자로서 내 부트 스트랩 방법에 공급자를 포함 시켰기 때문에 왜이 오류가 발생합니까?

감사

+0

처음에 pathMatch: 'full'을 추가해야한다고 생각 , 그 질문은 실제로 내 질문에 대한 답변입니다. 'auth.guard.ts' 코드 덕택에'canActiate (...) '문제를 해결할 수있었습니다. 나는 생성자에'ActivatedRouteSnapshot'을 추가하고 있었지만, 잘못된 방법으로, canActivate에 기본 인자로 추가했습니다. –

답변

3

은 제거 '

에서
canActivate: ['AuthGuard']}, 

canActivate: [AuthGuard]}, 

에 나는 또한 당신이 나에게 발생

{ 
    path: '', 
    component: LoginComponent, 
    pathMatch: 'full' 
    }, 
+2

이제 작동합니다! 그래서 사소한 오류지만, 나는 볼 수 없었다. 고맙습니다! :) –

+0

왜 경로 필드가 빈 문자열입니까? –

+0

@WangXiao 방금 질문에서 복사했습니다. 이 경로는 경로가 주어지지 않을 때 일치합니다. –

관련 문제