修复生产环境下路由各种问题

.webpackrc.js

+const config = require('./config');
+
 const proxy = {
   target: "http://192.168.1.22:8080",
   changeOrigin: true,
@@ -33,7 +35,7 @@ module.exports = {
   hash: true,
   env: {
     development: {
-      publicPath: "/",
+      publicPath: config.dev.publicPath,
       extraBabelPlugins: [
         "dva-hmr",
         "lodash",
@@ -46,16 +48,12 @@ module.exports = {
       }
     },
     production: {
-      publicPath: "/bm/",
-      define: {
-        contextPath: "/bm",
-        apiContextPath: "/bm"
-      },
+      publicPath: config.prod.publicPath,
       extraBabelPlugins: [
         "lodash",
         ["import", { "libraryName": "antd", "style": true }]
       ],
-      devtool: "hidden-source-map"
+      // devtool: "hidden-source-map"
     }
   }
 };

config.js

+const makeSureEndsWithSlash = (path) => {
+  if (!path || !path.endsWith('/')) {
+    return `${path || ''}/`;
+  } else {
+    return path;
+  }
+};
+
+const makeSureStartsWithSlash = (path) => {
+  if (!path || !path.startsWith('/')) {
+    return `/${path || ''}`;
+  } else {
+    return path;
+  }
+};
+
+const tripEndSlash = (path) => {
+  if (path && path.endsWith('/')) {
+    return path.slice(0, path.length - 1);
+  } else {
+    return path;
+  }
+};
+
+const contextPathDev = '';
+const contextPathProd = 'bm/console';
+
+const apiContextPathDev = '';
+const apiContextPathProd = 'bm';
+
+module.exports = {
+  dev: {
+    publicPath: makeSureEndsWithSlash(makeSureStartsWithSlash(contextPathDev)),
+    basename: tripEndSlash(makeSureStartsWithSlash(contextPathDev)),
+    contextPath: tripEndSlash(makeSureStartsWithSlash(contextPathDev)),
+    apiContextPath: tripEndSlash(makeSureStartsWithSlash(apiContextPathDev)),
+  },
+  prod: {
+    publicPath: makeSureEndsWithSlash(makeSureStartsWithSlash(contextPathProd)),
+    basename: tripEndSlash(makeSureStartsWithSlash(contextPathProd)),
+    contextPath: tripEndSlash(makeSureStartsWithSlash(contextPathProd)),
+    apiContextPath: tripEndSlash(makeSureStartsWithSlash(apiContextPathProd)),
+  },
+};

src/index.js

@@ -6,13 +6,16 @@ import { initApp } from './data/app';
 import appModel from './models/app';
 import routerConfig from './router';
 import { processError } from './utils/error';
+import config from './utils/config';
 import './index.css';
 
 moment.locale('zh-cn');
 
 // 1. Initialize
 const app = dva({
-  history: getHistory(),
+  history: getHistory({
+    basename: config.basename,
+  }),
   onError(error) {
     // eslint-disable-next-line no-console
     processError(error);

src/models/domain.js

 import { routerRedux } from 'dva/router';
 import { fetchDomains, switchDomain, currentDomain } from '../services/domain';
-import { fullPath } from '../utils/helper';
 import { getDomain, histories, setDomain } from '../utils/auth';
 import config from '../utils/config';
 
@@ -33,9 +32,9 @@ export default {
       yield put({ type: 'queryInit', payload: path });
       const latest = yield call(histories.getLatest, 'module');
       if (latest && config.fastNavigationPage) {
-        yield put(routerRedux.push(fullPath('/fastNav')));
+        yield put(routerRedux.push('/fastNav'));
       } else {
-        yield put(routerRedux.push(fullPath('/main')));
+        yield put(routerRedux.push('/main'));
       }
     },
   },

src/models/login.js

@@ -2,7 +2,7 @@ import { routerRedux } from 'dva/router';
 import { authorize, login, userInfo } from '../services/login';
 import { validate as passValidate } from '../services/login/password';
 import { requestCode, validate as ucaValidate } from '../services/login/uca';
-import { fullPath, encrypt } from '../utils/helper';
+import { encrypt } from '../utils/helper';
 import { setToken, setUser, setDomain, histories } from '../utils/auth';
 import { switchDomain, currentDomain } from '../services/domain';
 import { errors } from '../utils/error';
@@ -16,7 +16,7 @@ const successAuthed = async (tokenId, userName, remember) => {
   await setUser(uInfo.id, uInfo.name);
   const path = await histories.getLatest('domain');
   if (!path) {
-    getStore().dispatch(routerRedux.push(fullPath('/domain')));
+    getStore().dispatch(routerRedux.push('/domain'));
   } else {
     await switchDomain(path);
     const domain = await currentDomain();
@@ -24,12 +24,12 @@ const successAuthed = async (tokenId, userName, remember) => {
       await setDomain(domain.name, path);
       const latest = await histories.getLatest('module');
       if (latest && config.fastNavigationPage) {
-        getStore().dispatch(routerRedux.push(fullPath('/fastNav')));
+        getStore().dispatch(routerRedux.push('/fastNav'));
       } else {
-        getStore().dispatch(routerRedux.push(fullPath('/main')));
+        getStore().dispatch(routerRedux.push('/main'));
       }
     } else {
-      getStore().dispatch(routerRedux.push(fullPath('/domain')));
+      getStore().dispatch(routerRedux.push('/domain'));
     }
   }
 };

src/models/main/index.js

@@ -3,7 +3,6 @@ import isString from 'lodash/isString';
 import { logout } from '../../services/main';
 import { fetchDomains, switchDomain, currentDomain } from '../../services/domain';
 import { getMenus, getModuleInfo } from '../../data/modules';
-import { fullPath } from '../../utils/helper';
 import { delToken, getDomain, setDomain, delDomain, getUser, delUser } from '../../utils/auth';
 
 const createMenu = async (configure) => {
@@ -107,12 +106,12 @@ export default {
       const { path, name } = yield call(currentDomain);
       yield call(setDomain, name, path);
       yield put({ type: 'switchDomainSuccess', payload: name });
-      yield put(routerRedux.push(fullPath('/main')));
+      yield put(routerRedux.push('/main'));
     },
     *fetchUser(ignored, { put, call }) {
       const user = yield call(getUser);
       if (!user) {
-        yield put(routerRedux.push(fullPath('/login')));
+        yield put(routerRedux.push('/login'));
       }
       yield put({ type: 'queryUserSuccess', payload: user.name });
     },
@@ -126,7 +125,7 @@ export default {
       yield call(delToken);
       yield call(delUser);
       yield call(delDomain);
-      yield put(routerRedux.push(fullPath('/login')));
+      yield put(routerRedux.push('/login'));
     },
   },
 

src/router.js

@@ -5,14 +5,11 @@ import isString from 'lodash/isString';
 import get from 'lodash/get';
 import config from './utils/config';
 import { isAuthed, hasDomain, histories } from './utils/auth';
-import { fullPath } from './utils/helper';
 import { processError } from './utils/error';
 import App from './routes/app';
 import { getMenus, getModuleInfo, getModuleLayout } from './data/modules';
 import Monk from './routes/main/monk';
 
-const { contextPath } = config;
-
 const registerModel = (app, model) => {
 // eslint-disable-next-line no-underscore-dangle
   if (!(app._models.filter(m => m.namespace === model.namespace).length === 1)) {
@@ -22,13 +19,13 @@ const registerModel = (app, model) => {
 
 const maybeLogin = async (replace) => {
   if (!(await isAuthed())) {
-    return replace(fullPath('/login'));
+    return replace('/login');
   }
 };
 
 const maybeSwitch = async (replace) => {
   if (!(await hasDomain())) {
-    return replace(fullPath('/domain'));
+    return replace('/domain');
   }
 };
 
@@ -159,15 +156,15 @@ const createRoutes = async (app, modules, groups, basePath) => {
 function RouterConfig({ history, app }) {
   const routes = [
     {
-      path: `${contextPath}/`,
+      path: '/',
       component: App,
       indexRoute: {
         onEnter: (nextState, replace, cb) => {
           histories.getLatest('module').then((latest) => {
             if (latest && config.fastNavigationPage) {
-              replace(`${contextPath}/fastNav`);
+              replace('/fastNav');
             } else {
-              replace(`${contextPath}/main`);
+              replace('/main');
             }
             cb();
           }).catch((err) => {
@@ -220,7 +217,7 @@ function RouterConfig({ history, app }) {
           getChildRoutes: (nextState, cb) => {
             getMenus()
               .then((menus) => {
-                createRoutes(app, [], menus, `${contextPath}/main`)
+                createRoutes(app, [], menus, '/main')
                   .then((result) => {
                     cb(null, result);
                   })

src/services/route.js

@@ -2,7 +2,7 @@ import createBrowserHistory from 'history/createBrowserHistory';
 import isString from 'lodash/isString';
 import { makePath } from '../utils/helper';
 
-const processPath = (base, path, withContext = true) => {
+const processPath = (base, path, withContext = false) => {
   if (isString(path)) {
     return makePath(base, path, withContext);
   }
@@ -29,21 +29,28 @@ export const getHistory = (...args) => {
 export const getLocation = () => {
   return location || {};
 };
+export const destroyHistory = () => {
+  if (history && history.unlisten) {
+    history.unlisten();
+    history = null;
+  }
+};
 export const createHistory = (...args) => {
+  destroyHistory();
   history = createBrowserHistory(...args);
   // noinspection JSUnresolvedFunction
-  history.listen((loc) => {
+  history.unlisten = history.listen((loc) => {
     location = { ...loc };
   });
   return history;
 };
 
-export const push = (path, state, withContext = true) => {
-  return history.push(processPath(getHistoryBase(history), path, withContext), state);
+export const push = (path, state) => {
+  return history.push(processPath(getHistoryBase(history), path, false), state);
 };
 
-export const replace = (path, state, withContext = true) => {
-  return history.replace(processPath(getHistoryBase(history), path, withContext), state);
+export const replace = (path, state) => {
+  return history.replace(processPath(getHistoryBase(history), path, false), state);
 };
 
 export const go = (n) => {
@@ -78,15 +85,15 @@ const getThisBase = (theThis) => {
   }
 };
 
-export const thisPush = (theThis, pathOrLoc, withContext = true) => {
+export const thisPush = (theThis, pathOrLoc) => {
   checkThis(theThis);
-  const route = processPath(getThisBase(theThis), pathOrLoc, withContext);
+  const route = processPath(getThisBase(theThis), pathOrLoc);
   return theThis.props.router.push(route);
 };
 
-export const thisReplace = (theThis, pathOrLoc, withContext = true) => {
+export const thisReplace = (theThis, pathOrLoc) => {
   checkThis(theThis);
-  const route = processPath(getThisBase(theThis), pathOrLoc, withContext);
+  const route = processPath(getThisBase(theThis), pathOrLoc);
   return theThis.props.router.replace(route);
 };
 

src/utils/config.js

+import baseConfig from '../../config';
+
 /* eslint-disable no-undef */
 /**
  * Created by yaohx_169 on 2017/6/6.
@@ -48,17 +50,19 @@ const defaultDateFormat = 'YYYY-MM-DD';
 const defaultTimeFormat = 'HH:mm:ss';
 const defaultDateTimeFormat = `${defaultDateFormat} ${defaultTimeFormat}`;
 
-// eslint-disable-next-line no-underscore-dangle
-const _apiContextPath = process.env.NODE_ENV === 'development' ? '' : apiContextPath;
-// eslint-disable-next-line no-underscore-dangle
-const _contextPath = process.env.NODE_ENV === 'development' ? '' : contextPath;
+const dev = process.env.NODE_ENV === 'development';
+
+const contextPath = dev ? baseConfig.dev.contextPath : baseConfig.prod.contextPath;
+const apiContextPath = dev ? baseConfig.dev.apiContextPath : baseConfig.prod.apiContextPath;
+const basename = dev ? baseConfig.dev.basename : baseConfig.prod.basename;
 
 const config = {
   name: 'Jbpm Demo',
   footerText: '上海铂蓝信息科技有限公司',
-  logo: `${_contextPath}/logo.png`,
-  contextPath: _contextPath,
-  apiContextPath: _apiContextPath,
+  logo: `${contextPath}/logo.png`,
+  basename,
+  contextPath,
+  apiContextPath,
   productId: 'big-machine-web-front',
   fastNavigationPage: '',
   defaultDateFormat,

src/utils/helper.js

@@ -57,33 +57,40 @@ export function locationOrigin(withContext = true) {
   return `${location.protocol}//${location.hostname}${location.port ? ':' + location.port : ''}${withContext ? contextPath : ''}`; // eslint-disable-line
 }
 
-export const makePath = (base, path, withContext = true) => {
+export const makeSureEndsWithSlash = (path) => {
+  if (!path || !path.endsWith('/')) {
+    return `${path || ''}/`;
+  } else {
+    return path;
+  }
+};
+
+const makeSureStartsWithSlash = (path) => {
+  if (!path || !path.startsWith('/')) {
+    return `/${path || ''}`;
+  } else {
+    return path;
+  }
+};
+
+export const makePath = (base, path, withContext = false) => {
   if (path.startsWith('/')) {
     return withContext ? `${contextPath}${path}` : path;
   }
-  const basePath = base.endsWith('/') ? base : `${base}/`;
+  const basePath = makeSureEndsWithSlash(base);
   return resolvePathname(path, basePath);
 };
 
 export function currentPath() {
   let path = location.pathname; // eslint-disable-line
-  if (!path) {
-    path = '/';
-  }
-  if (path[0] !== '/') {
-    path = `/${path}`;
-  }
+  path = makeSureStartsWithSlash(path);
   if (path.slice(0, contextPath.length) === contextPath) {
-    return path.slice(contextPath.length);
+    return makeSureStartsWithSlash(path.slice(contextPath.length));
   } else {
-    return '/';
+    return path;
   }
 }
 
-export function fullPath(path) {
-  return `${contextPath}${path}`;
-}
-
 export function encrypt(text) {
   const jsEncrypt = createJSEncrypt();
   jsEncrypt.setPublicKey(pubKey);