Php 如何将angular nativescript应用程序连接到数据库进行登录？

我正在尝试通过NativeScript和Angular创建一个应用程序，用于管理公司员工的工作时间

因此，我必须设置一个登录页面，这就是我的问题：我在点击登录按钮时链接了一个函数，点击它之后，我将用户名和密码发送到一个我试图连接到的服务和端点（

mypath/api/auth.php

）

在这个php文件中，我设置了DB连接和一个SELECT查询，它将用户名和密码作为$\u POST函数接收。但是，现在，当我点击我的登录按钮时，我得到了一个带有

[Object Object]

的警报，即使凭证是对的或错的

我是NativeScript和Angular的初学者

我的PHP用户验证功能：

$username = $_POST["username"];
$password = $_POST["password"];
$conn = getDB();
$hash_pwd = hash('sha256', $password);

$stmt = $conn->prepare("SELECT * FROM dipendenti WHERE cod_fiscale=:username AND password=:password");
$stmt->bindParam("username", $username,PDO::PARAM_STR) ;
$stmt->bindParam("password", $hash_pwd,PDO::PARAM_STR) ;
$stmt->execute();
$count=$stmt->rowCount();
$data=$stmt->fetch(PDO::FETCH_OBJ);

closeDB($conn);
return json_encode($data);

我的user.service.ts文件：

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders, HttpResponse } from "@angular/common/http";
import { Observable, throwError } from "rxjs";
import { catchError, map, tap } from "rxjs/operators";

import { Auth } from "./auth.model";
import { Config } from "../config";

@Injectable()
export class AuthService {
    constructor(private http: HttpClient) { }

    login( user: Auth) {
        if(!user.codFiscale || !user.password) {
            return throwError("Devi inserire sia codice fiscale sia la tua password per accedere");
        }
        return this.http.post(Config.apiUrl + 'api/auth.php', 
            JSON.stringify({
                username: user.codFiscale,
                password: user.password
            }),
            { 
                headers: this.getCommonHeaders()
            }).pipe(
                map(response => response),
                catchError(this.handleErrors)
            );
    }

    getCommonHeaders() {
        return {
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "*"
        }
    }

    handleErrors(error: Response) {
        console.log(JSON.stringify(error));
        return throwError(error);
    }
}

点击按钮触发我的功能：

submitLogin() {
        if(this.isLoggingIn) {
            this.authService.login(this.user).subscribe(
                () => {
                    this.router.navigate(["/home"]);
                },
                (exception) => {
                    if(exception.error && exception.error.description) {
                        alert(exception.error.description);
                    } else {
                        alert(exception.error);
                    }
                }
            );
        }
    }

---

有什么我忘记了吗？

我是在nativescript vue中完成的，也许您需要调整角度。 我使用插件，它也适用于ns angular，我只是不知道如何在angular上配置它。。。但代码是这样的：

async submitLogin() {

            const data = {
                email: this.user.email,
                password: this.user.password
            };

            try {
                const res = (await api.post(this.getApiUrl+"/app/services/login.php", data)).data;
                if (res.code === 200){
                    //handle login success
                }
                else if (res.code === 500){
                    //handle login fail
                }
            }
            catch (e) {
                console.error("Connection error: ", e);
            }
        },

其中api.post是：

post(url, request, config) {
    return axios.post(url, request, config)
        .then((response) => Promise.resolve(response))
        .catch((error) => Promise.reject(error));
},

---

编辑：res.code是我在响应中发送的自定义响应，不是默认值

尝试使用rest客户端（如POSTMAN）测试您的端点，确保它工作正常。不要对错误发出警报，将其记录下来，这样可以通过配对对象为您提供更多信息。您可能还希望查看浏览器的“网络”选项卡（如果是Chrome），并检查请求/响应详细信息。您首先真正需要做的是将问题进一步隔离到客户机与服务器之间，然后再深入到下一个层次。e、 g.客户是否拨打了正确的电话（网络选项卡将显示详细信息）？还是数据库连接不好？（添加一些服务器日志记录可能会有帮助）等等。大多数人经常忘记做的是，在使用HTTP时不启用明文通信。默认情况下，您的应用程序中仅启用HTTPS（除非您运行的是Android 8或更低版本）。您好@lucasumberto，谢谢您。。。但是你的

api

变量是什么？@Silvia，它是从.js文件导入的，该文件包含我的axios函数（post、get、patch和delete）；在登录vue文件中：

从“~/shared/api”

导入api；和api.js:

从“axios”导入axios；导出默认值{post（url，request，config）{return axios.post（url，request，config）。然后（（response）=>Promise.resolve（response））.catch（（error）=>Promise.reject（error））；}}

由于堆栈溢出限制，我删除了其余代码。正如我所说，这是在vue逻辑中。。。但api只是从另一个文件导入的。