angularjs – Angular 2 – JWT auth

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

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

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

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

解决方法

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