Angular 在构建后将 'bearer' 字符串添加到身份验证 header

Question

在我的 back-end (Nodejs + Express) 上，我使用 JWT 令牌保护路由。在开发环境中，请求中的 HTTP 授权 header 如下所示：

Authorization: JWT token_string

在我构建 angular 应用程序后，由于某种原因构建的应用程序在 header 中添加了 'Bearer ':

Authorization: Bearer JWT token_string

要求：

 addTemplate(template: ITemplate): Observable<ISuccessMsgResponse> {
    return this.http.post<ISuccessMsgResponse>(`${this.ULR}template`, template, {
      headers: new HttpHeaders({
        'Authorization': this.token.getToken()
      })
    });
  }

节点：

.post(passport.authenticate('jwt', {session: false}), (req, res) => {
     // Code to execute
}

护照：

module.exports = function(passport) {
    let opts = {};
    opts.jwtFromRequest = ExtractJwt.fromAuthHeaderWithScheme('jwt');
    opts.secretOrKey = config.secret;
    passport.use(new JwtStrategy(opts, (jwtPayload, done) => {
        User.getUserById(jwtPayload._id, (err, user) => {
            if(err) {
                return done(err, false)
            }
            if(user) {
                return done(null, user)
            } else {
                return done(null, false)
            }
        })
    }))
}

如果我尝试使用与开发中相同的授权 header 格式进行请求，一切正常。所以问题出在 Angular 的构建版本中，它在 Authorization header 中添加了 'Bearer '。有谁知道为什么会这样，我该如何解决？

Answer 1

我知道这已经是半年之后了，但仍然，只是想 post 我的问题的答案。这种情况下的问题是，在开发中，HttpClient 没有在 'Authorization' header 的开头附加 'Bearer' 字符串，但在生产中它被包含在内。发展：JWT token_string 生产：Bearer JWT token_string 该解决方案非常烦人，因为我必须在构建脚本中手动找到 Authorization Header 所在的部分，并删除设置 header 的字符串中的 'JWT' ，因为它看起来像Bearer 必须在其中。

之前：Bearer JWT token_string 之后：Bearer token_string

在后台，提取的字符串也要修改。之前：

    let opts = {};
    opts.jwtFromRequest = ExtractJwt.fromAuthHeaderWithScheme('jwt');
    opts.secretOrKey = config.secret;
    passport.use(new JwtStrategy(opts, (jwtPayload, done) => {
        User.findById(jwtPayload._id, (err, user) => {
            if(err) {
                return done(err, false);
            }
            if(user) {
                return done(null, user);
            } else {
                return done(null, false);
            }
        });
    }));

之后：

    let opts = {};
    opts.jwtFromRequest = ExtractJwt.fromAuthHeaderWithScheme('bearer');
    opts.secretOrKey = config.secret;
    passport.use(new JwtStrategy(opts, (jwtPayload, done) => {
        User.findById(jwtPayload._id, (err, user) => {
            if(err) {
                return done(err, false);
            }
            if(user) {
                return done(null, user);
            } else {
                return done(null, false);
            }
        });
    }));

我不打算导出这个主题，但我真的不明白为什么 'Bearer' 不会像在生产中那样在开发中添加。可能只是一个错误 (Angular 7)。 IDK.

Answer 2

距离上次回答已经过了很长时间，但它可能对某些人有帮助 - 并防止一些痛苦，就像我想出一个 'solution'。

简而言之，要求是：

getUserProfile(){
this.loadCurrentToken();
const headers = new HttpHeaders({
  'Content-Type': 'application/json',
  Authorization: this.authToken,
});
console.log(headers);
return this.http.get('/users/profile', {headers});
}

我遇到的问题是，在开发模式 (ng serve) 中，授权生成的令牌 Header 的形式为：JWT eyfhik4u5h4tb...等，在生产模式（ng build --prod）中，'Bearer' 词被添加为前缀，所以现在令牌是：Bearer JWT eyfhik4u5h4tb...等（只是就像上面的答案所暗示的那样）

当然这是标准但也不想从fromAuthHeaderWithScheme('jwt')方法改为提取方法，意思是：

let opts ={};
opts.jwtFromRequest = ExtractJwt.fromAuthHeaderWithScheme('jwt');
opts.secretOrKey = config.secret;
passport.use(new JwtStrategy(opts, (jwt_payload, done) => {
    User.getUserById(jwt_payload._id, (err, user) => {
        if(err){
            return done(err, false);
        }

        if(user){
           return done(null, user); 
        } else {
            return done(null, false);
        }
    });
}));

...对于别的东西，让我们说 fromAuthHeaderWithScheme(auth_scheme) 或 fromAuthHeader AsBearerToken() 并继续相应的更改。

所以，我所做的，到目前为止在生产和开发模式下都很好地工作是尝试获得一个 'clean' 令牌 - 以 JWT eyfhik4u5h4tb[=38 的形式=] ...在任何一个环境中，包括开发和生产。

我的方法是修改 //node_modules/passport-jwt/lib/auth_headers.js 文件：

'use strict'; var re = /(\S+)\s+(\S+)/; function parseAuthHeader(hdrValue) { if (typeof hdrValue !== 'string') { return null; } /* ADDED THIS LINE */ hdrValue = hdrValue.substring(hdrValue.indexOf('JWT') + 0); /* --------------- */ var matches = hdrValue.match(re); // console.log(hdrValue); return matches && { scheme: matches[1], value: matches[2] }; } module.exports = { parse: parseAuthHeader };

因此，现在，提取器将只关心以 JWT 开头的令牌部分并忽略 Bearer 前缀 - 或者任何前缀（如果存在）。

当然，使用这种方法应该记住的一点是，在部署应用程序时，应该包括特定的、已更改的 passport-jwt 模块，因为在 npm-install 上，模块将 reinitiate/update 等等，将不起作用。

Angular 在构建后将 'bearer' 字符串添加到身份验证 header

Angular adds 'bearer' string to authentication header after build

jwt

passport.js

angular