Как отобразить сообщение об ошибке при входе с неверными учетными данными? - PullRequest
0 голосов
/ 13 февраля 2019

Я пытаюсь сделать сообщение, уведомляющее пользователя о том, что они ввели неверные учетные данные при попытке входа в систему

Я попытался использовать div с ng-show, который устанавливается, когда res.status == 401переменная устанавливается правильно в соответствии с журналом консоли после того, как я установил переменную, но сообщение не отображается.

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 Controller

$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-show в HTML, чтобы показать диапазон неверного входа (это НЕ происходит).

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Проблема произошла из-за $ httpProvider.interceptors, а не из-за фактического кода в списке, проблема была решена путем удаления перенаправления в перехватчике.

Спасибо за указатели Майкл Линч

0 голосов
/ 13 февраля 2019

В своем обещании 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: API Promise

Я написал простое приложение angularJS на Plunker, чтобы продемонстрировать, что неавторизованные запросы попадают в ответный вызов сбоя: https://next.plnkr.co/edit/cfItfc7U9GSjuGyx

...