feat: compile with ts files and update login authority

internals/webpack/webpack.base.babel.js

@@ -17,11 +17,14 @@ module.exports = options => ({
   module: {
     rules: [
       {
-        test: /\.jsx?$/,
+        test: /\.[jt]sx?$/,
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
-          options: options.babelQuery,
+          // options: options.babelQuery,
+          options: {
+            presets: ['@babel/preset-typescript'],
+          },
         },
       },
 
@@ -169,7 +172,7 @@ module.exports = options => ({
   ]),
   resolve: {
     modules: ['node_modules', 'src'],
-    extensions: ['.js', '.jsx', '.react.js'],
+    extensions: ['.js', '.jsx', '.react.js', '.ts', '.tsx'],
     mainFields: ['browser', 'jsnext:main', 'main'],
     alias: {
       '@': path.resolve(process.cwd(), './src'),

package.json

@@ -83,6 +83,7 @@
   },
   "dependencies": {
     "@babel/polyfill": "7.4.3",
+    "@babel/preset-typescript": "^7.12.1",
     "@babel/runtime": "^7.10.5",
     "antd-img-crop": "^3.13.2",
     "chalk": "2.4.2",

src/containers/App/index.js

@@ -2,12 +2,16 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { renderRoutes } from 'react-router-config';
 import { BrowserRouter as Router, Switch } from 'react-router-dom';
+import { connect } from 'react-redux';
 import config from '../../routes/config';
 import Authozed from '@/utils/authority';
 import UserLogin from '@/pages/user/login';
 import UserLayout from '@/layouts/UserLayout';
 import { AUTHORITY, BASENAME } from '@/utils/constants';
-export default function App() {
+export default connect(store => ({
+  auth: store,
+}))(function App() {
+  console.log('reRender');
   return (
     <>
       <Helmet titleTemplate="%s - 运维平台" defaultTitle="运维平台">
@@ -27,4 +31,4 @@ export default function App() {
       </Authozed>
     </>
   );
-}
+});

src/containers/App/store/actions.js

-import { LOAD_REPOS, LOAD_REPOS_ERROR, LOAD_REPOS_SUCCESS } from './constants';
+import {
+  LOAD_REPOS,
+  LOAD_REPOS_ERROR,
+  LOAD_REPOS_SUCCESS,
+  SET_AUTHORITY,
+} from './constants';
 
 export function loadRepos() {
   return {
@@ -20,3 +25,10 @@ export function repoLoadingError(error) {
     error,
   };
 }
+
+export function setAuth(auth) {
+  return {
+    type: SET_AUTHORITY,
+    auth,
+  };
+}

src/containers/App/store/constants.js

 export const LOAD_REPOS = 'App/LOAD_REPOS';
 export const LOAD_REPOS_SUCCESS = 'App/LOAD_REPOS_SUCCESS';
 export const LOAD_REPOS_ERROR = 'App/LOAD_REPOS_ERROR';
+export const SET_AUTHORITY = 'App/SET_AUTHORITY';

src/containers/App/store/reducer.js

 import { fromJS } from 'immutable';
 
-import { LOAD_REPOS, LOAD_REPOS_ERROR, LOAD_REPOS_SUCCESS } from './constants';
+import {
+  LOAD_REPOS,
+  LOAD_REPOS_ERROR,
+  LOAD_REPOS_SUCCESS,
+  SET_AUTHORITY,
+} from './constants';
 
 export const initialState = fromJS({
   loading: false,
   error: false,
   currentUser: false,
+  auth: [],
   userData: {
     repositories: false,
   },
@@ -36,6 +42,10 @@ const appReducer = (state = initialState, action) => {
         error: action.error,
         loading: false,
       });
+    case SET_AUTHORITY:
+      return state.merge({
+        auth: action.auth,
+      });
     default:
       return state;
   }

src/layouts/UserLayout.js

-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { renderRoutes } from 'react-router-config';
@@ -11,6 +11,7 @@ import {
 
 import logo from '../assets/images/logo/panda-logo.svg';
 import styles from './UserLayout.less';
+import { BASENAME } from '@/utils/constants';
 
 const UserLayout = props => {
   const {
@@ -28,6 +29,10 @@ const UserLayout = props => {
     ...props,
   });
 
+  // useEffect(() => {
+  //   window.location.href = `/${BASENAME}/user/login`;
+  // });
+
   return (
     <HelmetProvider>
       <Helmet>

src/pages/user/login/index.js

 import React, { useState } from 'react';
-import { Alert, Checkbox } from 'antd';
+import { Alert, notification } from 'antd';
 import { login } from '@/services/user/api';
 import { AUTHORITY, BASENAME, USER_MODE } from '@/utils/constants';
+import { connect } from 'react-redux';
+import { actionCreators } from '@/containers/App/store';
 import LoginForm from './components/Login';
 import styles from './style.less';
 import { setAuthority } from '@/utils/authority';
+import history from '@/utils/history';
 const { UserName, Password, Submit } = LoginForm;
 
 const LoginMessage = ({ content }) => (
@@ -19,9 +22,9 @@ const LoginMessage = ({ content }) => (
 );
 
 const Login = props => {
-  const { userLogin = {}, submitting } = props;
+  const { userLogin = {}, submitting, setAuth } = props;
   const { status, type: loginType } = userLogin;
-  const [autoLogin, setAutoLogin] = useState(true);
+  // const [autoLogin, setAutoLogin] = useState(true);
   const [type, setType] = useState('account');
   const handleSubmit = values => {
     /* eslint-disable no-console */
@@ -33,15 +36,21 @@ const Login = props => {
         const { userMode } = result;
         localStorage.setItem('userMode', userMode);
         if (userMode === USER_MODE.ADMIN || userMode === USER_MODE.SUPER) {
-          setAuthority([AUTHORITY.LOGIN, AUTHORITY[userMode]]);
-          window.location.href = `/${BASENAME}/dbm/dbInit/`;
+          const authority = [AUTHORITY.LOGIN, AUTHORITY[userMode]];
+          setAuthority(authority);
+          setAuth(authority);
+          history.push(`/${BASENAME}/dbm/dbInit/`);
         }
         if (userMode === USER_MODE.COMMON) {
-          setAuthority([AUTHORITY.LOGIN, AUTHORITY.COMMON]);
-          window.location.href = `/${BASENAME}/ou/orgList/`;
+          const authority = [AUTHORITY.LOGIN, AUTHORITY.COMMON];
+          setAuthority(authority);
+          setAuth(authority);
+          history.push(`/${BASENAME}/ou/orgList/`);
         }
       } else {
-        alert('错误，没有权限');
+        notification.warning({
+          message: '没有权限！',
+        });
       }
     });
   };
@@ -73,12 +82,12 @@ const Login = props => {
           ]}
         />
         <div>
-          <Checkbox
+          {/* <Checkbox
             checked={autoLogin}
             onChange={e => setAutoLogin(e.target.checked)}
           >
             自动登录
-          </Checkbox>
+          </Checkbox> */}
           {/* <a
             style={{
               float: 'right',
@@ -93,4 +102,11 @@ const Login = props => {
   );
 };
 
-export default Login;
+const mapState = () => ({});
+const mapDispatch = dispatch => ({
+  setAuth: auth => dispatch(actionCreators.setAuth(auth)),
+});
+export default connect(
+  mapState,
+  mapDispatch,
+)(Login);

src/utils/authority.js

 import RenderAuthorize from '@/components/Authorized';
+import { isDev } from './tools.ts';
+let auth = [];
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable import/no-mutable-exports */
 let Authorized = RenderAuthorize(getAuthority());
@@ -19,6 +21,7 @@ export default Authorized;
 
 // use localStorage to store the authority info, which might be sent from server in actual project.
 export function getAuthority(str) {
+  if (!isDev) return [...auth];
   const authorityString =
     typeof str === 'undefined' && localStorage
       ? localStorage.getItem('panda-oms-authority')
@@ -41,7 +44,11 @@ export function getAuthority(str) {
 
 export function setAuthority(authority) {
   const proAuthority = typeof authority === 'string' ? [authority] : authority;
-  localStorage.setItem('panda-oms-authority', JSON.stringify(proAuthority));
+  if (isDev) {
+    localStorage.setItem('panda-oms-authority', JSON.stringify(proAuthority));
+  } else {
+    auth = auth.concat(proAuthority);
+  }
   // auto reload
   reloadAuthorized();
 }