Update global model

Author: chachaxw

src/index.tsx

@@ -18,7 +18,7 @@ const app: any = dva({
     errorHandle(error, app._store.dispatch);
   },
 
-  onAction: logger,
+  onAction: [logger],
 
   // 其他第三方 Reducer 配置
   extraReducers: {

src/models/global.ts

@@ -1,3 +1,8 @@
+import { routerRedux } from 'dva/router';
+import { GlobalService } from '../services/GlobalService';
+import { exceptionRoutes, localStorageKey } from '../utils/constant';
+import { isEmpty } from '../utils/utils';
+
 // Global declare
 declare global {
   interface Window { ga: any; }
@@ -30,7 +35,7 @@ export default {
 
   state: { // 应用的状态数据
     auth: {
-      isAuthenticated: true,
+      isAuthenticated: false,
       permissions: [],
     },
     userInfo: {
@@ -45,11 +50,49 @@ export default {
   },
 
   effects: { // 异步请求处理和业务逻辑操作
+    *login(action: any, { call, put }: any) {
+      try {
+        const { payload } = action;
+        const res = yield call(GlobalService.auth, payload);
+        yield put({
+          type: 'authorize',
+          payload: {
+            isAuthenticated: true,
+            permissions: [],
+          },
+        });
+      } catch (error) {
+        throw error;
+      }
+    },
 
+    *logout(action: any, { put }: any) {
+      yield put({
+        type: 'deauthorize',
+        payload: {
+          isAuthenticated: false,
+          permissions: [],
+          collapsed: false,
+        },
+      });
+      yield put(routerRedux.push('/login'));
+    },
   },
 
   reducers: { // Redux reducers
+    authorize(state: GlobalState, { payload }: any) {
+      localStorage.setItem(localStorageKey.APP_KEY_STORE, JSON.stringify(payload));
+      return { ...state, auth: payload };
+    },
+
+    deauthorize(state: GlobalState, { payload }: any) {
+      localStorage.removeItem(localStorageKey.APP_KEY_STORE);
+      localStorage.removeItem(localStorageKey.USER_KEY_STORE);
+      return { ...state, auth: payload };
+    },
+
     changeLayoutCollapsed(state: GlobalState, { payload }: any) {
+      localStorage.setItem(localStorageKey.APP_VIEW_STORE, JSON.stringify({ collapsed: payload }));
       return { ...state, collapsed: payload };
     },
 
@@ -60,15 +103,45 @@ export default {
     loadNotices(state: GlobalState, { payload, hasMore }: any) {
       return { ...state, notices: payload, hasMore };
     },
+
+    saveAuthData(state: GlobalState, { payload }: any) {
+      localStorage.setItem(localStorageKey.APP_KEY_STORE, JSON.stringify(payload));
+      return state;
+    },
   },
 
   subscriptions: { // 用于订阅一个数据源, 然后根据需要 dispatch 相应的 action
     setup({ dispatch, history }: any) {
-      // TODO: Need to add auth and permissions
       return history.listen(({ pathname, search }: Location) => {
-        if (typeof window.ga !== 'undefined') {
-          // TODO: Google Analytics config, 埋点配置
-          window.ga('send', 'PageView', pathname + search);
+        if (exceptionRoutes.includes(pathname)) {
+          return;
+        }
+
+        const appData = JSON.parse(localStorage.getItem(localStorageKey.APP_KEY_STORE) || '{}');
+        const appView = JSON.parse(localStorage.getItem(localStorageKey.APP_VIEW_STORE) || '{}');
+
+        try {
+          if (!isEmpty(appData)) {
+            dispatch({
+              type: 'changeLayoutCollapsed',
+              payload: !isEmpty(appView) ? appView.collapsed : false,
+            });
+
+            dispatch({
+              type: 'authorize',
+              payload: appData,
+            });
+
+            if (pathname === '/login') {
+              dispatch(routerRedux.push('/'));
+            }
+          } else {
+            if (pathname === '/login') {
+              return;
+            }
+          }
+        } catch (error) {
+          throw error;
         }
       });
     },

src/pages/Login/Login.module.scss

@@ -1,9 +1,76 @@
 .login {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    font-size: 72px;
-    overflow: hidden;
-    background-color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  font-size: 72px;
+  overflow: hidden;
+  background-color: #ffffff;
+  // background-image: url('/images/background.svg');
+}
+
+.Header__svg {
+  position: absolute;
+  width: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: -1;
+  will-change: transform;
+}
+.Header__title {
+  font-family: Avenir, Futura, 'Open Sans', 'Gill Sans', 'Helvetica Neue', Ariel, sans-serif;
+  font-weight: bold;
+  font-size: 6vw;
+  margin: 0;
+}
+
+.bigSquare {
+  animation-name: bigSquare;
+}
+@keyframes bigSquare {
+  from { transform: translateY(10%) rotate(-80deg) scale(0); }
+  to { transform: translateY(0) rotate(0deg) scale(1); }
+}
+.littleSquare {
+  animation-name: littleSquare;
+}
+@keyframes littleSquare {
+  from { transform: translate(226%, 183%) rotate(140deg) scale(0) ; }
+  to { transform: translate(0%, 0%) rotate(0deg) scale(1); }
+}
+.triangle {
+  animation-name: triangle;
+}
+@keyframes triangle {
+  from { transform: rotate(-140deg) scale(0) ; }
+  to { transform: rotate(0deg) scale(1); }
+}
+.hoop {
+  animation-name: hoop;
+}
+@keyframes hoop {
+  from { transform: translate(-160%, -33%) scale(0) ; }
+  to { transform: translate(0%, 0%) scale(1); }
+}
+.bigCircle {
+  animation-name: bigCircle;
+}
+@keyframes bigCircle {
+  from { transform: scale(0) translate(60%, 3%); }
+  to { transform: scale(1) translate(0%, 0%); }
+}
+.littleCircle {
+  animation-name: littleCircle;
+}
+@keyframes littleCircle {
+  from { transform: scale(0) }
+  to { transform: scale(1) }
+}
+
+// some lovely sass fun to stagger the animation
+
+@for $i from 1 to 12 {
+  .Header__shape:nth-child(#{$i}) { 
+    animation-delay: $i * 0.16s;
+  }
 }

src/routes/index.tsx

@@ -86,13 +86,13 @@ export default class AppRoutes extends Component<InternalProps> {
             };
 
             return config.component ? route(config) :
-                    config.children && config.children.map((d: RouteConfig) => route(d));
+              config.children && config.children.map((d: RouteConfig) => route(d));
           })
         )}
         <Route path="/app/exception/403" component={NoPermission} />
         <Route path="/app/exception/404" component={NotFound} />
         <Route path="/app/exception/500" component={ServerError} />
-        <Route render={() => <Redirect to="/exception/404" />} />
+        <Route render={() => <Redirect to="/app/exception/404" />} />
       </Switch>
     );
   }

src/services/ApiConfig.ts

@@ -1,2 +1,5 @@
 // API url config
-export const ApiUrl = {};
+export const ApiUrl = {
+  auth: '/auth',
+  dashboard: '/dashboard',
+};

src/utils/utils.ts

@@ -82,7 +82,7 @@ export function formatSeconds(num: number): string {
 
 /**
  * 判断对象或者数组是否为空
- * @param obj
+ * @param {array | object} obj
  */
 export function isEmpty(obj: any): boolean {
   return [Object, Array].includes((obj || {}).constructor) && !Object.entries((obj || {})).length;