For basic authentication, the RESTful API typically exposes an authentication endpoint returning whether the authentication is successful. When a user tries to log in, we can call the API to create a basic authentication header as follows:

executeBasicAuthenticationService(user, pwd) {
    return axios.get('/basicauth',
        { headers: { authorization: 'Basic ' + window.btoa(user + ":" + pwd) } })
}

We are making a GET request to the authentication URL with the authorization header added in. If the response to the preceding call is 200, then we can set up an axios interceptor to add the authorization header onto every subsequent RESTful API call:

this.setupAxiosInterceptors('Basic ' + window.btoa(user + ":" + pwd))

setupAxiosInterceptors(basicAuthHeader) {

    axios.interceptors.request.use(
        (config) => {
            config.headers.authorization = basicAuthHeader
            return config
        }
    )
}

axios.interceptors.request.use configures an interceptor. config.headers.authorization = basicAuthHeader adds an authorization header.

The interceptor adds the header on all subsequent RESTful API calls.