2016-08-03 2 views
2

Я в настоящее время обновляю свое приложение, чтобы использовать ner Router. Я сделал все, кроме защищенных маршрутов.Угловые 2 провайдера маршрутизатора RC4

главный. ц выглядит следующим образом:

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)); 

I implementeed auth.guard.ts:

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) 
]; 

До этого я использовал старый маршрут и все прекрасное , Теперь у меня есть messsage «Нет провайдера для AuthGuard!» althoug Я включаю его в своих бутстраповских провайдеров.

В моих app.component.ts внутри конструктора У меня есть:

if (this._authService.isLoggedIn()) { 
     this._router.navigate(['/home']); 
    } 
    else { 
     this._router.navigate(['/login']); 
    } 

Перед тем как я обновил маршрутизатор, если пользователь не вошел в него перенаправлены на страницу входа в систему, иначе она перенаправляется на главную страницу и пользователя не мог» я вижу дома, пока он не войдет в систему. Где я ошибаюсь и почему я получаю эту ошибку, так как я включил провайдера в мой метод начальной загрузки в качестве поставщика?

Благодаря

+0

Первый раз это происходит со мной , что вопрос действительно отвечает на мой вопрос. Благодаря вашему коду 'auth.guard.ts', я смог исправить проблему, с которой я столкнулся с' canActiate (...) '. Я добавлял «ActivatedRouteSnapshot» в конструкторе, но, похоже, это был неверный путь, добавив его в 'canActivate' в качестве аргумента по умолчанию. –

ответ

3

' Удалите из

canActivate: ['AuthGuard']}, 

в

canActivate: [AuthGuard]}, 

Я также думаю, что вы должны добавить pathMatch: 'full' к

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

Теперь он работает! Так тривиальная ошибка, но я не мог видеть. Спасибо! :) –

+0

Почему пустая строка пути? –

+0

@WangXiao Я только что скопировал ее из вопроса. Этот маршрут совпадает, если не указан путь. –

Смежные вопросы