基本上当下的应用都会分为前端与后端，当然这种前端定义不在限于桌面浏览器、手机、APP等设备。一个良好的后端会通过一套所有前端都通用的 RESTful API 序列接口作为前后端之间的通信。
这其中对于身份认证都不可能再依赖传统的Session或Cookie；转而使用诸如OAuth2、JWT等这种更适合API接口的认证方式。当然本文并不讨论如何去构建它们。
一、API 设计
首先虽然并不会讨论身份认证的技术，但不管是OAuth2还是JWT本质上身份认证都全靠一个 Token 来维持；因此，下面统一以 token 来表示身份认证所需要的值。
一套合理的API规则，会让前端编码更优雅。因此，希望在编写Angular之前，能与后端相互达成一种“协议”也很有必要。可以尝试从以下几点进行考虑。
版本号
可以在URL（例：https://demo.com/v1/）或Header（例：headers: { version: 'v1' } ）中体现，相比较我更喜欢前者的直接。
业务节点
以一个节点来表示某个业务，比如：
商品 https://demo.com/v1/product/
商品SKU https://demo.com/v1/product/sku/
动作
由HTTP动词来表示：
GET 请求一个商品 /product/${ID}
POST 新建一个商品 /product
PUT 修改一个商品 /product/${ID}
DELETE 删除一个商品 /product/${ID}
统一响应
这一点非常重要，特别是当我们新建一个商品时，商品的属性非常多，但如果我们缺少某个属性时。可以使用这样的一种统一的响应格式：
{ "code": 100, // 0 表示成功 "errors": { // 错误明细 "title": "商品名称必填" } }
其中 code 不管成功与否都会有该属性。
状态码
后端响应一个请求是包括状态码和响应内容，而每一种状态码又包含着不同的含义。
200 成功返回请求数据
401 无权限
404 无效资源
二、如何访问Http？
首先，需要导入 HttpClientModule 模块。
import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ HttpClientModule ] })
然后，在组件类注入 HttpClient。
export class IndexComponent { constructor(private http: HttpClient) { } }
最后，请求点击某个按钮发送一次GET请求。
user: Observable<User>; getUser() { this.user = this.http.get<User>('/assets/data/user.json'); }
打印结果：
{{ user | async | json }}
三个简单的步骤，就是一个完整的HTTP请求步骤。
然后，现实与实际是有一些距离，比如说身份认证、错误处理、状态码处理等问题，在上面并无任何体现。
可，上面已经足够优雅，要让我破坏这种优雅那么此文就变得无意义了！
因此……
三、拦截器
1、HttpInterceptor 接口
正如其名，我们在不改变上面应用层面的代码下，允许我们把身份认证、错误处理、状态码处理问题给解决了！
写一个拦截器也是非常的优雅，只需要实现 HttpInterceptor 接口即可，而且只有一个 intercept 方法。
@Injectable() export class JWTInterceptor implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> { // doing } }
intercept 方法有两个参数，它几乎所当下流行的中间件概念一般，req 表示当前请求数据（包括：url、参数、header等），next 表示调用下一个“中间件”。
2、身份认证
req 有一个 clone 方法，允许对当前的请求参数进行克隆并且这一过程会自行根据一些参数推导，不管如何用它来产生一个新的请求数据，并在这个新数据中加入我们期望的数据，比如：token。
const jwtReq = req.clone({ headers: req.headers.set('token', 'xxxxxxxxxxxxxxxxxxxxx') });
当然，你可以再折腾更多请求前的一些配置。
最后，把新请求参数传递给下一个“中间件”。
return next.handle(jwtReq);
等等，都 return 了，说好的状态码、异常处理呢？
3、异常处理
仔细再瞧 next.handle 返回的是一个 Observable 类型。看到 Observable 我们会想到什么？mergeMap、catch 等一大堆东西。
因此，我们可以利用这些操作符来改变响应的值。
mergeMap
请求过程中会会有一些过程状态，比如请求前、上传进度条、请求结束等，Angular在每一次这类动作中都会触次 next。因此，我们只需要在返回 Observable 对象加上 mergeMap 来观察这些值的变更，这样有非常大的自由空间想象。