feat: add permission solution

msgbyte · Jul 19, 2023 · e2b93b6 · e2b93b6
1 parent 0d1c2fe
commit e2b93b6
Show file tree

Hide file tree

Showing 22 changed files with 421 additions and 47 deletions.
diff --git a/demo/rbac/.gitignore b/demo/rbac/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/demo/rbac/index.html b/demo/rbac/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tushan</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/demo/rbac/package.json b/demo/rbac/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "demo-rbac",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tushan": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^3.1.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0"
+  }
+}
diff --git a/demo/rbac/public/logo.svg b/demo/rbac/public/logo.svg
diff --git a/demo/rbac/src/App.tsx b/demo/rbac/src/App.tsx
@@ -0,0 +1,65 @@
+import {
+  Category,
+  createTextField,
+  jsonServerProvider,
+  ListTable,
+  Resource,
+  Tushan,
+} from 'tushan';
+import { IconImage, IconUser } from 'tushan/icon';
+import { authProvider } from './auth';
+import { photoFields, userFields } from './fields';
+
+const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
+
+function App() {
+  return (
+    <Tushan
+      basename="/"
+      dataProvider={dataProvider}
+      authProvider={authProvider}
+    >
+      {({ permissions }) => (
+        <>
+          <Resource
+            name="users"
+            label="User"
+            icon={<IconUser />}
+            list={
+              <ListTable
+                filter={[
+                  createTextField('q', {
+                    label: 'Search',
+                    edit: {
+                      placeholder: 'Search name...',
+                    },
+                  }),
+                ]}
+                fields={userFields}
+                action={{
+                  create: permissions.includes('admin'),
+                  detail: true,
+                  edit: permissions.includes('admin'),
+                  delete: true,
+                }}
+              />
+            }
+          />
+
+          <Resource
+            name="photos"
+            icon={<IconImage />}
+            list={
+              <ListTable
+                fields={photoFields}
+                action={{ detail: true, edit: true, delete: true }}
+              />
+            }
+          />
+        </>
+      )}
+    </Tushan>
+  );
+}
+
+export default App;
diff --git a/demo/rbac/src/auth.ts b/demo/rbac/src/auth.ts
@@ -0,0 +1,37 @@
+import { AuthProvider } from 'tushan';
+
+export const authProvider: AuthProvider = {
+  login: ({ username, password }) => {
+    if (username !== 'tushan' || password !== 'tushan') {
+      return Promise.reject();
+    }
+
+    localStorage.setItem('username', username);
+    return Promise.resolve();
+  },
+  logout: () => {
+    localStorage.removeItem('username');
+    return Promise.resolve();
+  },
+  checkAuth: () =>
+    localStorage.getItem('username') ? Promise.resolve() : Promise.reject(),
+  checkError: (error) => {
+    const status = error.status;
+    if (status === 401 || status === 403) {
+      localStorage.removeItem('username');
+      return Promise.reject();
+    }
+    // other error code (404, 500, etc): no need to log out
+    return Promise.resolve();
+  },
+  getIdentity: () =>
+    Promise.resolve({
+      id: 'user',
+      fullName: 'John Doe',
+    }),
+  getPermissions: () =>
+    Promise.resolve([
+      // 'admin',
+      'user',
+    ]),
+};
diff --git a/demo/rbac/src/fields.ts b/demo/rbac/src/fields.ts
@@ -0,0 +1,87 @@
+import {
+  createAvatarField,
+  createBooleanField,
+  createEmailField,
+  createImageField,
+  createReferenceField,
+  createSelectField,
+  createTextAreaField,
+  createTextField,
+  createUrlField,
+} from 'tushan';
+
+export const userFields = [
+  createTextField('id', {
+    label: 'ID',
+  }),
+  createTextField('name', {
+    list: {
+      sort: true,
+    },
+  }),
+  createEmailField('email', {
+    edit: {
+      hidden: true,
+    },
+    create: {
+      hidden: false,
+    },
+  }),
+  createUrlField('website'),
+];
+
+export const photoFields = [
+  createTextField('id', {
+    label: 'ID',
+  }),
+  createTextField('albumId'),
+  createTextField('title'),
+  createImageField('url', {
+    height: 300,
+  }),
+  createAvatarField('thumbnailUrl'),
+];
+
+export const commentFields = [
+  createTextField('id', {
+    list: {
+      width: 100,
+    },
+  }),
+  createTextField('name'),
+  createEmailField('email'),
+  createTextAreaField('body', {
+    list: {
+      ellipsis: true,
+    },
+  }),
+];
+
+export const todoFields = [
+  createTextField('id', {
+    list: {
+      width: 100,
+    },
+  }),
+  createReferenceField('userId', {
+    label: 'User',
+    reference: 'users',
+    displayField: 'name',
+  }),
+  createTextField('title'),
+  // createBooleanField('completed'),
+  createSelectField('completed', {
+    items: [
+      {
+        value: true,
+        label: 'Completed',
+        color: 'red',
+      },
+      {
+        value: false,
+        label: 'Processing',
+        color: 'green',
+      },
+    ],
+  }),
+];
diff --git a/demo/rbac/src/main.tsx b/demo/rbac/src/main.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <App />
+);
diff --git a/demo/rbac/src/vite-env.d.ts b/demo/rbac/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/demo/rbac/tsconfig.json b/demo/rbac/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/demo/rbac/tsconfig.node.json b/demo/rbac/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/demo/rbac/vite.config.ts b/demo/rbac/vite.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+console.log('后台默认密码: tushan/tushan');
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
diff --git a/packages/tushan/client/api/auth/index.ts b/packages/tushan/client/api/auth/index.ts
@@ -4,3 +4,4 @@ export * from './createAuthProvider';
 export * from './createAuthHTTPClient';
 export * from './useLogin';
 export * from './useLogout';
+export * from './usePermissions';
diff --git a/packages/tushan/client/api/auth/usePermissions.ts b/packages/tushan/client/api/auth/usePermissions.ts
@@ -0,0 +1,28 @@
+import { useQuery, UseQueryOptions } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useTushanContext } from '../../context/tushan';
+
+export function usePermissions<Permissions = any, Error = any>(
+  params = {},
+  queryParams: UseQueryOptions<Permissions, Error, Permissions, any> = {
+    staleTime: 5 * 60 * 1000,
+  }
+) {
+  const { authProvider } = useTushanContext();
+
+  const result = useQuery(
+    ['auth', 'getPermissions', params],
+    () => authProvider?.getPermissions(params) ?? Promise.resolve(null),
+    queryParams
+  );
+
+  return useMemo(
+    () => ({
+      permissions: result.data,
+      isLoading: result.isLoading,
+      error: result.error,
+      refetch: result.refetch,
+    }),
+    [result]
+  );
+}
diff --git a/packages/tushan/client/components/BuiltinRoutes.tsx b/packages/tushan/client/components/BuiltinRoutes.tsx
@@ -5,14 +5,15 @@ import { useTushanContext } from '../context/tushan';
 import { useConfigureAdminRouterFromChildren } from '../hooks/useConfigureAdminRouterFromChildren';
 import { useDelay } from '../hooks/useDelay';
 import { useUserStore } from '../store/user';
+import type { TushanChildren } from '../types';
 import { createSelector } from '../utils/createSelector';
 import { Dashboard } from './defaults/Dashboard';
 import { LoginPage } from './defaults/LoginPage';
 import { BasicLayout } from './layout';
 import { LoadingView } from './LoadingView';
 
 export interface BuiltinRoutesProps {
-  children?: React.ReactNode;
+  children: TushanChildren;
 }
 
 export const BuiltinRoutes: React.FC<BuiltinRoutesProps> = React.memo(

diff --git a/packages/tushan/client/components/Tushan.tsx b/packages/tushan/client/components/Tushan.tsx
@@ -1,13 +1,13 @@
 import React, { useMemo } from 'react';
 import { BrowserRouter, HashRouter } from 'react-router-dom';
-import { BuiltinRoutes } from './BuiltinRoutes';
+import { BuiltinRoutes, BuiltinRoutesProps } from './BuiltinRoutes';
 import { TushanContextProps, TushanContextProvider } from '../context/tushan';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { defaultQueryClient } from '../api';
 import { ArcoDesignProvider } from './ArcoDesignProvider';
 import '@arco-design/web-react/dist/css/arco.css';
 
-interface TushanProps extends TushanContextProps, React.PropsWithChildren {
+interface TushanProps extends TushanContextProps, BuiltinRoutesProps {
   queryClient?: QueryClient;
 }
 export const Tushan: React.FC<TushanProps> = React.memo((props) => {