新しいアプリに ngx-admin を使用しています。Nebular Auth フレームワークを利用して JWT トークンを使用し、バックエンド REST サーバーへのアクセスを有効にしました。
Postman を使用して API をテストするときに、REST サーバーを正常に認証してアクセスできます。Authorization HTTP ヘッダーを形式のトークンでフォーマットしますJWT <token>
。ngx-admin ベースのアプリから API にアクセスする際の問題は、NbAuthJWTInterceptor
クラスが Authorization HTTP ヘッダーを形式で提示しているBearer JWT <token>
ため、バックエンド API がトークンを抽出できないことです。
NbAuthJWTInterceptor
クラスを構成またはオーバーライドして Authorization HTTP ヘッダーを形式で設定するにはどうすればよいですJWT <token>
か?
私が使用しているクライアント側で:
- ngx 管理者 3.2.1
- 角度7.2.1
- 星雲/認証 3.4.2
サーバー側では、MongoDB で以下を使用しています。
- 急行 4.6.13
- パスポート 0.4.0
- パスポート-jwt 4.0.0
- jsonwebtoken 8.5.1
- マングース5.1.7
Postman を使用して正常にサインインし、認証トークンを次のようにフォーマットしたトークンを使用して、API へのさまざまな呼び出し (GET、POST、PUT、DELETE) をテストしJWT <token>
、要求が認証され、正しいデータが返されました。
同じリクエストがアプリによって提示されたとき、NbAuthJWTInterceptor
クラスは認証トークンを次のようにフォーマットするBearer JWT <token>
ため、リクエストは「無許可」として拒否されます
REST サーバー側での認証トークンへのアクセスとデコード:
module.exports = function (passport) {
var opts = {};
opts.jwtFromRequest = ExtractJwt.fromAuthHeaderWithScheme('JWT');
opts.secretOrKey = config.secret;
passport.use(new JwtStrategy(opts, function (jwt_payload, done) {
User.findOne({
id: jwt_payload._id
}, function (err, user) {
if (err) {
return done(err, false);
}
if (user) {
done(null, user);
} else {
done(null, false);
}
});
}));
};
API エンドポイントと HTTP インターセプターを構成して、クライアント エンドに認証トークンを挿入します。
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
AppRoutingModule,
// NbEvaIconsModule,
NgbModule.forRoot(),
ThemeModule.forRoot(),
CoreModule.forRoot(),
NbAuthModule.forRoot({
strategies: [
NbPasswordAuthStrategy.setup({
name: 'email',
token: {
class: NbAuthJWTToken,
key: 'token',
},
baseEndpoint: '/api',
login: {
endpoint: '/auth/signin',
method: 'post',
},
register: {
endpoint: '/auth/signup',
method: 'post',
},
logout: {
endpoint: '/auth/sign-out',
method: 'post',
},
requestPass: {
endpoint: '/auth/request-pass',
method: 'post',
},
resetPass: {
endpoint: '/auth/reset-pass',
method: 'post',
},
}),
],
forms: {
login: formDelaySetting,
register: formDelaySetting,
requestPassword: formSetting,
resetPassword: formSetting,
logout: {
redirectDelay: 0,
},
},
}),
NbThemeModule.forRoot({ name: 'corporate' }),
NbToastrModule.forRoot(),
NbLayoutModule,
],
bootstrap: [AppComponent],
providers: [
{ provide: APP_BASE_HREF, useValue: '/' },
{ provide: HTTP_INTERCEPTORS, useClass: NbAuthJWTInterceptor, multi: true },
{ provide: NB_AUTH_TOKEN_INTERCEPTOR_FILTER, useValue: (req) => { return false; } },
],
})