From f5b2600640b278f97d3007fdd9b1334914903a4d Mon Sep 17 00:00:00 2001 From: chenos Date: Thu, 24 Feb 2022 16:52:35 +0800 Subject: [PATCH] feat: improve code --- .gitignore | 1 + packages/app/src/pages/apiClient.ts | 4 ---- packages/client/src/api-client/APIClient.ts | 11 +++++++++-- .../route-switch/antd/admin-layout/index.tsx | 13 +++++++++++-- .../route-switch/antd/auth-layout/index.tsx | 2 +- .../src/schema-component/antd/table/index.md | 7 +++++++ packages/client/src/user/CurrentUser.tsx | 4 +++- .../client/src/user/CurrentUserProvider.tsx | 19 +++++++++++++++++++ packages/client/src/user/SigninPage.tsx | 12 +++++++++--- packages/client/src/user/SignupPage.tsx | 13 ++++++++++--- packages/client/src/user/index.ts | 1 + 11 files changed, 71 insertions(+), 16 deletions(-) create mode 100644 packages/client/src/user/CurrentUserProvider.tsx diff --git a/.gitignore b/.gitignore index 718d121972..4c226c4727 100644 --- a/.gitignore +++ b/.gitignore @@ -12,3 +12,4 @@ coverage .umi /uploads .env.test +docs-dist/ \ No newline at end of file diff --git a/packages/app/src/pages/apiClient.ts b/packages/app/src/pages/apiClient.ts index 0ebbabb0ae..eb369b3b8f 100644 --- a/packages/app/src/pages/apiClient.ts +++ b/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; diff --git a/packages/client/src/api-client/APIClient.ts b/packages/client/src/api-client/APIClient.ts index 6fa285a122..8889a96224 100644 --- a/packages/client/src/api-client/APIClient.ts +++ b/packages/client/src/api-client/APIClient.ts @@ -28,6 +28,8 @@ export class APIClient { services: Record>; + 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 { return this.services[uid]; } diff --git a/packages/client/src/route-switch/antd/admin-layout/index.tsx b/packages/client/src/route-switch/antd/admin-layout/index.tsx index 0c67ed534d..6cbd67af7d 100644 --- a/packages/client/src/route-switch/antd/admin-layout/index.tsx +++ b/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(); @@ -85,6 +86,14 @@ export function AdminLayout(props: any) { ); -} +}; + +export const AdminLayout = () => { + return ( + + + + ); +}; export default AdminLayout; diff --git a/packages/client/src/route-switch/antd/auth-layout/index.tsx b/packages/client/src/route-switch/antd/auth-layout/index.tsx index 1f77ce0dd2..fee86bdc8e 100644 --- a/packages/client/src/route-switch/antd/auth-layout/index.tsx +++ b/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', }} >

NocoBase

diff --git a/packages/client/src/schema-component/antd/table/index.md b/packages/client/src/schema-component/antd/table/index.md index 0c38c56ca4..5fb6bd9fc7 100644 --- a/packages/client/src/schema-component/antd/table/index.md +++ b/packages/client/src/schema-component/antd/table/index.md @@ -1,3 +1,10 @@ +--- +nav: + path: /client +group: + path: /schema-components +--- + # Table 表格有三个使用场景 diff --git a/packages/client/src/user/CurrentUser.tsx b/packages/client/src/user/CurrentUser.tsx index 655200e8fb..caa3a0ca53 100644 --- a/packages/client/src/user/CurrentUser.tsx +++ b/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 (
@@ -27,6 +28,7 @@ export const CurrentUser = () => { { + api.setBearerToken(null); history.push('/signin'); }} > diff --git a/packages/client/src/user/CurrentUserProvider.tsx b/packages/client/src/user/CurrentUserProvider.tsx new file mode 100644 index 0000000000..3c30949b03 --- /dev/null +++ b/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 ; + } + if (result.error) { + return ; + } + return {props.children}; +}; diff --git a/packages/client/src/user/SigninPage.tsx b/packages/client/src/user/SigninPage.tsx index 10704efd6a..4ee3b1e3d8 100644 --- a/packages/client/src/user/SigninPage.tsx +++ b/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'); + } }, }; }; diff --git a/packages/client/src/user/SignupPage.tsx b/packages/client/src/user/SignupPage.tsx index 68a5188a12..bdcc0fe587 100644 --- a/packages/client/src/user/SignupPage.tsx +++ b/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); }, }; }; diff --git a/packages/client/src/user/index.ts b/packages/client/src/user/index.ts index 196f02b782..6577aa861b 100644 --- a/packages/client/src/user/index.ts +++ b/packages/client/src/user/index.ts @@ -1,4 +1,5 @@ export * from './CurrentUser'; +export * from './CurrentUserProvider'; export * from './SigninPage'; export * from './SignupPage';