Build Trading UI

This document is to brief how to setup AntDesignPro front end to use backend Spring boot services.

And Design Pro

The UI is built on top of And Design Pro. The following steps prepare prerequisites.

#install nvm to manage multiple versions of node js
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
nvm install 18.0
npm install --global yarn

Scaffolding

yarn create umi tradui
cd tradui
yarn
export NODE_OPTIONS=--openssl-legacy-provider # need this for node 18 or need to downgrade to node 16
yarn start # open browser and visit http://localhost:8000

We would get a complete demo app for Ant Design Pro now. Let's start from adding authentication to both front end and back end.

Authentication

AntDesignPro changes

App.tsx calls queryCurrentUser() to obtain whether an existing session is available for current user, using the following codes:

const msg = await queryCurrentUser(); //from './services/ant-design-pro/api'

queryCurrentUser() calls /api/currentUser Restful API GET. Without hostname/port, this is GET http://localhost/api/currentUser, which is implemented by AndDesignPro mock API service.

export async function currentUser(options?: { [key: string]: any }) {
  return request<{
    data: API.CurrentUser;
  }>('/api/currentUser', {
    method: 'GET',
    credentials: 'include', //we need to add this row to allow Set-Cookie HTTP header to work, which is required for Spring session management. Same applied on /api/login/account
    ...(options || {}),
  });
}

AndDesignPro mock API is at /mock/*, e.g., /mock/user.ts. Now we switch to a Spring boot service (AppGateway), which is built with step in AppGateway. Assuming AppGateway is listening on http://appgate, we would configure Tradui by adding the following codes to app.tsx:

import { RequestConfig } from 'umi';

export const request: RequestConfig = {
  prefix: 'http://appgate'
};

We'd expect appgateway provide same set of APIs provided by /mock/*, i.e., for authentication, Tradui calls to http://appgate/api/currentUser needs to get returns like:

      res.send({
        status: 'ok', //or 'error` if authentication failed
        type,
        currentAuthority: 'admin',
      });