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

Question

正在关注 couple tutorials on adding authentication using jsonwebtoken, passport, and passport-local I've become stuck on integrating it into my project。我想要它，以便对任何 API 端点的任何请求都需要身份验证，并且对触及 API 的前端的任何请求都需要身份验证。

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

我也尝试添加 'auth interceptor'

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');
});

但这似乎也无济于事。
我忘记或遗漏了什么？

编辑：

输入凭据并单击登录后，我在 chrome 控制台中收到此错误

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

但是我的导航link在我成功通过身份验证后显示它们应该。
我在运行ning Node

的终端也出现了这个错误

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

编辑：

当我注入我的 auth 对象时，这与我的服务器路由的 this line 有很大关系。基本上我认为我的身份验证令牌没有随我的 GET 请求一起发送。但我认为这是将我的身份验证对象传递到 GET 请求时发生的情况。

编辑：

添加了 GET 请求的图像。

EDIT/UPDATE:

我相信我已经解决了身份验证问题，但我的成员视图状态问题在身份验证后仍然无法呈现。我已经 pushed my latest changes to github 如果你拉最新的运行你会看到你可以进行身份验证但是单击 View link 无法加载查看。

Answer 1

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

查看我的 chrome 浏览器生成的跟踪，您的客户端目前没有向 HTTP 请求提供 "Authorization" 键值对 header?

有点像；

键：授权值：承载 [TOKEN_VALUE]

尝试使用 Postman rest 应用程序进行调试，方法是向 http 请求提供 header 中指定的授权 key/value 对，服务器可以告诉我我尝试提供的令牌值是格式不正确的 Json 网络令牌。

而如果我拿走授权 key/value 对（这是您的客户用来通信的，我可能会重现相同的错误。

你可能想尝试修改你的客户端以包含授权密钥，看看它是否有效。如果不行，请告诉我，然后我们可以看看其他解决方案。

查看我的邮递员截图。

Answer 2

https://github.com/gh0st/ncps-mms 经过一些修复后对我来说工作正常...

见https://github.com/gh0st/ncps-mms/pull/2

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');
        });
    };
}]);

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

Using Passport for Authentication of API Endpoints

angularjs

passport.js

passport-local

json-web-token

express-jwt

编辑：

编辑：

编辑：

EDIT/UPDATE: