feat: user auth

packages/api/src/migrations/init.ts

@@ -108,39 +108,17 @@ import * as uiSchema from './ui-schema';
         extname: '.png',
         mimetype: 'image/png',
         url: 'https://nocobase.oss-cn-beijing.aliyuncs.com/682e5ad037dd02a0fe4800a3e91c283b.png',
-        created_at: '2021-08-16T06:31:53.214Z',
-        updated_at: '2021-08-16T06:31:53.214Z',
         storage_id: 2,
       },
     });
   }
+
+  const User = database.getModel('users');
+  const user = await User.create({
+    email: process.env.ADMIN_EMAIL,
+    password: process.env.ADMIN_PASSWORD,
+  });
+
   await database.close();
 })();
 
-const a = {
-  data: {
-    id: 1,
-    title: 'NocoBase',
-    created_at: '2021-08-16T05:37:50.751Z',
-    updated_at: '2021-08-16T06:31:55.069Z',
-    logo_id: 3,
-    created_by_id: null,
-    updated_by_id: null,
-    logo: {
-      id: 3,
-      title: 'logo-white (1)',
-      filename: '682e5ad037dd02a0fe4800a3e91c283b.png',
-      extname: '.png',
-      size: null,
-      mimetype: 'image/png',
-      path: '',
-      meta: {},
-      url: 'https://nocobase.oss-cn-beijing.aliyuncs.com/682e5ad037dd02a0fe4800a3e91c283b.png',
-      created_at: '2021-08-16T06:31:53.214Z',
-      updated_at: '2021-08-16T06:31:53.214Z',
-      created_by_id: null,
-      updated_by_id: null,
-      storage_id: 2,
-    },
-  },
-};

packages/app/src/pages/index.tsx

@@ -17,6 +17,15 @@ const request = extend({
   timeout: 30000,
 });
 
+request.use(async (ctx, next) => {
+  const { headers } = ctx.req.options as any;
+  const token = localStorage.getItem('NOCOBASE_TOKEN');
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`;
+  }
+  await next();
+});
+
 const RouteSwitch = createRouteSwitch({
   components: {
     AdminLayout,

packages/client/src/components/admin-layout/Auth.tsx

@@ -0,0 +1,24 @@
+import { useRequest } from 'ahooks';
+import { Spin } from 'antd';
+import React, { createContext } from 'react';
+import { Redirect } from 'react-router';
+import { useLocation } from 'react-router-dom';
+
+export const AuthContext = createContext(null);
+
+export function AuthProvider(props) {
+  const service = useRequest('users:check', {
+    formatResult: (result) => result?.data,
+  });
+  const location = useLocation();
+  const { pathname, search } = location;
+  let redirect = `?redirect=${pathname}${search}`;
+  if (service.error) {
+    return <Redirect to={'/login' + redirect} />;
+  }
+  return (
+    <AuthContext.Provider value={{ service, currentUser: service.data }}>
+      {service.loading ? <Spin /> : props.children}
+    </AuthContext.Provider>
+  );
+}

packages/client/src/components/admin-layout/UserInfo.tsx

@@ -13,7 +13,7 @@ export const UserInfo = () => {
           <Menu.Divider />
           <Menu.Item
             onClick={async () => {
-              await request('/users:logout');
+              await request('users:logout');
               localStorage.removeItem('NOCOBASE_TOKEN');
               history.push('/login');
             }}

packages/client/src/components/admin-layout/index.tsx

@@ -38,6 +38,7 @@ import { Permissions } from './Permissions';
 import { More } from './More';
 import { UserInfo } from './UserInfo';
 import { SiteTitle, SystemSettingsProvider } from './SiteTitle';
+import { AuthProvider } from './Auth';
 
 function DesignableToggle() {
   const { designable, setDesignable } = useDesignableSwitchContext();
@@ -177,6 +178,7 @@ export function AdminLayout({ route, ...others }: any) {
   console.log('current?.title', current, current?.title, defaultSelectedKeys);
 
   return (
+    <AuthProvider>
       <SystemSettingsProvider>
         <DesignableSwitchProvider>
           <CollectionsProvider>
@@ -190,6 +192,7 @@ export function AdminLayout({ route, ...others }: any) {
           </CollectionsProvider>
         </DesignableSwitchProvider>
       </SystemSettingsProvider>
+    </AuthProvider>
   );
 }
 

packages/client/src/components/route-schema-renderer/index.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import { Spin } from 'antd';
 import { Helmet } from 'react-helmet';
 import { useRequest } from 'ahooks';
-import { SchemaRenderer } from '../../schemas';
+import { request, SchemaRenderer } from '../../schemas';
 import { useForm } from '@formily/react';
 import { useHistory } from 'react-router-dom';
 
@@ -16,8 +16,13 @@ export function useLogin() {
   return {
     async run() {
       await form.submit();
+      const { data } = await request('users:login', {
+        method: 'post',
+        data: form.values,
+      });
       history.push('/admin');
-      console.log(form.values);
+      localStorage.setItem('NOCOBASE_TOKEN', data?.data?.token);
+      console.log('NOCOBASE_TOKEN', data?.data?.token);
     },
   };
 }

packages/client/src/demos/demo1.tsx

@@ -19,6 +19,15 @@ const request = extend({
   timeout: 30000,
 });
 
+request.use(async (ctx, next) => {
+  const { headers } = ctx.req.options as any;
+  const token = localStorage.getItem('NOCOBASE_TOKEN');
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`;
+  }
+  await next();
+});
+
 console.log('process.env.API_URL', process.env.API_URL);
 
 // console.log = () => {}

packages/client/src/schemas/index.tsx

@@ -25,6 +25,16 @@ export const request = extend({
   prefix: process.env.API_URL,
   timeout: 30000,
 });
+
+request.use(async (ctx, next) => {
+  const { headers } = ctx.req.options as any;
+  const token = localStorage.getItem('NOCOBASE_TOKEN');
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`;
+  }
+  await next();
+});
+
 console.log('process.env.API_URL', process.env.API_URL);
 
 export async function createOrUpdateCollection(data: any) {

packages/client/src/schemas/kanban/style.less

@@ -89,4 +89,5 @@
 .nb-kanban-column-header {
   margin-bottom: 12px;
   line-height: 32px;
+  padding: 0 12px;
 }