Angular2路由器 - 任何人都知道如何在app.ts中使用canActivate,以便我可以重定向到主页,如果没有登录

Question

Angular2路由器 - 任何人都知道如何在app.ts中使用canActivate,以便我可以重定向到主页,如果没有登录

我正在使用打字稿和角度2.

在我的app.ts文件中我的构造函数下的当前尝试:

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

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

它目前没有被击中.知道为什么吗？

Answer 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's components.
  }
}

此实现处理对指令的任何新请求,并运行您的路由验证逻辑所在的activate函数.上面的代码将被称为类似AuthRouterOutlet.你必须通过它将它添加到你的app.ts.

directives: [ AuthRouterOutlet]

Answer 2

使用路由器的新beta版本,您还可以在此处查看有关如何使用CanActivate接口的答案:

/sf/answers/2685896391/

使用其他答案中提到的装饰器也很好.

Answer 3

从这里：

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