Angular 5 HttpInterceptor 并在标头中发送授权令牌 [英] Angular 5 HttpInterceptor and sending Authorization Token in header

问题描述

我的流程是登录页面 -> 主页.

My flow is login page -> home page.

登录页面没有令牌，登录后，服务器提供令牌，用户被重定向到首页.

Login page has no token, after logging in, server provides token and user is redirected to home page.

首页将令牌发送到服务器，令牌被验证，服务器返回数据显示在前端.

Home page sends the token to server, token is verified, server sends back data to display on front end.

HttpInterceptor 触发登录请求 无法读取 null 的属性令牌".我想让拦截器以某种方式忽略登录 api 请求，并且只在令牌存在的情况下拦截后续调用.

HttpInterceptor firing on login request Cannot read property 'token' of null. I would like to have the interceptor somehow ignore the login api request and only intercept on subsequent calls if token exists.

推荐答案

你好，你可以在你的 header 中添加一个键值来区分登录和其他请求，并创建一个拦截器来检查该键是否存在以删除令牌

hello you can a key value in your header to distinguish login from other requests, and create an interceptor to check if that key exist to delete the token

import { HttpClient, HttpHeaders } from '@angular/common/http';
...
login(username, password) {
    let headers = new HttpHeaders();
    headers = headers.append('noToken', 'noToken');
    return this.http.post(loginUrl, data, {headers: headers})
    ...
}

然后创建你的拦截器

export class TokenInterceptor implements HttpInterceptor {
constructor() {}

intercept(httpReq: HttpRequest<any>, next: HttpHandler): 
 Observable<HttpEvent<any>> {
 let headers = httpReq.headers
  .set('Content-Type', 'application/json');

 if (headers.get('noToken') === 'noToken') {
   headers = headers.delete('Authorization').delete('noToken');
 }

 const newReq = httpReq.clone({headers: headers});

 return next.handle(newReq);
 }
}

并将其添加到您的应用模块提供程序

and add it to your app module providers

import { TokenInterceptor } from './token.interceptor';

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

工作解决方案

auth.interceptor.ts

export class AuthInterceptor implements HttpInterceptor {
    constructor(public auth: HouseaccountsService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if(req.headers.get('notoken') !== 'noToken') {
            req = req.clone({
                setHeaders: {
                    Authorization: JSON.parse(localStorage.getItem('currentUser')).token
                }
            });
        }

        return next.handle(req);
    }
}

service.ts

login(user) {
        let loginHeaders = {
            headers: new HttpHeaders({
                'Content-Type': 'application/json',
                'noToken': 'noToken'
            })
        }
        return this.http.post<any>(this.url + '/login', JSON.stringify(user), loginHeaders);
    }

这篇关于Angular 5 HttpInterceptor 并在标头中发送授权令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！