Angular 7未根据请求发送正确的标头

时间:2018-11-08 01:42:58

标签: angular http-headers jwt passport.js angular7

我无法以7号角发送正确的标题! 我在后端使用护照:

"app.get('/api/users', passport.authenticate('jwt', {session: false}), (req, res, next) => {... bla bla bla...}."

当我尝试将有效的令牌从邮递员发送到我的路径/ api /用户时,一切正常,但是当我从角度不这样做时。 (*角度不显示错误!) 假设“载体有效令牌”是有效令牌 我以这种方式发送标题:

getAll() {

const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'Bearer validToke.' 
  });
};

return this.http.get<user[]>(`http://localhost:3000/api/users`, httpOptions);
}

我可以从角度进行身份验证并获取Bearer令牌,一切正常,如果删除了password.authenticate('jwt',{session:false}),我可以获取用户列表

感谢您的阅读!

2 个答案:

答案 0 :(得分:2)

一切似乎对我来说都是正确的-但我在您的代码中做了一些小的更改

在请求中不要绑定HttpOptions直接绑定HttpHeaders,请检查以下代码

getAll() {

const httpHeaders = new HttpHeaders ({
     'Content-Type': 'application/json',
     'Authorization': 'Bearer validToke.' 
   });

return this.http.get<user[]>(`http://localhost:3000/api/users`, { headers: httpHeaders });
}

现在,这将为您的请求添加标头-如果您要用于从其他域获取数据-尝试在服务器上添加cors-浏览器会将请求以HttpOptions的形式进行预显示,然后将其绑定与您的情况下的HttpGet一样

希望它有效-编码愉快!!

答案 1 :(得分:1)

我能够通过创建拦截器来解决此问题:

import { Injectable } from '@angular/core';
    import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
    import { Observable } from 'rxjs';

    import { AuthenticationService } from '../_services/authentication.service';

    @Injectable()
    export class JwtInterceptor implements HttpInterceptor {
      constructor(private authenticationService: AuthenticationService) {}

      intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        let currentUser = this.authenticationService.currentUserValue;
        if (currentUser && currentUser.token) {
          request = request.clone({
            setHeaders: {
              Authorization: `${currentUser.token}`
            }
          });
        }

        return next.handle(request);
      }
    }

谢谢