使用angularjs中的JWT auth标头重定向到另一个页面

时间:2017-09-21 15:43:21

标签: javascript angularjs http jwt passport.js

我有两个模块angularjs应用程序。一个模块处理身份验证(登录,注册),第二个模块是“chat”,在nodejs后端使用passport-jwt策略进行保护。两个模块都有单独的index.html个文件。 身份验证模块在寄存器控制器中有一个register()方法,如下所示:

$scope.register = function () {

         $http({
            method: 'post',
            url: '/api/register',
            data: {
                username: $scope.username,
                email: $scope.email,
                password: $scope.password
            },
            headers: {
                'Content-Type': 'application/json'
            }
        })

/api/register路由完成所有与注册相关的操作)和登录控制器中的login()方法,如下所示:

 $scope.login = function () {
            $http({
                method: 'post',
                url: '/api/login',
                data: {
                    username: $scope.username,
                    password: $scope.password
                },
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(function success(res) {
                //TODO redirection to '/chat' with auth token
            }
        };

如果用户在数据库中,api会发回一个在res.body.token上可用的jwt令牌,并且应该使用该令牌获得一个安全的聊天页面,该页面可以在“localhost:3000 / chat”网址上找到。问题是我不知道如何从角度客户端发送一个包含令牌的Authorization标头来获取该聊天页面。

1 个答案:

答案 0 :(得分:0)

您可以使用HTTP拦截器,它将在请求标头中添加Bearer标记 -

// Injects an HTTP interceptor that replaces a "Bearer" authorization header with the current Bearer token.
module.factory('oauthHttpInterceptor', function (OAuth) {
  return {
    request: function (config) {      
      if (config.headers.Authorization === 'Bearer') {
        config.headers.Authorization = 'Bearer ' + btoa(OAuth.accessToken);
      }
      return config;
    }
  };
});

module.config(function ($httpProvider) {
  $httpProvider.interceptors.push('oauthHttpInterceptor');
});