Question

我使用RC1和新路由器（不是弃用的路由器）。

我已经阅读了大部分的博客和文档，但我真的无法找到一种惯用的方法，特别是没有使用＆＃34; new＆＃34;路由器。到目前为止，我的应用程序正常运行，并且＃34;完全错过了一些事情：

如何将标记添加到每个单个http请求的Authorization标题中？（就像Angular 1.x中的拦截器一样。）
如何拦截任何40x响应，如果需要（意味着路由受到保护），请导航到另一个网址？
如何设置路由（或组件），以便在用户未登录时应用程序将导航到登录URL？
Bonus：在主要组件的构造函数中加载基本用户数据是不是惯用的？

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

Answer 1

您可以查看实现基本令牌身份验证的Angular 2 Auth，并处理在未经授权的情况下路由到登录页面。对于已弃用的路由器（我猜），但你明白了。

https://github.com/teonite/angular2-auth

Answer 2

不久前我不得不处理同样的问题，并提出了以下解决方案。我不知道它是否是最佳实践，并且非常喜欢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。至于奖金问题，更多的是用例问题。如果您知道在任何情况下都要使用用户的数据，那么预加载用户的数据是有道理的。否则，为了不在启动时使应用程序过载，您只能在需要时加载此数据。

Angular 2 - JWT auth

2 个答案: