代码之家 › 专栏 › 技术社区 › moh

在angular 5 app的标头中设置JWT标记

django-rest-framework-jwt angular5 single-page-application django-rest-framework angular

moh · 技术社区 · 8 年前

您好,我正在为后端和angular 5应用程序开发django rest框架作为客户端。。我需要在每个请求中向服务器发送JWT令牌和内容类型。如何在请求头中设置“jsonwebtoken”和“内容类型”???? 看起来RequestOptions和Header在angular 5中不受欢迎有什么解决方案吗???

import {Injectable} from '@angular/core';
import {Headers, RequestOptions} from '@angular/http'
import {HttpClient} from "@angular/common/http";
import 'rxjs/add/operator/map'


@Injectable()
export class UserService {

  private options;
  constructor(private http: HttpClient) {
    const token = localStorage.getItem('theuser');

    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Authorization', 'Bearer' + ' ' + token)
    this.options = new RequestOptions({headers: headers});

    console.log(this.options)
  }


  userInfo() {
    return this.http.get<any>("http://localhost:8000/user-detail/",this.options)

  }

}

2 回复 | 直到 8 年前

Tushar Nikam 8 年前

您可以扩展http侦听器类。创建新的服务令牌。拦截器。ts包含以下内容。

import { Injectable } from '@angular/core';

import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
declare var localStorage : any;

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor() {}
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let allowedUrls =( request.url.indexOf("dealer/signup") < 0 && request.url.indexOf("dealer/login") < 0 );   

    if(allowedUrls){

        let authToken = localStorage.getItem("dealertoken");
        request = request.clone({
            headers: request.headers.set('Authorization', 'Bearer '+ authToken)
            /* setHeaders: {
                Authorization: 'Bearer '+ authToken
            } */
        });
    }
    return next.handle(request);
  }
}

并将其导入应用程序。单元ts

providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ],

Suren Srapyan 8 年前

您传递的第二个参数是选项。它包含 headers 所有物可以将标头添加到此属性中。

那么...怎么样 已弃用 -导入 HttpHeaders 从 @angular/common/http .

如果需要为每个令牌添加JWT,最好使用 HttpInterceptor

推荐文章

Mani Kant Tiwari · 如何对阵列中的对象应用ng repeat

8 年前

Amri NamshubWriter · Nginx:在我的缓存中打一个洞没有按预期工作

8 年前

Bruno · Vue。js根据条件绑定到类

8 年前

moh · 在angular 5 app的标头中设置JWT标记

8 年前

espresso_coffee · 单页应用程序框架和登录页?

8 年前

Iqbal DP · SPA网站中的路由器堆叠组件

8 年前

nightmaredevil2010 · 在angularjs的模式中启用html5模式时会发生什么?

8 年前

MysticEarth · 共享登录名。NET Core 2网络应用和VueJS spa

8 年前

harsrawa · 关闭浏览器选项卡并退出Angular2应用程序

8 年前

Martijn van der Bruggen · 画布:并非反弹球对象数组中的所有对象都显示出来

8 年前