Angular 16如何捕获Django返回的个性化错误响应

你的问题出在没有正确读取HttpErrorResponse中后端返回的响应体内容。Angular的HttpErrorResponse里，message是框架生成的通用错误描述，而Django返回的个性化错误实际存放在error属性中（注意是HttpErrorResponse对象的error字段，这个字段里才是后端返回的JSON或文本内容）。

修改你的登录服务函数，调整错误捕获逻辑：

login(username: string, password: string): Observable<any> {
    return this.http.post(apiRoot + 'dj-rest-auth/login/', { username, password })
        .pipe(catchError((error: HttpErrorResponse) => {
            let errorMsg = '';
            if (error instanceof ErrorEvent) {
                // 客户端或网络层面的错误
                errorMsg = `客户端错误: ${error.message}`;
            } else {
                // 后端返回的错误，读取error.error获取自定义内容
                if (error.error) {
                    // 处理Django返回的JSON格式错误（比如{"username": ["该用户名不存在"]}）
                    if (typeof error.error === 'object') {
                        // 把对象转成易读的字符串，比如拼接所有错误信息
                        const errorEntries = Object.entries(error.error);
                        errorMsg = errorEntries.map(([key, value]) => `${key}: ${Array.isArray(value) ? value.join(', ') : value}`).join('; ');
                    } else {
                        // 后端返回的是纯文本错误
                        errorMsg = error.error;
                    }
                } else {
                    // 兜底的通用错误信息
                    errorMsg = `错误码: ${error.status}, 消息: ${error.message}`;
                }
            }
            return throwError(() => new Error(errorMsg));
        }));
}

说明： #

• Django的dj-rest-auth返回的错误通常是JSON格式，比如登录失败时会返回类似{"non_field_errors": ["用户名或密码错误"]}或针对字段的错误对象
• 通过error.error获取后端的响应体后，根据其类型（对象/字符串）进行解析，把个性化错误提取出来
• 这样前端就能捕获并展示Django返回的具体错误提示了

内容的提问来源于stack exchange，提问作者Ionut Zapototchi