我对Angular5 / TypeScript比较陌生,所以我为(也许)琐碎的问题道歉。
我正在尝试实现我打算使用的身份验证服务,以便让我的Angular5前端消耗一些由wordpress后端公开的REST API。
到目前为止,该服务已实施并正常运行。我现在缺少的是一种将登录数据注入REST请求的方法。
更确切地说,我知道如何做到这一点,但我现在不知道如何访问我之前存储在共享服务中的登录信息。
但是让我更具体一点,让我分享一下我的代码:
// auth.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import { JwtHelperService } from '@auth0/angular-jwt';
interface IUser
{
token: string,
token_expires: number,
user_display_name: string,
}
@Injectable()
export class AuthService
{
private currentUser: IUser = null;
private nonce: string = '';
constructor(
private http: HttpClient,
private jwt: JwtHelperService,
)
{
// set User Info if saved in local/session storage
.
.
.
}
logIn(username: string, password: string, persist: boolean): Observable<boolean>
{
return this.http.post(
API_BASE_DOMAIN + API_BASE_PATH + '/jwt-auth/v1/token',
{ username: username, password: password },
{
observe: 'response', // Full response instead of the body only
withCredentials: true, // Send cookies
}
).map(response => {
this.nonce = response.headers.get('X-WP-Nonce');
const body: any = response.body
// login successful if there's a jwt token in the response
if (body.token)
{
// set current user data
this.currentUser = <IUser>body;
// store username and jwt token in local storage to keep user logged in between page refreshes
let storage = (persist) ? localStorage : sessionStorage;
storage.setItem('currentUser', JSON.stringify(this.currentUser));
// return true to indicate successful login
return true;
}
else
{
// return false to indicate failed login
return false;
}
});
}
getNonce(): string
{
console.log((this.nonce) ? this.nonce : '');
return (this.nonce) ? this.nonce : '';
}
getToken(): string
{
console.log((this.currentUser) ? this.currentUser.token : '');
return (this.currentUser) ? this.currentUser.token : '';
}
}
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { JwtModule } from '@auth0/angular-jwt';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { AuthService } from './main/auth/services/auth.service';
import { AuthGuardService } from './main/auth/services/auth-guard.service';
import { API_BASE_DOMAIN } from './main/auth/services/auth.service';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NonceHttpInterceptor } from './main/auth/auth.interceptor';
const appRoutes: Routes = [
.
.
.
];
@NgModule({
declarations: [
AppComponent
],
imports : [
BrowserModule,
HttpClientModule,
RouterModule.forRoot(appRoutes),
// Jwt Token Injection
JwtModule.forRoot({
config: {
tokenGetter: (***AuthService?????***).getToken,
whitelistedDomains: [ API_BASE_DOMAIN ]
}
})
],
providers : [
AuthService,
AuthGuardService,
{
provide: HTTP_INTERCEPTORS,
useClass: NonceHttpInterceptor,
multi: true
}
],
bootstrap : [
AppComponent
]
})
export class AppModule
{
}
正如您在// JWT Token Injection的代码中所看到的,我需要指定一个在我的auth.service中实现的令牌getter。
在组件文件中,我可以通过将服务作为构造函数的参数注入来访问其公共方法,如下所示:
//login.component.ts
import { AuthService } from '../services/auth.service';
@Component({
.
.
.
})
export class MyLoginComponent implements OnInit
{
constructor(
private authService: AuthService,
)
{
.
.
.
}
onFormSubmit()
{
this.authService.logIn(uname, pwd, persist)
.subscribe(
.
.
.
);
}
}
但我似乎找不到在模块级别访问服务方法的方法!
我知道,我可以对tokenGetter使用静态访问,并在类级而不是实例级别移动所有内容(例如:AuthService.getToken
),但我认为有一种更好,更优雅的方式来访问{{ 1}}方法。
提前感谢您提供任何提示/帮助。
答案 0 :(得分:2)
对于像
这样的特定情况,Angular2-jwt支持使用custom options factory functiontokenGetter函数依赖于服务
像这样定义工厂功能
export function jwtOptionsFactory(authService: AuthService) {
return {
tokenGetter: () => {return authService.getToken();},
whitelistedDomains: [ API_BASE_DOMAIN ]
}
}
然后将该函数声明为JWT_OPTIONS
标记
imports: [
JwtModule.forRoot({
jwtOptionsProvider: {
provide: JWT_OPTIONS,
useFactory: jwtOptionsFactory,
deps: [AuthService]
}
})
],
注意:如果定义了jwtOptionsFactory,则忽略config。两种配置选择都不能同时定义。