Question

我正在尝试显示一条消息，通知用户他们在登录尝试时输入了无效的凭据

我尝试使用具有ng-show的div，当res.status == 401时被设置，在设置变量后根据控制台日志正确设置了变量，但未显示消息。 / p>

HTML代码

<div class="" ng-show="badLogin">
 <span>Bad Login</span>
</div>
<form  class="text-center dash-spacing" name="loginForm" ng-hide="loggedin">
 User Email:<input autocomplete="email" type="text" ng-model="user.email" required minlength="8" placeholder="Enter email Here.">
 Password:<input autocomplete="password" type="password" ng-model="user.password" placeholder="Enter password Here.">
 <button id='login' ng-click="login(user)">Login</button>
</form>

AngularJS控制器

$scope.login = function(login){
 console.log('login function called');
 DashFactory.login(login).then(function(res){
   console.log('res', res);
   if(res.status == 200){
     $scope.userIn = res.data.user
     userService.setUser($scope.userIn)
     authService.authenticated = true;
   } else if (res.status == 401) {
     $scope.badLogin = true;
     console.log('badLogin?', $scope.badLogin);
     $scope.userIn = null;
   }
 })
}

Angular Factory：

  factory.login = function(user, callback){
    console.log('factory login');
    return $http({
      url: '/login',
      method: 'POST',
      data: user
    }).then(function(res){
      console.log('line 28', res);
      if(res.data.token){
        localStorage.setItem('user', res.data.user);
        localStorage.setItem('JWT', res.data.token);
        $http.defaults.headers.common.Authorization = res.data.token;
        console.log("login success DashFactory line 25!", res.data);
        var data = res.data
        console.log('data', data);
        return res
      }
    }, function(res){
      console.log('we have err', res);
      return res

    }
  )
  }

节点服务器控制器：

login: function(req, res){
    console.log('logging', req.body);
    User.findOne({email: req.body.email}, function(err, user){
        if(err){
            res.status(400).send("Could not login user.");
        }
        else{
            console.log('attempting bcrypt');
            console.log(user);
            if(bcrypt.compareSync(req.body.password, user.password)){
                const payload = {
                    name: user.name,
                    admin: user.access
                };
                        var token = jwt.sign(payload, app.get('superSecret'), {
                            expiresIn: 86400 // expires in 24 hours
                        });
                        console.log('token', token);

                        // return the information including token as JSON
                        res.json({
                            success: true,
                            user: user.name,
                            message: 'Enjoy your token!',
                            token: token,
                            userid: user._id
                        });
                    console.log('res.json', res.json);
                    console.log('payload', payload);
            }
    else{
      console.log('invalid password');
      res.json(401, {message: "invalid username/password"})
    }
        }
    })
return false
},

我希望当用户提供错误的凭据时，服务器将发送401状态（此方法有效），而angularJS应该将badLogin变量设置为true，控制台控制台在登录后说行，然后执行ng-应该触发HTML上的show来显示Bad Login span（没有发生）。

Answer 1

根据您的DashFactory.login承诺，您可以使用.catch(fn)查找失败的响应。

DashFactory.login(login).then(function(res){
    // Success
    $scope.badLogin = false;
    $scope.userIn = res.data.user
    userService.setUser($scope.userIn)
    authService.authenticated = true;
}).catch(function(res){
    // Failure
    $scope.badLogin = true;
    console.log('badLogin?', $scope.badLogin);
    $scope.userIn = null;
}});

AngularJS Docs: The Promise API

我在Plunker上编写了一个简单的angularJS应用程序，以演示未授权的请求触及失败回调：https://next.plnkr.co/edit/cfItfc7U9GSjuGyx

Answer 2

该问题归因于$ httpProvider.interceptors而不是实际列出的代码，已通过删除拦截器中的重定向解决了问题。

感谢迈克尔·林奇（Michael Lynch）的指针

如何在错误的登录凭据上呈现失败的登录消息

2 个答案: