这个问题通常是由于将AuthHttpInterceptor
配置为在安装auth0-js
时不正确设置。如果在拦截器中没有正确设置令牌,请求无法自动附加令牌。
以下是正确设置AuthHttpInterceptor的示例代码:
首先,在你的module.ts文件中,导入AuthModule.forRoot()
,然后在providers中设置一个HttpInterceptor
,比如AuthHttpInterceptor
:
import { AuthModule, AuthHttpInterceptor } from '@auth0/auth0-angular';
@NgModule({
...
imports: [
AuthModule.forRoot({
domain: 'YOUR_DOMAIN',
clientId: 'YOUR_CLIENT_ID',
}),
],
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: AuthHttpInterceptor,
multi: true,
},]
})
export class AppModule { }
接下来,在你的service.ts文件中,导入HttpClient
和AuthService
,然后在get或post请求函数中设置headers,且该headers中要添加Authorization属性,值为'Bearer ' + authService.getAccessToken()
:
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthService } from '@auth0/auth0-angular';
@Injectable({
providedIn: 'root',
})
export class MyService {
constructor(
private http: HttpClient,
private authService: AuthService,
) {}
doGetRequest() {
const headers = new HttpHeaders({
'Content-Type': 'application/json',
Authorization: 'Bearer ' + this.authService.getAccessToken(),
});
return this.http.get('https://my.api.com/get', { headers });
}
doPostRequest(payload: any) {
const headers = new HttpHeaders({
'Content-Type': 'application/json',
Authorization: 'Bearer ' + this.authService.getAccessToken(),
});
return this.http.post('https://my.api.com/post', payload, { headers });
}
}
这样,拦截器就会正确的自动附加令牌到你的请求中了!