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

（單語句箭頭功能會自動返回）