Angular POST请求无效

Question

我使用passport.js设置了注册和登录系统。 我在前端使用Angular.js。 但是当我使用angular时，它不会注册我的用户。 没有角度，它运作良好。 见下面的代码：

没有Angular Code（它有效）：

<form action="/signup" method="post">
    <div class="form-group">
        <label>Email</label>
        <input type="text" class="form-control" name="email">
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" name="password">
    </div>

    <button type="submit" class="btn btn-warning btn-lg">Signup</button>
</form>

使用Angular Code（不起作用）：

<!doctype html>
<html ng-app="login">

<head>
<title>Node Authentication</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- load bootstrap css -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<!-- load fontawesome -->
<script src="./javascripts/controllers/signup.js"></script>
<style>
    body {
        padding-top: 80px;
    }
</style>
</head>

<body ng-controller="loginCtrl">
<div class="container">

    <div class="col-sm-6 col-sm-offset-3">

        <h1><span class="fa fa-sign-in"></span> Signup</h1>

        <!-- show any messages that come back with authentication -->
        <% if (message.length> 0) { %>
            <div class="alert alert-danger">
                <%=m essage %>
            </div>
            <% } %>

                <!-- LOGIN FORM -->
                <form>
                    <div class="form-group">
                        <label>Email</label>
                        <input type="text" class="form-control" ng-model="user.email">
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" class="form-control" ng-model="user.password">
                    </div>

                    <button ng-click="signup()" class="btn btn-warning btn-lg">Signup</button>
                </form>

                <hr>

                <p>Already have an account? <a href="/login">Login</a>
                </p>
                <p>Or go <a href="/">home</a>.</p>

    </div>

</div>

角度控制器代码：

var login = angular.module('login', [])

login.controller('loginCtrl', function($scope,$http){

$scope.user = {};

$scope.signup = function(){

   return $http.post('/signup',$scope.user)
   .then(function(data) {
   console.log("da" + data);
 });
 };

})

注册路线：

    // process the signup form
app.post('/signup', passport.authenticate('local-signup', {
    successRedirect : '/profile', // redirect to the secure profile section
    failureRedirect : '/signup', // redirect back to the signup page if there is an error
    failureFlash : true // allow flash messages
}));

注意：

在后端我设置了Node / Express.js API。 成功注册后，它使用passport.js将用户添加到MongoDB中，并将用户重定向到配置文件页面。

但是目前数据进入数据库（ 我可以看到数据库中的新用户 ）它没有将用户重定向到配置文件页面，也没有显示我发回的任何错误消息（即，如果用户已经存在）

Answer 1

AJAX请求不会重定向浏览器。 如果要重定向到新页面，则需要告知角度路由器在API成功响应后执行此操作。 如果您不使用Angular路由器，只需使用window.location重定向。

return $http.post('/signup',$scope.user)
    .then(function(data) {
        console.log("da" + data);
        window.location.href = '/profile';
    });

您的/signup是一个基本上是API的端点。 调用它将以某种方式重定向，但它只会在响应方面这样做。 因此，您的Angular应用程序将从重定向接收响应，但它不会重定向浏览器本身。 如果您要从浏览器直接发布到该URL，它将重定向，但通过AJAX调用完成的任何HTTP路由都不会直接影响浏览器。

Answer 2

使用$routeProvider或$stateProvider ，它是UI-router的一部分。

定义.config 。 内部config使用$routeProvider或$stateProvider定义路由配置。

以下链接可能有所帮助

使用$routeProvider路由配置

使用$stateProvider路由配置

Answer 3

当然，agnularJs应用程序负责重定向，你应该使用$location.path("/profile")在登录过程后重定向用户

Angular POST请求无效

问题描述

3 个解决方案

解决方案1
0 2016-12-10 09:27:56

解决方案2
0 2016-12-10 10:55:33

解决方案3
0 2018-05-15 07:14:09

Angular POST请求无效

问题描述

3 个解决方案

解决方案1 0 2016-12-10 09:27:56

解决方案2 0 2016-12-10 10:55:33

解决方案3 0 2018-05-15 07:14:09

解决方案1
0 2016-12-10 09:27:56

解决方案2
0 2016-12-10 10:55:33

解决方案3
0 2018-05-15 07:14:09