2016-09-06 9 views
0

Я пытаюсь выполнить проверку подлинности на пару дней, но я все еще не могу запустить свою функцию canActivate. Мой охранник аутентификации выглядит следующим образом (что, очевидно, не на самом деле охрана ничего):Угловой 2 маршрутизатор с защитой входа

import { Injectable } from 'angular2/core'; 
import { Observable } from "rxjs/Rx"; 

@Injectable() 
export class LoggedInGuard implements CanActivate { 
    constructor() {} 

    canActivate():Observable<boolean>|boolean { 
    console.log('AuthGuard#canActivate called'); 
    return true; 
    } 
} 

И мое приложение компонент, который импортирует охрану и реализует маршрутизатор выглядит следующим образом:

import { Component } from 'angular2/core'; 
import { HTTP_PROVIDERS } from 'angular2/http'; 
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'; 
import 'rxjs/Rx'; // load the full rxjs 

import { CharacterListComponent } from './characters/character-list.component'; 
import { VehicleListComponent } from './vehicles/vehicle-list.component'; 


import { LoggedInGuard } from './login.guard.ts' 

@Component({ 
    selector: 'story-app', 
    templateUrl: 'app/app.component.html', 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ 
    HTTP_PROVIDERS, 
    ROUTER_PROVIDERS, 
    LoggedInGuard 
    ] 
}) 
@RouteConfig([ 
    { path: '/characters', name: 'Characters', component: CharacterListComponent, useAsDefault: true }, 
    { path: '/vehicles', name: 'Vehicles', component: VehicleListComponent, canActivate: [LoggedInGuard] } 
    ]) 
export class AppComponent { } 

Каждый раз, когда LoggedInGuard запускается функция canActivate, должна быть сделана запись в журнале. При навигации по ссылкам запись никогда не выполняется, то есть функция никогда не запускается. Вы можете увидеть Plunker в действии here.

Любое понимание было бы весьма признателен ... Я уверен, что это будет легко один для кого-то более знаком с угловым 2.

+0

Эй, у меня тоже такая проблема, вы нашли какое-либо решение для этого, пожалуйста, поделитесь – Sujithrao

+0

@Sujithrao, какая версия Angular 2 вы используете? Там есть множество релизов, и вы можете найти документацию (в виде сообщений в блогах, видеороликов YouTube и вопросов SO) для многих из них. Убедитесь, что вы используете Angular 2.xx (и НЕ кандидат-релиз), не пытайтесь применять примеры до 15 сентября 2016 года и старайтесь использовать [официальные угловые документы] (https://angular.io/docs/ts/latest /) – dslosky

ответ

1

Вы используете способ старую версию Угловых 2, попробуйте обновить приложение в RC6, если это возможно,

Вы можете посмотреть в новые ссылки,

Routing & Navigation

Также угловая команда создала Plunker демонстрации концепции. включая проверку подлинности.

Надеюсь, что это поможет!

+0

Упс! Я использую 2.0.0-beta.17 локально (что, я уверен, RC6, верно?), И я обновил Plunker, чтобы сделать то же самое. Я также упростил пример Plunker и обновил свой оригинальный вопрос, чтобы это отразить. Моя проблема все еще сохраняется, и я буду чрезвычайно благодарен за любую дополнительную информацию. – dslosky

+0

Нет ее не [2.0.0-beta.17] (https://github.com/angular/angular/blob/master/CHANGELOG.md#200 -beta17-2016-04-28) устарел, Текущая версия RC6, проверьте Plunker, который я добавил в ответ о том, как настроить то же самое. –

+0

О, вау, спасибо за эту ссылку ... Я работал с этим Плункером раньше, и это очень полезно! Я не могу использовать Node и npm в своем проекте, поэтому моя реализация должна быть немного иной, но я буду обновляться до RC6, и если все будет хорошо, у вас будет ответ :) – dslosky

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