MEAN 应用程序中的 Angular API 调用失败答案

【问题标题】：Angular API call fails in MEAN applicationMEAN 应用程序中的 Angular API 调用失败
【发布时间】：2015-10-08 10:08:20
【问题描述】：

在 MEAN 应用程序中，我试图允许授权用户（电子邮件和密码登录）更改他们的用户名。我可以成功地使用 Postman 将新用户名放入 http://localhost:3000/api/users/xxxxxxxxxxxxxxxx。但是角码失败了。这是编辑页面的相关部分：

<form ng-submit="user.saveUser()">

            <div class="form-group">
                <label> New Username</label>
                <input type="text" class="form-control" ng-model="user.userData.name">
            </div>

这里是控制器：

.controller('userEditController', function($routeParams, User) {
  var vm = this;
  vm.type = 'edit';


  User.get($routeParams.user_id)
    .success(function(data) {
      vm.userData = data;
    });

  // function to save the user
  vm.saveUser = function() {
    vm.processing = true;
    vm.message = '';

    // call the userService function to update 
    User.update($routeParams.user_id, vm.userData)
      .success(function(data) {
        vm.processing = false;

        // clear the form
        vm.userData = {};

        // bind the message from our API to vm.message
        vm.message = data.message;
      });
  };


});

这里是服务：

// update a user
    userFactory.update = function(id, userData) {
        return $http.put('/api/users/' + id, userData);
    };

此时 userData 包含 name: “Fred” 或输入到表单中的任何内容

这里是 api.js

apiRouter.route('/users/:user_id')

        // get the user with that id
        .get(function(req, res) {
            User.findByIdAndUpdate(req.params.user_id, function(err, user) {
                if (err)  return res.send(err);

                // return that user
                res.json(user);
            });
        })

        // update the user with this id
        .put(function(req, res) {
                console.error(req.params.user_id);
            User.findById(req.params.user_id, function(err, user) {

                if (err) return res.send(err);

                // set the new user information if it exists in the request
                if (req.body.name) user.name = req.body.name;

                // save the user
                user.save(function(err) {
                    if (err) return res.send(err);

                    // return a message
                    res.json({ message: 'User updated!' });
                });

            });
        });

（由于 CastError，我不得不使用 findByIdAndUpdate 而不是 findById。）

虽然控制台说：

XHR 完成加载：PUT http://localhost/3000/api/users/user_id

req.params.user_id 的值就是user_id。

终端显示：

PUT /api/users/user_id 200 4.040 毫秒 - 2273

GET /api/users/user_id - - ms - -

就像我说的 Postman 可以与 API 通信并且可以毫无问题地更新。我被难住了，希望有人能让我摆脱痛苦

【问题讨论】：

你为什么同时使用 get 和 put 函数。您可以使用 findByIdAndUpdate 简单地传递用户 ID 来提出请求和更新数据
如果我删除了 get 函数，当在编辑表单中输入任何内容时，我会收到“TypeError: Cannot assign to read only property 'name'”。
另外在 put 中将 findById 更改为 findByIdAndUpdate 会破坏 Postman 通过 api 更新的能力。

标签： angularjs node.js express mongoose

【解决方案1】：

我不得不改变这个策略。在 Postman 中手动输入的 user_id 工作的事实应该告诉我 Angular 代码提供的 user_id 不正确。所以我确保 JWT 包含 user_id：

var token = jwt.sign({
                name: user.name,
                email: user.email,
                user_id: user._id

然后添加了一个api端点来获取用户信息：

apiRouter.get('/me', function(req, res) {
        res.send(req.decoded);
    });

然后连接一个服务：

userFactory.get = function() {
        return $http.get('/api/me/');
    };

然后在控制器中我可以调用 get:

User.get()
  .success(function(result) {
    $scope.user_id = result.user_id;
    });

$scope.user_id 现在有了正确的 user_id，我可以将其传递给更新方法：

User.update($scope.user_id, vm.userData)
      .success(function(data)

所以现在它按预期工作了。

【讨论】：