将NodeJS函数传递给Angular指令。

Question

I am currently trying to display a error message if a user inputs a wrong username or password. The tricky part is that I am not using EJS or Handlebars, or any kind of template engine but raw HTML with Bootstrap.

I saw one other good question Good Similar Question of how to pass values from Nodejs to Angular. Sadly this didn't seem to help.

Here is my NodeJS + Passport User Authentication function:

 function isLoggedIn(req, res, next) {
        console.log('here is Authenticated', req.isAuthenticated());
        if (req.isAuthenticated()){
           return next();
        }else{
           res.json({"message": "Failed login. Wrong Username or Password"});
            res.redirect('/login');
            console.log("NO PERMISSION HAS BEEN GIVEN");
        }
    }

So my Idea was to send the message as an JSON object and get it with Angular:

 var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $http) {

            $http.get("/login").then(function(data){
                $scope.message = data;
                    console.log("message loaded" + data);
                });            
            });

and of course I am trying to display the message with {{message}} .

Sadly this method is not working, I am trying a second way which involves using ng-show .

Can I pass a NodeJS function to a ng-show ? Something similar to:

<div class="alert alert-danger" ng-show="isAuthenticated = true">
                 <p> Failed login message </p>
</div>

If not, how can I display a failed login message to a static html file without using jade, handlebars or any other template engine?

Answer 1

A couple things here that may help:

Firstly, you should avoid sending multiple responses for a request, so you should remove res.redirect('/login'); .

Your res.json({"message": "Failed login. Wrong Username or Password"}); ends the response so the redirect never runs and redirecting would defeat the purpose of you displaying a error message for the user. Further, you should also send the proper status code to the client (401 Unauthorized in this case) to let it know that the request was not successful. For example:

function isLoggedIn(req, res, next) {
    console.log('here is Authenticated', req.isAuthenticated());
    if (req.isAuthenticated()){
       return next();
    } else{
       res.status(401).json({"message": "Failed login. Wrong Username or Password"});
    }
}

On the client side, $http returns a response object with a .data property that contains the payload of the response you sent from the server. You need to use that to access the JSON that has the message for the failed login. Also note that you're sending an object to the client, so you'll need to access the actual text of the string via res.data.message .

Also note that with $http , only a response with a status code in the 200 range is considered successful. So if the login fails, you can handle the failed login in an error handler. This way your UI can decide what to do based on whether the login was successful or not. For example:

 var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope, $http) {

     $http.get("/login").then(function(res){
        // Do stuff if login is successful
     })
     .catch(function(res) {
       $scope.message = res.data.message;
     })