AngularJS：用户可以注册两次，如何防止这种情况？

Question

问题是，用户可以使用相同的用户名/电子邮件填写两次注册表，然后在应用程序识别出已经存在具有给定用户名和/或电子邮件的用户之前提交。 这个错误可能有些愚蠢，但是我似乎已经一个小时都找不到它了。 有识之士将不胜感激。

• 控制器：

 app.controller('volonterController', function($scope, volonterFactory, teritorijaFactory) { function init() { console.log('volonterController.Init'); volonterFactory.getVolonteri().success(function (data) { $scope.volonteri = data; }); teritorijaFactory.getTeritorije().success(function (data2) { $scope.teritorije = data2; }); } init(); $scope.addVolonter = function(volonter) { volonterFactory.addVolonter(volonter).success(function(data) { toast('Volonter ' + volonter.username + " registered."); }); }; $scope.submit1 = function() { $scope.volonter.username; $scope.volonter.password; $scope.volonter.name; $scope.volonter.lastName; $scope.volonter.phone; $scope.volonter.email; $scope.volonter.teritorija; $scope.volonter.picturePath; $scope.volonter.state = "active"; $scope.alreadyExists = false; for(var i=0; i < $scope.volonteri.length; i++) { if($scope.volonteri[i].username===$scope.volonter.username) { alert('Volonter with the given username already exists.'); $scope.alreadyExists = true; } if($scope.volonteri[i].email===$scope.volonter.email) { alert('That email address is already in use.'); $scope.alreadyExists = true; } } if($scope.alreadyExists===false) { $scope.addVolonter($scope.volonter); init(); } } }); 

• 服务：

 app.factory('volonterFactory', function($http) { var factory = {}; factory.getVolonteri = function() { return $http.get('/WP/rest/fileData/getVolonteri'); }; factory.addVolonter = function(volonter) { return $http.post('/WP/rest/fileData/addVolonter', volonter); }; return factory; }); 

• BackEnd java rest post方法（如果需要）：

   @POST @Path("/addVolonter") @Produces(MediaType.APPLICATION_JSON) @Consumes(MediaType.APPLICATION_JSON) public String addVolonter(Volonter v) { getFileData().getVolonteri().put(v.getUsername(), v); System.out.println("Volonter " + v.getPassword() + " added."); return "OK"; } 

Answer 1

这至少应在JAX-RS代码的服务器端完成，但可以在客户端完成，以提高应用程序的可用性。

当用户尝试注册时，您的服务器端代码需要首先检查用户是否已经具有提供的用户名，如果已有用户名，则以错误代码响应，然后以角度捕获该客户端并显示消息/警告/错误。 例如：

// angular
$http.post('/WP/rest/fileData/addVolonter', volunteer).then(function () {
    $state.go(page.VOLUNTEER_DETAILS);
}).catch(function (response) {
    notify.error(response.msg);
});

// Java (JAX-RS)
@POST
@Path("/volunteer")
@Produces(MediaType.APPLICATION_JSON)
public Response addVolunteer(VolunteerDto volunteer) {
    if (volunteerService.usernameExists(volunteer.getUsername())) {
        Response.status(Status.CONFLICT).entity("{\"msg\":\"Duplicate username\"}").build();
        return;
    }

    return Response.ok().build();
}

完成此操作后，您可以通过在输入（或更改）用户名后立即检查用户名来提高可用性：

<input type="text" ng-change="vm.usernameChanged()" ng-model="vm.username" />

// angular
vm.usernameChanged = function() {
    $http.post('/WP/rest/fileData/checkUsername', vm.username).then(function (response) {
        console.log(response.isValid);
    }).catch(function (response) {
        notify.warning(response.msg);
    });
};

// Java (JAX-RS)
@POST
@Path("/checkUsername")
@Produces(MediaType.APPLICATION_JSON)
public Response checkUsername(String username) {
    boolean valid = volunteerService.usernameExists(username);
    return Response.ok().entity("{\"isValid\":" + valid + "}").build();
}