Update: http 攔截器，檢查 base url 的檢查 method

Tomas

2023-09-14 d33fc7f1df66c1e451c5d79ab59a5bc9dce4e496

 PAMapp/shared/services/httpClient.ts

@@ -1,22 +1,40 @@
import { AxiosRequestConfig, AxiosError, AxiosResponse} from 'axios';
import ErrorMessageBox from '../errorService';
import axios from 'axios';
import _ from 'lodash';

import messageBoxService from './message-box.service';

const notRequireInterceptorErrorUrl = [
  '/otp/verify',
  // '/otp/sendOtp',
  '/eService/authenticate',
  '/login/validate/get_img_code',
  '/login/validate/verify_img_code',
  '/api/access_analysis/insert'
];

function getBaseUrl(): string {
  const baseUrl = process.env.BASE_URL;
  if (!baseUrl) {
    throw new Error('BASE_URL is not defined in process.env');
  }
  // const pattern = /^(https?:\/\/)[\w.-]+(:\d+)?/i; // 更嚴格的URL驗證
  // if (!pattern.test(baseUrl)) {
  //   throw new Error('Invalid BASE_URL');
  // }
  // 不需要再清理URL，因為它已經是絕對URL
  return baseUrl;
}
export const http = axios.create({
  baseURL: process.env.BASE_URL,
  baseURL: getBaseUrl(), // 使用函數動態獲取baseURL
  withCredentials: true
});

let apiNumber = 0;

http.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    apiNumber += 1;
    loadingStart();
    addHttpHeader(config);
    return config;
@@ -25,11 +43,17 @@

http.interceptors.response.use(
  (response: AxiosResponse) => {
    loadingFinish();
    apiNumber -= 1;
    if (apiNumber === 0) {
      loadingFinish();
    }
    return response;
  },
  (error: AxiosError) => {
    loadingFinish();
    apiNumber -= 1;
    if (apiNumber === 0) {
      loadingFinish();
    }
    showErrorMessageBox(error)
    return Promise.reject(error);
  }
@@ -37,7 +61,8 @@

function addHttpHeader(config: AxiosRequestConfig): void {
  config.headers = {
    Authorization: 'Bearer ' + localStorage.getItem('id_token')
    Authorization: 'Bearer ' + localStorage.getItem('id_token'),
    'content-type': 'application/json'
  }
}

@@ -54,18 +79,23 @@
};

function showErrorMessageBox(error: any): void {
  // console.log('error', error, error.response);
  setTimeout(() => {
    // NOTE: 此為 HOT FIX 顧問登入失敗後，會出現逾時的 dialog [Tomas, 2022/7/20 14:21]
    if(error.config.url.includes('/eService/authenticate')) return;
    if (error.config.url.includes('/otp/sendOtp')) {
      messageBoxService.showErrorMessage('', error);
      return
    }
    if (!_.includes(notRequireInterceptorErrorUrl, error.config.url)) {
      switch (error.response.status) {
        case 401:
          Promise.all([ErrorMessageBox('登入逾時'), window.$nuxt.$store.dispatch('localStorage/actionStorageClear')]).then(() => {
          Promise.all([messageBoxService.showErrorMessage('登入逾時'), window.$nuxt.$store.dispatch('localStorage/actionStorageClear')]).then(() => {
            _.isEqual(window.$nuxt.$route.name, 'index') ? location.reload() : window.$nuxt.$router.push('/');
          });
          break;

        default:
          ErrorMessageBox('', error);
          messageBoxService.showErrorMessage('', error);
          break;
      }
    }