angularjs - Angular 2 - JWT 认证

Question

我将 RC1 与新路由器(不是已弃用的路由器)一起使用。

我已经阅读了那里的大部分博客和文档，但我真的找不到一种惯用的方法来做到这一点，尤其是"new"路由器。到目前为止，我的应用程序运行“完美”，只是缺少一些东西:

1. 我应该如何将 token 添加到每个 单个http 请求的Authorization header 中？ (就像 Angular 1.x 中的拦截器一样)
2. 我如何拦截任何 40x 响应并在需要时(意味着路由受到保护)导航到另一个 url？
3. 如何设置路由(或组件)，以便应用在用户未登录时导航至登录 URL？
4. 奖励:在主组件的构造函数中加载基本用户数据是否符合习惯？

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

Answer 1

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

我为内置的 Http 服务创建了一个包装器服务。当我想使用 Http 时，我改为注入(inject)此服务。

@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。至于奖金问题，更多的是用例问题。如果您知道在任何情况下都将使用用户数据，那么预加载用户数据就很有意义。否则，为了不让应用程序一开始就重载，您只能在需要时加载此数据。