Design and Usage of JD Logistics Gateway Frontend Plugin Based on Axios

Background

In large‑scale business development, different services need to be unified through a gateway layer for security, routing, load balancing, and standardized API formats. Frontend developers must handle various environments and user accounts, which led to the creation of a zero‑cost Axios‑based plugin for seamless gateway integration.

axiosGW Plugin

The plugin replaces a previous internal fetch library with Axios, offering broader applicability and easier onboarding for frontend teams. It supports multiple account types such as passport, erp, inner_erp, and tls_inner_erp.

Design Model

Accounts are categorized (passport, erp, inner_erp, tls_inner_erp) and environments are split into development, prepare, and production. The plugin also handles 401 login redirects based on account type.

Implementation Flow

1. The request interceptor rewrites the URL according to the current environment and adds required headers (e.g., lop‑dn). 2. The response interceptor checks for a 401 status and triggers a login redirect. 3. The plugin is flexible, allowing third‑party configuration of service domains or redirect URLs.

Installation

npm install @jdl/axios-gateway --registry=http://registry.m.jd.com

Usage

Import Axios and the plugin, create an Axios instance, define a configuration object, and invoke the plugin:

import axios from 'axios'

import axiosGW from '@jdl/axios-gateway';

const instance = axios.create({ timeout: 5000 })

const config = {

env: process.env.NODE_ENV,

domain: process.env.VUE_APP_GW_DOMAIN,

appid: process.env.VUE_APP_GW_APPID,

appType: 'pc',

clientInfo: { appName: process.env.VUE_APP_GW_APPNAME, client: 'pc' },

loginDomain: process.env.VUE_APP_LOGIN_DOMAIN,

loginType: process.env.VUE_APP_LOGINTYPE,

stopLogin: true

}

axiosGW(instance, config)

export default instance

Config Attributes

The configuration object defines fields such as env, domain, appid, loginType, and others, each with documentation on purpose and requirement.

Gateway Configuration

Setting the loginType field selects the appropriate account configuration. Supported types are passport, erp, inner_erp, and tls_inner_erp.

Third‑Party Gateway Domain Configuration

External domain mappings can be added, for example:

'erptest': {

domains: {

development: 'https://test-XXX.jd.com',

prepare: 'https://uat-XXX.jd.com',

production: 'https://lop-XXX.jd.com'

},

loginUrl: function (options) { return '//passport.jd.com/uc/login?ReturnUrl=XXXXXX' }

}

Supported Login Methods

The plugin supports passport, erp, inner_erp, and tls_inner_erp login flows.

Custom Login Redirect

When a 401 status is returned, the plugin triggers a default login redirect. Developers can customize this by providing a changeLoginHref callback in the config or by contacting the support group for manual configuration.

LOP‑DN Setting

Global domain can be set via the domain field, or per‑request headers can be added, for example:

export function getQueryCod(data) {

return axios({

method: 'POST',

url: '/logistics/getQueryCod',

data,

headers: { 'LOP-DN': 'xxx.jd.com' }

})

}

Alternatively, an interceptor can apply routing rules to set LOP-DN in bulk.

Custom Response Handling

If the API response does not follow the standard 401‑based login pattern, a responseHandle callback can process custom response formats, provided the response includes a status field.

External Gateway Domain Configuration for Non‑Standard Accounts

For accounts not covered by the built‑in types, external configuration is allowed. Example:

gwEnvInfos: {

'yourPassport': {

domains: {

development: 'https://test-XXX.jd.com',

prepare: 'https://uat-XXX.jd.com',

production: 'https://lop-XXX.jd.com'

},

loginUrl: function (options) { return '//passport.jd.com/uc/login?ReturnUrl=XXXXXX' }

}

}

Disable Gateway Layer

Setting closeGw: true disables the gateway integration entirely.

Conclusion

The shared plugin library provides a unified way to access different development environments, leveraging Axios interceptors for minimal learning overhead and high extensibility, making gateway integration a fundamental yet adaptable component of frontend architecture.