所以我正在创建一个登录功能，以 Java 和 MySQL 作为后端，以 AngularJS、HTML 作为前端。如果我输入有效的电子邮件和密码，它会正确登录，但如果我输入无效的电子邮件和密码，它也会登录。我不知道如何解决这个问题。我正在考虑用户服务类，而不是返回用户对象，而是返回 boolean 值。然后，当我在 angularJS 上调用 post 方法时，我可以检查 var res 是 true 还是 false。不知道是否还有其他方法或者更好的方法
用户服务
// Checking if the user can login successfully
public User login(User user)
{
try
{
User dbUser = new User();
String query = "SELECT * FROM user WHERE email=?";
stmt = conn.prepareStatement(query);
stmt.setString(1, user.getEmail());
ResultSet rs = stmt.executeQuery();
rs.next();
dbUser.setId(rs.getInt("id"));
dbUser.setFirstName(rs.getString("firstname"));
dbUser.setLastName(rs.getString("lastname"));
dbUser.setEmail(rs.getString("email"));
dbUser.setPassword(rs.getString("password"));
dbUser.setPhoneNum(rs.getString("phonenum"));
if(user.getEmail().equals(dbUser.getEmail()) &&
user.getPassword().equals(dbUser.getPassword()))
{
System.out.println("Successfully Logged-In");
}
else
{
System.out.println("Failed To Log-In");
dbUser = null;
}
}
catch(Exception e)
{
e.printStackTrace();
}
return user;
}
用户资源
@Path("/login")
@POST
@Consumes(MediaType.APPLICATION_JSON)
@Produces(MediaType.APPLICATION_JSON)
public void login(User user)
{
userService.login(user);
}
登录.js
var app = angular.module("loginApp", []);
app.controller("loginController", function($scope, $http) {
// POST METHOD.... Checking if the login is successfull
$scope.checkLogin = function() {
// retrieving the data from the login form
var dataObj = {
email: $scope.email,
password: $scope.password
};
if($scope.email.length === 0 || typeof $scope.email === 'undefined'
&& $scope.password.length === 0 || typeof $scope.password === 'undefined') {
console.log("pls enter something");
}else {
console.log("something entered");
var res = $http.post("http://localhost:8080/quiz/webapi/account/login", dataObj).then(successCallback, errorCallback);
}
function successCallback(res){
console.log("Successfully Connected to Login API");
console.log("Redirecting to dashboard page");
window.location = "http://localhost:8080/quiz_webclient/dashboard.html";
}
function errorCallback(error){
console.log("Faile To Connect to Login API");
}
};
$scope.cancelLogin = function() {
console.log("Redirecting to home page");
window.location = "http://localhost:8080/quiz_webclient/homepage.html";
}
});
登录.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<script src="lib/angular.js"></script>
<script src="js/login.js"></script>
<link rel="stylesheet" href="cs/login.css">
<!-- Latest compiled and minified bootstrap CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<h3>Login</h3>
<div ng-app="loginApp" ng-controller="loginController">
<form class="loginForm">
<label id="label">Email</label> <br>
<input type="text" name="email" ng-model="email" required> <br>
<label id="passwordlabel">Password</label> <br>
<input type="password" name="password" ng-model="password" required> <br>
<button type="submit" ng-click="checkLogin()">Login</button> <br>
<button type="submit" ng-click="cancelLogin()">Cancel</button>
</form>
</div>
</body>
</html>
最佳答案
在模型名称中使用点(例如)
<input type="text" ng-model="loginData.email" autofocus required>
此外，关于 POST 操作 - 了解您正在使用哪个版本的 Angular 会有所帮助。但是，如果您使用 Angular 版本 < 1.6，我会尝试直接使用 .success() 和 .error() 方法而不是 .then。像这样的东西:
$scope.checkLogin = function() {
$http.post("http://localhost:8080/quiz/webapi/account/login", $scope.loginData)
.success(function(data) {
window.location = "http://localhost:8080/quiz_webclient/dashboard.html";
})
.error(function(data) {
console.log('Error: ' + data);
});
};
我对 Java 的了解不够，无法评论那里可能发生的事情。会考虑使用 Node.js 代替。并且您的身份验证方法可以返回 token 而不是用户或 boolean 值。
关于javascript - 使用 java Rest api 作为后端的 Angular JS 登录，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46085728/