时间戳

首页 > 解决方案 > 令牌服务，令牌拦截器帮助，令牌未存储，Angular 10

angular - 令牌服务，令牌拦截器帮助，令牌未存储，Angular 10

问题描述

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

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 { }

标签： angulartokenangular-servicesangular10

解决方案

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

改变你的onInit()：

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

推荐阅读