Angular2 Маршрутизатор. Кто-нибудь знает, как использовать canActivate в app.ts, чтобы я мог перенаправлять на домашнюю страницу, если вы не вошли в систему

Angular2 Маршрутизатор - любой пользователь знает, как использовать canActivate в app.ts, чтобы я мог перенаправить на домашнюю страницу, если не был зарегистрирован

Я использую typescript и angular 2.

Текущая попытка моего конструктора в файле app.ts:

   canActivate(instruction) {           
               console.log("here - canActivate");
               console.log(instruction);

               this.router.navigate(['Home']);  
   }

В настоящее время он не попадает. Любая идея почему?

Ответ 1

Итак, документация похожа на то, что она экспортирует.

export CanActivate(options : CanActivateAnnotation) : (hook: (next: ComponentInstruction, prev: ComponentInstruction) =>
                     Promise<boolean>| boolean) => ClassDecorator

@CanActivate((next, prev) => {
      // This must prove to be true for the component @ this route to load
      if(next.urlPath != '/Login'){ 
         return Promise.resolve(this._authService.getIsAuth() 
         && localStorage.getItem('authToken')
      }
      /*
       If CanActivate returns or resolves to false, the navigation is 
       cancelled. If CanActivate throws or rejects, the navigation is also
       cancelled. If CanActivate returns or resolves to true, navigation 
       continues, the component is instantiated, and the OnActivate hook of 
       that component is called if implemented.
      */
   }
);

В нижней части документа Angular2 добавлен этот фрагмент: экспортируется из angular2/router https://angular.io/docs/ts/latest/api/router/CanActivate-decorator.html

Итак, если вы хотите перенаправлять с более высокого уровня. Вы бы не использовали декоратор CanActivate, вы бы сделали следующее.

import {Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/core';
import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router';
import {Login} from '../login/login';
import {UserService} from '../../Services/userService'; // a service to handle auth

@Directive({
  selector: 'router-outlet'
})
export class AuthRouterOutlet extends RouterOutlet {
  publicRoutes: any;
  private parentRouter: Router;

  constructor(private _userService:UserService, _elementRef: ElementRef, _loader: DynamicComponentLoader,
              _parentRouter: Router, @Attribute('name') nameAttr: string) {
    super(_elementRef, _loader, _parentRouter, nameAttr);

    this.parentRouter = _parentRouter;
    this.publicRoutes = {
      '/login': true,
      '/signup': true
    };
    // publicRoutes will be the routes auth is not needed for.
  }

  activate(instruction: ComponentInstruction) {
    var url = this.parentRouter.lastNavigationAttempt;
    if (!this.publicRoutes[url] && this._userService.getAuth()) {
      // todo: redirect to Login, may be there a better way?
      this.parentRouter.navigateByUrl('/login');
    }
    return super.activate(instruction);
    // we return super.activate(instruction) here so the router can activate the requested route and it components.
  }
}

Эта реализация обрабатывает любой новый запрос директивы и запускает функцию активации, где будет логика проверки маршрута. Вышеупомянутый код будет называться чем-то вроде AuthRouterOutlet. и вы должны добавить его в свой app.ts через

directives: [ AuthRouterOutlet]

Ответ 2

С новой бета-версией маршрутизатора вы также можете увидеть мой ответ о том, как использовать интерфейс CanActivate:

fooobar.com/questions/68570/...

Использование декоратора, как указано в другом ответе, тоже хорошо.

Ответ 3

Эти ответы больше не действительны в кандидате RC с 22/6/16.

Существует много нового решения для аннотации @CanActivate, но вы можете вернуться к использованию версии angular-2/router-deprecated в промежуточный период.

Если вы хотите следить за обновлениями в этой области, если хотите использовать новую реализацию маршрутизатора, проверьте эти две проблемы github:

Извините, что сейчас нет полного ответа, если я увижу дальнейший прогресс в этом, я обновлю этот ответ. Я также ищу элегантное решение.

В промежутке времени я просто использовал ngIf='fooObject' в div для проверки того, что объект, используемый в дочерней директиве, заполняется/правдиво, а затем отображает остальные компоненты html. Это не идеально, но он работает последовательно прямо сейчас. Может помочь вам или нет в зависимости от вашего варианта использования. Мне не нужно перенаправлять, только проверка моих данных разрешена для отображения моего компонента.

Ответ 4

Отсюда:

https://angular.io/docs/ts/latest/api/router/CanActivate-decorator.html

CanActivate представляет собой аннотацию, а не функцию. Вы используете его следующим образом:

@Component({selector: ... })
@CanActivate(()=>console.log('Should the component Activate?'))
class AppComponent {

}

routerOnActivate Является функцией, которую вы используете внутри своего компонента:

https://angular.io/docs/ts/latest/api/router/OnActivate-interface.html

Ответ 5

@CanActivate удален. Подробнее здесь.

Теперь вы должны использовать route.canActivate