1

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

所以，我必须设置一个登录页面，这就是我的问题：我在点击登录按钮时链接了一个功能，点击它后，我将用户名和密码发送到我试图连接的服务和终点（mypath/api/auth.php）。

在这个 php 文件中，我设置了数据库连接和一个 SELECT 查询，它接收用户名和密码作为 $_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);
                    }
                }
            );
        }
    }

有什么我忘记了吗？

4

1 回答 1

1

我在nativescript-vue中做，也许你需要调整角度。我为此使用axios插件，它也适用于 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 是我在响应中发送的自定义响应，它不是默认的！

于 2020-01-10T17:46:45.463 回答