Change trigger menu address Modify the starting error handling (#675)

* Change trigger menu address   Modify the starting error handling

* add loginout redirect

* use select get pathname

.roadhogrc.mock.js

@@ -123,6 +123,15 @@ const proxy = {
       "path": "/base/category/list"
     });
   },
+  'GET /api/401': (req, res) => {
+    res.status(401).send({
+      "timestamp": 1513932555104,
+      "status": 401,
+      "error": "Unauthorized",
+      "message": "Unauthorized",
+      "path": "/base/category/list"
+    });
+  },
 };
 
 export default noProxy ? {} : delay(proxy, 1000);

src/common/menu.js

@@ -94,6 +94,7 @@ const menuData = [{
   }, {
     name: '触发异常',
     path: 'trigger',
+    hideInMenu: true,
   }],
 }, {
   name: '账户',

src/components/GlobalHeader/index.js

@@ -61,6 +61,7 @@ export default class GlobalHeader extends PureComponent {
       <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
         <Menu.Item disabled><Icon type="user" />个人中心</Menu.Item>
         <Menu.Item disabled><Icon type="setting" />设置</Menu.Item>
+        <Menu.Item key="triggerError"><Icon type="close-circle" />触发报错</Menu.Item>
         <Menu.Divider />
         <Menu.Item key="logout"><Icon type="logout" />退出登录</Menu.Item>
       </Menu>

src/error.js

-import { routerRedux } from 'dva/router';
-
-const error = (e, dispatch) => {
-  if (e.name === 401 || e.name === 403) {
-    dispatch(routerRedux.push('/exception/403'));
-    return;
-  }
-  if (e.name <= 504 && e.name >= 500) {
-    dispatch(routerRedux.push('/exception/500'));
-    return;
-  }
-  if (e.name >= 404 && e.name < 422) {
-    dispatch(routerRedux.push('/exception/404'));
-  }
-};
-
-export default error;

src/index.js

@@ -8,13 +8,11 @@ import createLoading from 'dva-loading';
 import 'moment/locale/zh-cn';
 import FastClick from 'fastclick';
 import './rollbar';
-import onError from './error';
 
 import './index.less';
 // 1. Initialize
 const app = dva({
   history: createHistory(),
-  onError,
 });
 
 // 2. Plugins
@@ -28,4 +26,8 @@ app.router(require('./router').default);
 
 // 5. Start
 app.start('#root');
+
+
 FastClick.attach(document.body);
+
+export default app._store;  // eslint-disable-line

src/layouts/BasicLayout.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Layout, Icon, message } from 'antd';
 import DocumentTitle from 'react-document-title';
 import { connect } from 'dva';
-import { Route, Redirect, Switch } from 'dva/router';
+import { Route, Redirect, Switch, routerRedux } from 'dva/router';
 import { ContainerQuery } from 'react-container-query';
 import classNames from 'classnames';
 import { enquireScreen } from 'enquire-js';
@@ -98,6 +98,16 @@ class BasicLayout extends React.PureComponent {
     }
     return title;
   }
+  getBashRedirect = () => {
+    // According to the url parameter to redirect
+    // 这里是重定向的,重定向到 url 的 redirect 参数所示地址
+    const urlParams = new URL(window.location.href);
+    const redirect = urlParams.searchParams.get('redirect') || '/dashboard/analysis';
+    // Remove the parameters in the url
+    urlParams.searchParams.delete('redirect');
+    window.history.pushState(null, 'redirect', urlParams.href);
+    return redirect;
+  }
   handleMenuCollapse = (collapsed) => {
     this.props.dispatch({
       type: 'global/changeLayoutCollapsed',
@@ -112,6 +122,10 @@ class BasicLayout extends React.PureComponent {
     });
   }
   handleMenuClick = ({ key }) => {
+    if (key === 'triggerError') {
+      this.props.dispatch(routerRedux.push('/exception/trigger'));
+      return;
+    }
     if (key === 'logout') {
       this.props.dispatch({
         type: 'login/logout',
@@ -129,6 +143,7 @@ class BasicLayout extends React.PureComponent {
     const {
       currentUser, collapsed, fetchingNotices, notices, routerData, match, location,
     } = this.props;
+    const bashRedirect = this.getBashRedirect();
     const layout = (
       <Layout>
         <SiderMenu
@@ -178,7 +193,7 @@ class BasicLayout extends React.PureComponent {
                     <Redirect key={item.from} exact from={item.from} to={item.to} />
                   )
                 }
-                <Redirect exact from="/" to="/dashboard/analysis" />
+                <Redirect exact from="/" to={bashRedirect} />
                 <Route render={NotFound} />
               </Switch>
             </div>

src/models/error.js

-import { query403, query404, query500 } from '../services/error';
+import { query403, query401, query404, query500 } from '../services/error';
 
 export default {
   namespace: 'error',
@@ -16,6 +16,13 @@ export default {
         payload: '403',
       });
     },
+    *query401(_, { call, put }) {
+      yield call(query401);
+      yield put({
+        type: 'trigger',
+        payload: '401',
+      });
+    },
     *query500(_, { call, put }) {
       yield call(query500);
       yield put({

src/models/login.js

@@ -24,7 +24,18 @@ export default {
         window.location.reload();
       }
     },
-    *logout(_, { put }) {
+    *logout(_, { put, select }) {
+      try {
+        // get location pathname
+        const urlParams = new URL(window.location.href);
+        const pathname = yield select(state => state.routing.location.pathname);
+        // add the parameters in the url
+        urlParams.searchParams.set('redirect', pathname);
+        window.history.pushState(null, 'login', urlParams.href);
+      } finally {
+        // yield put(routerRedux.push('/user/login'));
+        // Login out after permission changes to admin or user
+        // The refresh will automatically redirect to the login page
         yield put({
           type: 'changeLoginStatus',
           payload: {
@@ -32,10 +43,8 @@ export default {
             currentAuthority: 'guest',
           },
         });
-      // yield put(routerRedux.push('/user/login'));
-      // Login out after permission changes to admin or user
-      // The refresh will automatically redirect to the login page
         window.location.reload();
+      }
     },
   },
 

src/routes/Exception/triggerException.js

 import React, { PureComponent } from 'react';
-import { Button, Spin } from 'antd';
+import { Button, Spin, Card } from 'antd';
 import { connect } from 'dva';
 import styles from './style.less';
 
@@ -10,6 +10,14 @@ export default class TriggerException extends PureComponent {
   state={
     isloading: false,
   }
+  trigger401 = () => {
+    this.setState({
+      isloading: true,
+    });
+    this.props.dispatch({
+      type: 'error/query401',
+    });
+  };
   trigger403 = () => {
     this.setState({
       isloading: true,
@@ -36,7 +44,11 @@ export default class TriggerException extends PureComponent {
   };
   render() {
     return (
+      <Card>
         <Spin spinning={this.state.isloading} wrapperClassName={styles.trigger}>
+          <Button type="danger" onClick={this.trigger401}>
+            触发401
+          </Button>
           <Button type="danger" onClick={this.trigger403}>
             触发403
           </Button>
@@ -47,6 +59,7 @@ export default class TriggerException extends PureComponent {
             触发404
           </Button>
         </Spin>
+      </Card>
     );
   }
 }

src/services/error.js

@@ -4,6 +4,10 @@ export async function query404() {
   return request('/api/404');
 }
 
+export async function query401() {
+  return request('/api/401');
+}
+
 export async function query403() {
   return request('/api/403');
 }

src/utils/request.js

 import fetch from 'dva/fetch';
 import { notification } from 'antd';
+import { routerRedux } from 'dva/router';
+import store from '../index';
 
 const codeMessage = {
   200: '服务器成功返回请求的数据',
@@ -61,5 +63,25 @@ export default function request(url, options) {
         return response.text();
       }
       return response.json();
+    })
+    .catch((e) => {
+      const { dispatch } = store;
+      if (e.name === 401) {
+        dispatch({
+          type: 'login/logout',
+        });
+        return;
+      }
+      if (e.name === 403) {
+        dispatch(routerRedux.push('/exception/403'));
+        return;
+      }
+      if (e.name <= 504 && e.name >= 500) {
+        dispatch(routerRedux.push('/exception/500'));
+        return;
+      }
+      if (e.name >= 404 && e.name < 422) {
+        dispatch(routerRedux.push('/exception/404'));
+      }
     });
 }