feat: add process.env.API_CLIENT_STORAGE_PREFIX (#4395)

* feat: add process.env.API_CLIENT_STORAGE_PREFIX

* fix: test error

* fix: process.env.API_CLIENT_STORAGE_PREFIX

packages/core/app/client/.umirc.ts

@@ -40,6 +40,7 @@ export default defineConfig({
         window['__webpack_public_path__'] = '{{env.APP_PUBLIC_PATH}}';
         window['__nocobase_public_path__'] = '{{env.APP_PUBLIC_PATH}}';
         window['__nocobase_api_base_url__'] = '{{env.API_BASE_URL}}';
+        window['__nocobase_api_client_storage_prefix__'] = '{{env.API_CLIENT_STORAGE_PREFIX}}';
         window['__nocobase_ws_url__'] = '{{env.WS_URL}}';
         window['__nocobase_ws_path__'] = '{{env.WS_PATH}}';
       `,

packages/core/app/client/src/pages/index.tsx

@@ -1,3 +1,12 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
 import { Application } from '@nocobase/client';
 import { NocoBaseClientPresetPlugin } from '@nocobase/preset-nocobase/client';
 import devDynamicImport from '../.plugins/index';
@@ -5,6 +14,10 @@ import devDynamicImport from '../.plugins/index';
 export const app = new Application({
   apiClient: {
     // @ts-ignore
+    storagePrefix:
+      // @ts-ignore
+      window['__nocobase_api_client_storage_prefix__'] || process.env.API_CLIENT_STORAGE_PREFIX || 'NOCOBASE_',
+    // @ts-ignore
     baseURL: window['__nocobase_api_base_url__'] || process.env.API_BASE_URL || '/api/',
   },
   // @ts-ignore

packages/core/cli/src/util.js

@@ -286,6 +286,7 @@ function buildIndexHtml(force = false) {
   const data = fs.readFileSync(tpl, 'utf-8');
   const replacedData = data
     .replace(/\{\{env.APP_PUBLIC_PATH\}\}/g, process.env.APP_PUBLIC_PATH)
+    .replace(/\{\{env.API_CLIENT_STORAGE_PREFIX\}\}/g, process.env.API_CLIENT_STORAGE_PREFIX)
     .replace(/\{\{env.API_BASE_URL\}\}/g, process.env.API_BASE_URL || process.env.API_BASE_PATH)
     .replace(/\{\{env.WS_URL\}\}/g, process.env.WEBSOCKET_URL || '')
     .replace(/\{\{env.WS_PATH\}\}/g, process.env.WS_PATH)
@@ -301,6 +302,7 @@ exports.initEnv = function initEnv() {
     APP_KEY: 'test-jwt-secret',
     APP_PORT: 13000,
     API_BASE_PATH: '/api/',
+    API_CLIENT_STORAGE_PREFIX: 'NOCOBASE_',
     DB_DIALECT: 'sqlite',
     DB_STORAGE: 'storage/db/nocobase.sqlite',
     DB_TIMEZONE: '+00:00',

packages/core/client/src/application/Application.tsx

@@ -134,6 +134,9 @@ export class Application {
     this.pluginSettingsManager = new PluginSettingsManager(options.pluginSettings, this);
     this.addRoutes();
     this.name = this.options.name || getSubAppName(options.publicPath) || 'main';
+    this.i18n.on('languageChanged', (lng) => {
+      this.apiClient.auth.locale = lng;
+    });
   }
 
   private initRequireJs() {

packages/core/client/src/i18n/i18n.ts

@@ -30,7 +30,7 @@ i18n
   // .use(Backend)
   .use(initReactI18next)
   .init({
-    lng: localStorage.getItem('NOCOBASE_LOCALE') || 'en-US',
+    lng: 'en-US',
     // debug: true,
     defaultNS: 'client',
     // fallbackNS: 'client',
@@ -47,7 +47,3 @@ i18n
     keySeparator: false,
     nsSeparator: false,
   });
-
-i18n.on('languageChanged', (lng) => {
-  localStorage.setItem('NOCOBASE_LOCALE', lng);
-});

packages/core/devtools/umiConfig.js

@@ -8,7 +8,7 @@ const path = require('path');
 console.log('VERSION: ', packageJson.version);
 
 function getUmiConfig() {
-  const { APP_PORT, API_BASE_URL, APP_PUBLIC_PATH } = process.env;
+  const { APP_PORT, API_BASE_URL, API_CLIENT_STORAGE_PREFIX, APP_PUBLIC_PATH } = process.env;
   const API_BASE_PATH = process.env.API_BASE_PATH || '/api/';
   const PROXY_TARGET_URL = process.env.PROXY_TARGET_URL || `http://127.0.0.1:${APP_PORT}`;
   const LOCAL_STORAGE_BASE_URL = 'storage/uploads/';
@@ -40,6 +40,7 @@ function getUmiConfig() {
       'process.env.APP_PUBLIC_PATH': process.env.APP_PUBLIC_PATH,
       'process.env.WS_PATH': process.env.WS_PATH,
       'process.env.API_BASE_URL': API_BASE_URL || API_BASE_PATH,
+      'process.env.API_CLIENT_STORAGE_PREFIX': API_CLIENT_STORAGE_PREFIX,
       'process.env.APP_ENV': process.env.APP_ENV,
       'process.env.VERSION': packageJson.version,
       'process.env.WEBSOCKET_URL': process.env.WEBSOCKET_URL,

packages/core/sdk/src/APIClient.ts

@@ -9,7 +9,6 @@
 
 import axios, { AxiosInstance, AxiosRequestConfig, AxiosRequestHeaders, AxiosResponse } from 'axios';
 import qs from 'qs';
-import getSubAppName from './getSubAppName';
 
 export interface ActionParams {
   filterByTk?: any;
@@ -32,14 +31,30 @@ export type IResource = {
 export class Auth {
   protected api: APIClient;
 
-  protected KEYS = {
-    locale: 'NOCOBASE_LOCALE',
-    role: 'NOCOBASE_ROLE',
-    token: 'NOCOBASE_TOKEN',
-    authenticator: 'NOCOBASE_AUTH',
-    theme: 'NOCOBASE_THEME',
+  get storagePrefix() {
+    return this.api.storagePrefix;
+  }
+
+  get KEYS() {
+    const defaults = {
+      locale: this.storagePrefix + 'LOCALE',
+      role: this.storagePrefix + 'ROLE',
+      token: this.storagePrefix + 'TOKEN',
+      authenticator: this.storagePrefix + 'AUTH',
+      theme: this.storagePrefix + 'THEME',
     };
 
+    if (this.api['app']) {
+      const appName = this.api['app']?.getName?.();
+      if (appName) {
+        defaults['role'] = `${appName.toUpperCase()}_` + defaults['role'];
+        defaults['locale'] = `${appName.toUpperCase()}_` + defaults['locale'];
+      }
+    }
+
+    return defaults;
+  }
+
   protected options = {
     locale: null,
     role: null,
@@ -49,22 +64,9 @@ export class Auth {
 
   constructor(api: APIClient) {
     this.api = api;
-    this.initKeys();
     this.api.axios.interceptors.request.use(this.middleware.bind(this));
   }
 
-  initKeys() {
-    if (typeof window === 'undefined') {
-      return;
-    }
-    const appName = getSubAppName(this.api['app'] ? this.api['app'].getPublicPath() : '/');
-    if (!appName) {
-      return;
-    }
-    this.KEYS['role'] = `${appName.toUpperCase()}_` + this.KEYS['role'];
-    this.KEYS['locale'] = `${appName.toUpperCase()}_` + this.KEYS['locale'];
-  }
-
   get locale() {
     return this.getLocale();
   }
@@ -266,6 +268,7 @@ export class MemoryStorage extends Storage {
 interface ExtendedOptions {
   authClass?: any;
   storageClass?: any;
+  storagePrefix?: string;
 }
 
 export type APIClientOptions = AxiosInstance | (AxiosRequestConfig & ExtendedOptions);
@@ -274,6 +277,7 @@ export class APIClient {
   axios: AxiosInstance;
   auth: Auth;
   storage: Storage;
+  storagePrefix = 'NOCOBASE_';
 
   getHeaders() {
     const headers = {};
@@ -296,7 +300,8 @@ export class APIClient {
     if (typeof instance === 'function') {
       this.axios = instance;
     } else {
-      const { authClass, storageClass, ...others } = instance || {};
+      const { authClass, storageClass, storagePrefix = 'NOCOBASE_', ...others } = instance || {};
+      this.storagePrefix = storagePrefix;
       this.axios = axios.create(others);
       this.initStorage(storageClass);
       if (authClass) {