令牌服务，令牌拦截器帮助，令牌未存储，Angular 10答案

【问题标题】：Token Service, Token Interceptor help, token is not being stored, Angular 10令牌服务，令牌拦截器帮助，令牌未存储，Angular 10
【发布时间】：2021-03-11 19:35:05
【问题描述】：

有人可以检查我的代码吗？令牌没有进入本地存储，也没有与令牌拦截器连接。当我检查网络选项卡时，它不是令牌端点。我知道本地存储不是最好的，但这个应用程序将在专用网络中使用。已删除导入以节省空间。

TokenService 获取令牌：

@Injectable({
  providedIn: 'root'
})

export class TokenService {
  constructor(private http: HttpClient,) { }

  public getToken(): Observable<any> {

    const headers = new HttpHeaders({
      'Access-Control-Allow-Origin': '*',
      'Content-Type': 'application/x-www-form-urlencoded',
    })

    let body = new URLSearchParams()
    body.set('username', 'alison')
    body.set('grant_type', 'password')
    body.set('password', 'password')
    body.set('scope', 'Marketplace')
    body.set('client_id', 'Api')
    body.set('client_secret', 'Secret')

    return this.http.post<{ access_token: string }>(`${tokenURl}/connect/token`, body, { headers: headers })
      .pipe(
        tap(res => {
          localStorage.setItem('access_token', res.access_token);
          console.log('access_token:' + JSON.stringify(res.access_token));
        }));
  }

}

令牌拦截器代码：


@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const isApiUrl = req.url.startsWith(Constants.apiRoot);
    const bearerToken = localStorage.getItem('access_token');
    if (isApiUrl) {
      req = req.clone({
        setHeaders: {
          'Content-Type': 'application/json;',
          'Accept': 'application/json',
          'Authorization': `Bearer ${bearerToken}`,
        },
      });
    }
    return next.handle(req);
  }
}

app.component.ts：

export class AppComponent {

  constructor(private tokenService: TokenService,) { }

  ngOnInit(): void {
    this.tokenService.getToken().subscribe(
      data => localStorage.setItem('access_token', data.access_token),
      err => console.log(err),
    );
  }
}

app.module.ts

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule,
    WorksheetModule,
    HttpClientModule,
  ],
  declarations: [
    AppComponent,
  ],
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: TokenInterceptor,
    multi: true
  }],
  bootstrap: [AppComponent],
})
export class AppModule { }

【问题讨论】：

标签： angular token angular-services angular10

【解决方案1】：

您没有订阅this.tokenService.getToken()，您的服务将作为可观察对象返回。

更改您的onInit()：

ngOnInit(): void {
   this.tokenService.getToken().subscribe();
}

【讨论】：

我已经添加了您的建议，很好。虽然当我检查网络选项卡时，它甚至没有命中令牌端点。
@AlisonDev 我没有看到其他任何不合适的地方。也许可能会注释掉 http 拦截器的提供程序以进行调试并可能重新为您的 Angular 应用程序提供服务。