feat: improve code

.gitignore

@@ -12,3 +12,4 @@ coverage
 .umi
 /uploads
 .env.test
+docs-dist/

packages/app/src/pages/apiClient.ts

@@ -4,8 +4,4 @@ const apiClient = new APIClient({
   baseURL: `http://localhost:3000/api/`,
 });
 
-apiClient.setBearerToken();
-
-// mock(apiClient);
-
 export default apiClient;

packages/client/src/api-client/APIClient.ts

@@ -28,6 +28,8 @@ export class APIClient {
 
   services: Record<string, Result<any, any>>;
 
+  tokenKey = 'nocobaseToken';
+
   constructor(instance?: AxiosInstance | AxiosRequestConfig) {
     this.services = observable({});
     if (typeof instance === 'function') {
@@ -35,11 +37,12 @@ export class APIClient {
     } else {
       this.axios = axios.create(instance);
     }
+    this.authMiddleware();
   }
 
-  setBearerToken(key = 'nocobaseToken') {
+  authMiddleware() {
     this.axios.interceptors.request.use((config) => {
-      const token = localStorage.getItem(key);
+      const token = localStorage.getItem(this.tokenKey);
       if (token) {
         config.headers['Authorization'] = `Bearer ${token}`;
       }
@@ -47,6 +50,10 @@ export class APIClient {
     });
   }
 
+  setBearerToken(token: any) {
+    localStorage.setItem(this.tokenKey, token || '');
+  }
+
   service(uid: string): Result<any, any> {
     return this.services[uid];
   }

packages/client/src/route-switch/antd/admin-layout/index.tsx

@@ -3,6 +3,7 @@ import React, { useRef, useState } from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import {
   CurrentUser,
+  CurrentUserProvider,
   findByUid,
   findMenuItem,
   PluginManager,
@@ -12,7 +13,7 @@ import {
   useSystemSettings
 } from '../../../';
 
-export function AdminLayout(props: any) {
+const InternalAdminLayout = (props: any) => {
   const route = useRoute();
   const history = useHistory();
   const match = useRouteMatch<any>();
@@ -85,6 +86,14 @@ export function AdminLayout(props: any) {
       </Layout>
     </Layout>
   );
-}
+};
+
+export const AdminLayout = () => {
+  return (
+    <CurrentUserProvider>
+      <InternalAdminLayout />
+    </CurrentUserProvider>
+  );
+};
 
 export default AdminLayout;

packages/client/src/route-switch/antd/auth-layout/index.tsx

@@ -6,7 +6,7 @@ export function AuthLayout(props: any) {
       style={{
         maxWidth: 320,
         margin: '0 auto',
-        // paddingTop: '20vh'
+        paddingTop: '20vh',
       }}
     >
       <h1>NocoBase</h1>

packages/client/src/schema-component/antd/table/index.md

@@ -1,3 +1,10 @@
+---
+nav:
+  path: /client
+group:
+  path: /schema-components
+---
+
 # Table
 
 表格有三个使用场景

packages/client/src/user/CurrentUser.tsx

@@ -2,12 +2,13 @@ import { Menu } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
-import { useDesignable } from '..';
+import { useAPIClient, useDesignable } from '..';
 import { ProfileAction } from './ProfileAction';
 
 export const CurrentUser = () => {
   const history = useHistory();
   const { reset } = useDesignable();
+  const api = useAPIClient();
   const { i18n } = useTranslation();
   return (
     <div style={{ display: 'inline-block' }}>
@@ -27,6 +28,7 @@ export const CurrentUser = () => {
           <Menu.Divider />
           <Menu.Item
             onClick={() => {
+              api.setBearerToken(null);
               history.push('/signin');
             }}
           >

packages/client/src/user/CurrentUserProvider.tsx

@@ -0,0 +1,19 @@
+import { Spin } from 'antd';
+import React, { createContext } from 'react';
+import { Redirect } from 'react-router-dom';
+import { useRequest } from '../api-client';
+
+export const CurrentUserContext = createContext(null);
+
+export const CurrentUserProvider = (props) => {
+  const result = useRequest({
+    url: 'users:check',
+  });
+  if (result.loading) {
+    return <Spin />;
+  }
+  if (result.error) {
+    return <Redirect to={'/signin'} />;
+  }
+  return <CurrentUserContext.Provider value={result}>{props.children}</CurrentUserContext.Provider>;
+};

packages/client/src/user/SigninPage.tsx

@@ -2,7 +2,7 @@ import { ISchema, useForm } from '@formily/react';
 import { uid } from '@formily/shared';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { SchemaComponent, useCurrentDocumentTitle } from '..';
+import { SchemaComponent, useAPIClient, useCurrentDocumentTitle } from '..';
 
 const schema: ISchema = {
   type: 'object',
@@ -60,11 +60,17 @@ const schema: ISchema = {
 const useSignin = () => {
   const history = useHistory();
   const form = useForm();
+  const api = useAPIClient();
   return {
     async run() {
       await form.submit();
-      console.log(form.values);
-      history.push('/admin');
+      const { data } = await api.resource('users').signin({
+        values: form.values,
+      });
+      if (data?.data?.token) {
+        api.setBearerToken(data?.data?.token);
+        history.push('/admin');
+      }
     },
   };
 };

packages/client/src/user/SignupPage.tsx

@@ -1,8 +1,9 @@
 import { ISchema, useForm } from '@formily/react';
 import { uid } from '@formily/shared';
+import { message } from 'antd';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { SchemaComponent, useCurrentDocumentTitle } from '..';
+import { SchemaComponent, useAPIClient, useCurrentDocumentTitle } from '..';
 
 const schema: ISchema = {
   type: 'object',
@@ -86,11 +87,17 @@ const schema: ISchema = {
 const useSignup = () => {
   const history = useHistory();
   const form = useForm();
+  const api = useAPIClient();
   return {
     async run() {
       await form.submit();
-      console.log(form.values);
-      // history.push('/signin');
+      await api.resource('users').signup({
+        values: form.values,
+      });
+      message.success('注册成功，即将跳转登录页');
+      setTimeout(() => {
+        history.push('/signin');
+      }, 2000);
     },
   };
 };

packages/client/src/user/index.ts

@@ -1,4 +1,5 @@
 export * from './CurrentUser';
+export * from './CurrentUserProvider';
 export * from './SigninPage';
 export * from './SignupPage';