sync

config/config.ts

@@ -89,6 +89,10 @@ export default {
       path: '/',
       component: '../layouts/BlankLayout',
       routes: [
+        {
+          path: '/404',
+          component: './404',
+        },
         {
           path: '/user',
           component: '../layouts/UserLayout',
@@ -108,8 +112,12 @@ export default {
           path: '/',
           component: '../layouts/BasicLayout',
           Routes: ['src/pages/Authorized'],
-          authority: ['admin', 'user'],
+          authority: ['user'],
           routes: [
+            {
+              path: '/',
+              redirect: '/dashboard/analysis',
+            },
             {
               path: '/dashboard',
               name: 'dashboard',
@@ -302,11 +310,7 @@ export default {
               icon: 'highlight',
               path: '/parameter',
               component: './system/parameter',
-            },
-            {
-              path: '/',
-              redirect: '/dashboard/analysis',
-              authority: ['admin', 'user'],
+              authority: ['user'],
             },
           ],
         },

src/components/Authorized/Authorized.tsx

@@ -20,6 +20,7 @@ const Authorized: React.FunctionComponent<AuthorizedProps> = ({
   authority,
   noMatch = null,
 }) => {
+  console.log('noMatch1', noMatch);
   const childrenRender: React.ReactNode = typeof children === 'undefined' ? null : children;
   const dom = check(authority, childrenRender, noMatch);
   return <>{dom}</>;

src/components/Authorized/CheckPermissions.tsx

@@ -24,6 +24,10 @@ const checkPermissions = <T, K>(
   target: T,
   Exception: K,
 ): T | K | React.ReactNode => {
+  console.log('authority:', authority);
+  console.log('currentAuthority:', currentAuthority);
+  console.log('target:', target);
+  console.log('noMatch2', Exception);
   // 没有判定权限.默认查看所有
   // Retirement authority, return target;
   if (!authority) {
@@ -38,6 +42,7 @@ const checkPermissions = <T, K>(
     } else if (authority.includes(currentAuthority)) {
       return target;
     }
+    console.log('noMatch3', Exception);
     return Exception;
   }
   // string 处理

src/components/Authorized/renderAuthorize.ts

@@ -10,6 +10,8 @@ type CurrentAuthorityType = string | string[] | (() => typeof CURRENT);
 const renderAuthorize = <T>(Authorized: T): ((currentAuthority: CurrentAuthorityType) => T) => (
   currentAuthority: CurrentAuthorityType,
 ): T => {
+  console.log('currentAuthoritycurrentAuthority', currentAuthority);
+
   if (currentAuthority) {
     if (typeof currentAuthority === 'function') {
       CURRENT = currentAuthority();
@@ -23,6 +25,7 @@ const renderAuthorize = <T>(Authorized: T): ((currentAuthority: CurrentAuthority
   } else {
     CURRENT = 'NULL';
   }
+  console.log('CURRENT', CURRENT);
   return Authorized;
 };
 

src/layouts/BasicLayout.tsx

@@ -3,7 +3,7 @@
  * You can view component api by:
  * https://github.com/ant-design/ant-design-pro-layout
  */
-import { ConnectProps, ConnectState } from '@/models/connect';
+import { ConnectProps, ConnectState, Dispatch } from '@/models/connect';
 import ProLayout, {
   MenuDataItem,
   BasicLayoutProps as ProLayoutProps,
@@ -13,12 +13,15 @@ import ProLayout, {
 import React, { useState } from 'react';
 import Authorized from '@/utils/Authorized';
 import Link from 'umi/link';
+import router from 'umi/router';
+
 import RightContent from '@/components/GlobalHeader/RightContent';
 import { connect } from 'dva';
 import { formatMessage } from 'umi-plugin-react/locale';
 import { isAntDesignPro } from '@/utils/utils';
-import logo from '../assets/logo.svg';
-
+import { message } from 'antd';
+import store from '@/utils/store';
+import user from 'mock/user';
 export interface BasicLayoutProps extends ProLayoutProps, Omit<ConnectProps, 'location'> {
   breadcrumbNameMap: {
     [path: string]: MenuDataItem;
@@ -69,20 +72,44 @@ const footerRender: BasicLayoutProps['footerRender'] = (_, defaultDom) => {
   );
 };
 
+const loadInitData = (dispatch: Dispatch) => {
+  Promise.all([dispatch({ type: 'public/getUserInfo' }), dispatch({ type: 'public/getUserInfo' })]);
+};
+
 const BasicLayout: React.FC<BasicLayoutProps> = props => {
   const { dispatch, children, settings } = props;
   /**
    * constructor
    */
 
+  const [loaded, setLoaded] = useState(false);
   useState(() => {
     if (dispatch) {
+      // 查看当前用户是否在登录状态
       dispatch({
-        type: 'user/fetchCurrent',
-      });
-      dispatch({
-        type: 'settings/getSetting',
+        type: 'user/checkUserLoginStatus',
+      }).then(({ code, data = false }: { code: string; data: boolean }) => {
+        setLoaded(true);
+        if (code === 'sys.success') {
+          // 登录成功
+          if (data) {
+            loadInitData(dispatch);
+          } else if (store.get('userId')) {
+            store.set('token', '');
+            store.set('userId', '');
+            message.error('登录已过期,请重新登录!');
+            router.push('/user/login');
+          } else {
+            // 此处应该跳转到404或者403页面为佳
+            // message.error("用户未登录,请先登录系统!");
+            router.push('/404');
+          }
+        }
       });
+
+      // dispatch({
+      //   type: 'settings/getSetting',
+      // });
     }
   });
   /**
@@ -97,6 +124,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = props => {
     });
 
   return (
+    loaded && (
       <div className="kim-layout">
         <ProLayout
           siderWidth={200}
@@ -136,6 +164,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = props => {
           }
         />
       </div>
+    )
   );
 };
 

src/models/global.ts

@@ -22,6 +22,7 @@ export interface GlobalModelType {
     fetchNotices: Effect;
     clearNotices: Effect;
     changeNoticeReadState: Effect;
+    checkUserLoginStatus: Effect;
   };
   reducers: {
     changeLayoutCollapsed: Reducer<GlobalModelState>;

src/models/user.ts

-import { queryCurrent, query as queryUsers } from '@/services/user';
+import { queryCurrent, query as queryUsers, checkUserLoginStatus } from '@/services/user';
 
 import { Effect } from 'dva';
 import { Reducer } from 'redux';
@@ -26,6 +26,7 @@ export interface UserModelType {
   effects: {
     fetch: Effect;
     fetchCurrent: Effect;
+    checkUserLoginStatus: Effect;
   };
   reducers: {
     saveCurrentUser: Reducer<UserModelState>;
@@ -55,6 +56,10 @@ const UserModel: UserModelType = {
         payload: response,
       });
     },
+    *checkUserLoginStatus({ payload }, { call }) {
+      const res = yield call(checkUserLoginStatus, payload);
+      return res;
+    },
   },
 
   reducers: {

src/pages/404.tsx

@@ -18,7 +18,7 @@ const NoFoundPage: React.FC<{}> = () => (
     <br />
     <h1>404</h1>
     <p>Sorry, the page you visited does not exist.</p>
-    <Button type="primary" onClick={() => router.push('/')}>
+    <Button type="primary" onClick={() => router.push('/user/login')}>
       Back Home
     </Button>
   </div>

src/pages/Authorized.tsx

@@ -15,17 +15,23 @@ const getRouteAuthority = (path: string, routeData: Route[]) => {
   routeData.forEach(route => {
     // match prefix
     if (pathToRegexp(`${route.path}(.*)`).test(path)) {
-      // exact match
-      if (route.path === path) {
+      console.log('----------------------');
+      console.log('route.path:', route.path);
+      console.log('path:', path);
+      console.log('route.authority:', route.authority);
+
       authorities = route.authority || authorities;
-      }
+      // 官方代码好像有问题https://github.com/ant-design/ant-design-pro/commit/4a10734dcf858c6363af719a5886a24ec1115b33#diff-2041540b332693486a24a543b6ba0cc8
+      // // exact match
+      // if (route.path === path) {
+      //   authorities = route.authority || authorities;
+      // }
       // get children authority recursively
       if (route.routes) {
         authorities = getRouteAuthority(path, route.routes) || authorities;
       }
     }
   });
-  console.log('authorities:', authorities);
   return authorities;
 };
 
@@ -42,6 +48,10 @@ const AuthComponent: React.FC<AuthComponentProps> = ({
   const { currentUser } = user;
   const { routes = [] } = route;
   const isLogin = currentUser && currentUser.name;
+  console.log('routes:', location.pathname, routes);
+  console.log('authority:', getRouteAuthority(location.pathname, routes));
+  console.log('isLogin:', isLogin);
+
   return (
     <Authorized
       authority={getRouteAuthority(location.pathname, routes) || ''}

src/pages/user/login/models/index.js

@@ -3,6 +3,8 @@ import { login } from '../services';
 import store from '@/utils/store';
 import { getPageQuery } from '@/utils';
 import config from '@/config';
+import { setAuthority } from '@/utils/authority';
+import { reloadAuthorized } from '@/utils/Authorized';
 
 const initData = {};
 export default {
@@ -14,6 +16,11 @@ export default {
     *login({ payload }, { call, put }) {
       const { code, data } = yield call(login, payload);
       if (code === 'sys.success') {
+        yield put({
+          type: 'changeLoginStatus',
+          payload: {},
+        });
+        reloadAuthorized();
         const { token, userId } = data;
         store.set('token', token);
         store.set('userId', userId);
@@ -34,9 +41,10 @@ export default {
             window.location.href = redirect;
             return;
           }
-        } else {
-          redirect = config.homePage;
         }
+        // else {
+        //   redirect = config.homePage;
+        // }
         yield put(routerRedux.replace(redirect || '/'));
       }
     },
@@ -44,12 +52,10 @@ export default {
   reducers: {
     clearData: () => ({ ...initData }),
     changeLoginStatus(state, { payload }) {
-      // setAuthority(payload.currentAuthority);
-      // return {
-      //   ...state,
-      //   status: payload.status,
-      //   type: payload.type,
-      // };
+      setAuthority('user');
+      return {
+        ...state,
+      };
     },
   },
 };

src/services/user.ts

-import request from '@/utils/request';
+import { get } from '@/utils/request';
 
 export async function query(): Promise<any> {
-  return request('/api/users');
+  return get('/api/users');
 }
 
 export async function queryCurrent(): Promise<any> {
-  return request('/api/currentUser');
+  return get('/api/currentUser');
 }
 
 export async function queryNotices(): Promise<any> {
-  return request('/api/notices');
+  return get('/api/notices');
 }
+
+/**
+ * 查看是否已经登录
+ */
+export const checkUserLoginStatus = () => get(`/api/v1/login/status`);

src/utils/authority.ts

@@ -15,6 +15,10 @@ export function getAuthority(str?: string): string | string[] {
   if (typeof authority === 'string') {
     return [authority];
   }
+  console.log(
+    'ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION',
+    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION,
+  );
   // preview.pro.ant.design only do not use in your production.
   // preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
   if (!authority && ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site') {