Question

我有一个可以激活的组件

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

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

我的＆＃34; isLoggedIn＆＃34;如下

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的方法，因此您可以正确地假设您尝试授权的组件的构造函数依赖项注入是不是一种选择。

您正在使用的方法有效，但@Injectable()课程中遗漏了Auth。

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中的observable，以便导航将等待Http请求完成后再决定继续或取消。

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

或简称

@CanActivate(() => isLoggedIn())

（单个语句箭头函数自动返回）

angular2 CanActivate with http

1 个答案: