0

新しいアプリに 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; } },
    ],
})
4

2 に答える 2