angular2 CanActivate与http

Question

我有一个可以激活的组件

import {isLoggedIn} from '../login/isLoginedIn';

@CanActivate((next, previous) => {
 isLoggedIn()
})    

我的“ isLoggedIn”如下

import {Http, Headers} from 'angular2/http';

class Auth {
    constructor( @Inject(Http)  private _http: Api) { }

    check() {
        this._http.get('/Users/LoggedInUser')
    }
}

export const isLoggedIn = () => {
    let injector = Injector.resolveAndCreate([Auth, Http]);
    let auth = injector.get(Auth);
    return auth.check(); 
};

我无法注入将http作为依赖项的服务。 可以这样做还是有更好的方法呢？

Answer 1

由于CanActivate是修饰器，而不是OnActivate或CanDeactivate因此您可以正确地假定，您无法授权要构造的组件的构造函数依赖项注入。

您正在使用的方法可以使用，但是您的Auth类上缺少@Injectable() 。

import {Injectable} from 'angular2/core';
import {Http, Headers} from 'angular2/http';

@Injectable()
class Auth {
    constructor( @Inject(Http)  private _http: Api) { }

    check() {
        this._http.get('/Users/LoggedInUser')
    }
}

这种方法是合理的，我认为除了一些语法上的糖或较小的重构之外，还没有很多改进的方法，并且仍然可以实现相同的可读性/可维护性。

可以用来改善流程并防止潜在错误的另一种方法是在CanActivate返回可观察的CanActivate以便导航在决定继续或取消之前将等待Http请求完成。

@CanActivate((next, previous) => {
    return isLoggedIn()
})

或简称

@CanActivate(() => isLoggedIn())

（单语句箭头功能会自动返回）