Angularjs 使用Passport对API端点进行身份验证

在使用jsonwebtoken、passport和passport local添加身份验证之后，我一直坚持将其集成到。我希望这样，对任何API端点的任何请求都需要身份验证，对前端的任何接触API的请求都需要身份验证

现在的情况是，我可以让用户登录并注册，但一旦他们登录，他们仍然无法访问需要身份验证的页面。用户得到一个401错误。好像请求中没有正确传递令牌

我还尝试添加了一个“auth拦截器”

myApp.factory('authInterceptor', function ($rootScope, $q, $window) {
  return {
    request: function (config) {
      config.headers = config.headers || {};
      if ($window.sessionStorage.token) {
        config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
      }
      return config;
    },
    response: function (response) {
      if (response.status === 401) {
        // handle the case where the user is not authenticated
      }
      return response || $q.when(response);
    }
  };
});

myApp.config(function ($httpProvider) {
  $httpProvider.interceptors.push('authInterceptor');
});

但这似乎也没有奏效。
我忘记或错过了什么？

编辑： 在输入creds并单击登录后，我在chrome控制台中出现此错误

GET http://localhost:3030/members/ 401 (Unauthorized)

但我的导航链接会在我成功验证后显示为，就像它们应该显示的那样。
我在运行节点的终端中也会出现此错误

UnauthorizedError: No authorization token was found
    at middlware (/ncps-mms/node_modules/express-jwt/lib/index.js)
    ...

编辑： 当我插入我的

auth

对象时，这与我的服务器路由有很大关系。基本上，我认为我的auth令牌没有随我的

GET

请求一起发送。但我认为，当我将auth对象传递到GET请求时，就会发生这种情况

编辑： 添加了GET请求的图像。

编辑/更新：

---

我相信我已经通过了身份验证问题，但是我的成员视图状态在经过身份验证后仍然无法呈现。我已经安装了，如果您拉取最新版本并运行，您将看到您可以进行身份验证，但单击查看链接无法加载视图。

抱歉，实际上没有时间调试问题，但我怀疑您的问题可能与HTTP请求的头有关

查看my chrome浏览器生成的跟踪，您的客户端当前没有向HTTP请求头提供“授权”键值对

有点像

关键：授权 价值：持票人[代币价值]

尝试使用Postman rest应用程序进行调试，方法是向http请求提供标头中指定的授权密钥/值对，服务器可能会告诉我，我尝试提供的令牌值是一个格式错误的Json web令牌

然而，如果我去掉授权密钥/值对（这是您的客户机用来通信的），我可能会重现相同的错误

您可能希望尝试修改您的客户端，使其包含授权密钥，并查看其是否有效。如果无效，请告诉我，然后我们可以查看其他解决方案

看看我的邮递员截图。

在解决了一些问题后，对我来说效果很好

看

client/src/routes.js

/* jshint esversion: 6 */
/* jshint node: true */
import angular from 'angular';
import 'angular-ui-router';

angular.module('ncps.routes', ['ui.router'])
.config(($stateProvider, $urlRouterProvider) => {
    $urlRouterProvider.otherwise('/members/login');

    $stateProvider
    .state('login', {
        url: '/members/login',
        templateUrl: 'members/members-login.html',
        controller: 'AuthController',
        onEnter: ['$state', 'auth', function($state, auth) {
            if (auth.isLoggedIn()) {
                console.log('Going to /members/...');
                $state.go('members', {
                    // 'headers': {
                    //     'Authorization': 'Bearer ' + auth.getToken()
                    // }
                });
            }
        }]
    })
    .state('register', {
        url: '/members/register',
        templateUrl: 'members/members-register.html',
        controller: 'AuthController',
        onEnter: ['$state', 'auth', function($state, auth) {
            if (auth.isLoggedIn()) {
                $state.go('members');
            }
        }]
    })
    .state('members', {
        url: '/members',
        templateUrl: 'members/members-view.html',
        resolve: {
            members: function($http, auth) {
                console.log('Trying to get /members....');
                return $http.get('/members', {
                    headers: {
                        'Authorization': 'Bearer ' + auth.getToken()
                    }
                }).then(function(response){
                    return response.data;
                });
            }
        },
        controller: 'MembersController as membersCtrl'
    })
    .state('new', {
        url: '/members/add',
        templateUrl: '/members/members-add.html',
        controller: 'MembersSaveController as newMemberCtrl'
    })
    .state('test', {
        url: '/members/test',
        template: 'This is a test.'
    });
});

client/src/controllers/controllers.js

/* jshint esversion: 6 */
/* jshint node: true */
import angular from 'angular';
angular.module('ncps.controllers', [])

.controller('MembersController', ['$http', 'auth', 'members', function($http, auth, members) {
    console.log('Members retrieved');
    this.members = members;
}])

.controller('MembersSaveController', function($stateParams, $state, $http) {
    this.member = $state.member;

    this.saveMember = function(member) {
        $http.post('/members', member).then((res, member) => {
            $state.go('members');
        });
    };
})

.controller('NavController', ['$scope', 'auth', function($scope, auth) {
    $scope.isLoggedIn = auth.isLoggedIn;
    $scope.currentUser = auth.currentUser;
    $scope.logOut = auth.logOut;
}])

.controller('AuthController', ['$scope', '$state', 'auth', function($scope, $state, auth) {
    $scope.user = {};

    $scope.register = function() {
        auth.register($scope.user).error(function(error) {
            $scope.error = error;
        }).then(function() {
            $state.go('members');
        });
    };

    $scope.logIn = function() {
        auth.logIn($scope.user).error(function(error) {
            $scope.error = error;
        }).then(function() {
            $state.go('members');
        });
    };

    $scope.logOut = function() {
        auth.logOut().error(function(error) {
            $scope.error = error;
        }).then(function() {
            $state.go('members');
        });
    };
}]);

---

您是否调试以检查是否进入标题周围的if-than？@Walfrat我不明白您在问什么。您是否使用浏览器的debogger并放置断点以查看configer.header.Authorization行是否已执行？我已取得一些进展，但即使通过身份验证，我的视图仍无法呈现。请查看我的更新OP.2内容：在登录时使用.error和.thne函数。通常使用.succes/.error或.then（successCallback，errorCallback）。我不知道这是否会引起一些麻烦。其次，您应该执行angular.run，为所有ui路由器事件添加侦听器，以便您能够跟踪状态错误。因此，这肯定是问题所在。如果我提供授权标头和“承载者[令牌]，请使用postman“我可以点击我的API。但是我如何将其输入到我的逻辑中？这不是在这里处理的吗？很高兴知道这个问题。我今天早上试图通过在那里放几个简单的$log.debug语句来调试你的客户端，但它似乎不起作用，这对于普通的angular应用程序来说是可行的。也许原因是我不理解Gulp是如何工作的。哈e以前从未使用过它。听起来您确实有一行代码将授权密钥附加到HTTP标头here=>中，而且当客户端在需要auth时进行HTTP调用以命中API时，它似乎没有被客户端使用。您可以尝试添加这一行吗（请参见上文）到使用$http获取/发布需要身份验证的资源的地方？我正在尝试自己这样做，但不知怎么的，客户端似乎没有接收到我的更改。如前所述，这可能是因为我缺乏吞咽知识。让我知道这是否行得通。我已经取得了一些进展，但即使通过aut，我的视图仍然无法呈现演示。请查看我对OP的更新。您可以通过运行

npm run watch

来运行应用程序，然后使用

npm start

启动应用程序。

npm run watch

将编译您对服务器端任何内容的最新更改。尝试运行npm run watch，但遇到错误。我认为这是我的有限知识wledge与您正在使用的babel工具一起使用。我在您的项目中提出了一个github问题。如果您能帮助我进行设置，我将不胜感激。此外，如果您认为您可能已经找到了问题的核心问题，如果您能将其标记为已回答，我将不胜感激！谢谢您能否解释发生了什么以及为什么添加/mod如果您的代码修复了它？resolve正在尝试注入

成员

，但要实现这一点，必须将其声明为MembersController控制器上的最后一个参数…此外，auth在其中不存在，并且在

头中自动失败：{'Authorization'：'Bearer'+auth.getToken（）}

+1:）