Angular 2 - JWT auth

Question

我正在使用RC1和新路由器(不是已弃用的路由器).

我已经阅读了大部分博客和文档,但我真的找不到一种惯用的方法,特别是没有使用"新"路由器.到目前为止,我的应用程序"完美"工作,只是缺少一些东西:

1. 我应该如何Authorization在每个 http请求上添加令牌到标头？(就像Angular 1.x中的拦截器一样)
2. 我如何拦截任何40x响应,如果需要(意味着路由受到保护)导航到另一个URL？
3. 如何设置路由(或组件),以便在用户未登录时应用程序将导航到登录URL？
4. 额外奖励:在主要组件的contstructor中加载基本用户数据是不是惯用的？

我不需要一个完整的演示或类似的东西,只需要几个要点,我应该去.

Answer 1

不久前我不得不处理同样的问题，并提出了以下解决方案。我不知道这是否是最佳实践，并且非常喜欢 Angular 1 的拦截器作为解决方案，但这对我有用：

我为内置Http服务创建了一个包装服务。当我想使用时，Http我会注入此服务。

@Injectable()
export class HttpWrapper {
    constructor(private loginService:LoginService, private http:Http, private router:Router) {
    }

    get(url: string, options?: RequestOptionsArgs): Promise<Response> {
        let promise: Promise<Response> = this.http.get(url, this.addHeaders(options)).toPromise();
        return new Promise((resolve, reject) => {
            promise.then(success => {
                resolve(success);
            }, error => {
                this.onError(error);
                reject(error);
            });
        });
    }

    //... repeat the same concept for post, put, delete...

    private addHeaders(otherOptions?: RequestOptionsArgs): RequestOptions {
        let headers = new Headers({'Content-Type': 'application/json', token: this.loginService.token});
        let options = new RequestOptions({ headers: headers });
        if (otherOptions) {
            options.merge(otherOptions);
        }
        return options;
    }

    private onError(reason) {
        if(reason.status === 401) {
            this.router.navigateByUrl(`/login?${encodeURIComponent(this.router.lastNavigationAttempt)}`);
        }
    }
}  

*请注意，我使用的是已弃用的路由器。我正在等待 Angular 团队正确记录新的内容。

我认为这几乎回答了你的问题 1-3。至于奖励问题，更多的是用例问题。如果您知道在任何情况下都将使用用户的数据，那么预加载用户的数据就有意义。否则，为了不让应用程序一开始就过载，您只能在需要时加载此数据。