前端小白必读之Cookie携带

问题描述

某小白是一个只略懂基础三件套和 Angular 框架的前端初学者，这天，小白在写一个带有登录功能的项目，ta 知道想要让服务器记住用户的登录状态，就必须在客户端每次发送请求上带上 Cookie，但 ta 不知道怎么样才能让请求头自动携带 Cookie…

解决方案

在 Angular 官方文档中提供了这样一种方法：通过对请求头进行处理，当配置withCredentials项为true时，允许请求带着 Cookie 一起发送：

那么，怎样才能对请求头进行处理呢？Angular 提供了这样一个接口：HttpInterceptor，中文名为拦截器，顾名思义就是拦截 HttpRequest 并处理，可以实现阻止请求外发，或对请求进行修改后再发出。
因此，我们可以编写一个类来实现该接口，在这个类中我们需要实现方法intercept()：

在获得一个请求后，由于不能直接对请求进行修改，因此需要克隆一个新的请求来处理，具体代码如下：

export class AuthInterceptor implements HttpInterceptor {
    constructor() {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let newReq = req.clone({
            withCredentials: true
        });
        return next.handle(newReq);
    }
}

重新运行后发送请求，已成功带上Cookie：