首页 文章

Angular 5 HttpInterceptor并在头文件中发送授权令牌

提问于
浏览
2

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

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

主页将令牌发送到服务器,令牌验证,服务器发回数据显示在前端 .

问题:

HttpInterceptor在登录请求 Cannot read property 'token' of null 上触发 . 我想让拦截器以某种方式忽略登录api请求,并且只在令牌存在时才拦截后续调用 .

1 回答

  • 5

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

    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);
     }
    }
    

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

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

    工作解决方案

    auth.interceptor.js

    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);
        }
    

相关问题