feat：添加登录注册

Author: kbin24

src/App.tsx

@@ -1,15 +1,19 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
-import {ProjectListScreen} from './screens/project-list'
 import {LoginScreen} from "./screens/login";
+import {useAuth} from "./context/auth-context";
+import {AuthenticatedApp} from "./authenticated-app";
+import {UnauthenticatedApp} from "./unauthenticated-app";
+
 function App() {
-  return (
-    <div className="App">
-     {/*<ProjectListScreen />*/}
-     <LoginScreen />
-    </div>
-  );
+    const {user} = useAuth()
+    return (
+        <div className="App">
+            {
+                user ? <AuthenticatedApp /> : <UnauthenticatedApp />
+            }
+        </div>
+    );
 }
 
 export default App;

src/auth-provider.ts

@@ -0,0 +1,49 @@
+//在真实环境中，如果使用firebase泽中第三方auth服务的话，本文件不需要开发者进行开发
+
+import {User} from "./screens/project-list/search-panel";
+const apiUrl = process.env.REACT_APP_API_URL
+const localStorageKey = '__auth__provider__token'
+
+export const getToken = () =>{
+    window.localStorage.getItem(localStorageKey)
+}
+
+export const handleUserResponse = ({user}: {user: User}) =>{
+    window.localStorage.setItem(localStorageKey, user.token || '')
+    return user
+}
+
+export const login = (data:{username:string, password: string}) =>{
+   return  fetch(`${apiUrl}/login`,{
+        method: 'POST',
+        headers:{
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+    }).then(async res =>{
+        if(res.ok){
+            return handleUserResponse(await res.json())
+        }else{
+            return Promise.reject(data)
+        }
+    })
+}
+
+
+export const register = (data:{username:string, password: string}) =>{
+    return  fetch(`${apiUrl}/register`,{
+        method: 'POST',
+        headers:{
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+    }).then(async res =>{
+        if(res.ok){
+            return handleUserResponse(await res.json())
+        }else{
+            return Promise.reject(data)
+        }
+    })
+}
+
+export const logout = async () => window.localStorage.removeItem(localStorageKey)

src/authenticated-app.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import {ProjectListScreen} from "./screens/project-list";
+import {useAuth} from "./context/auth-context";
+
+export const AuthenticatedApp = ()=>{
+    const {logout} = useAuth()
+    return <div>
+        <button onClick={logout}>登出</button>
+        <ProjectListScreen />
+    </div>
+}

src/context/auth-context.tsx

@@ -0,0 +1,37 @@
+import React, {ReactNode, useState} from 'react'
+import * as auth from 'auth-provider'
+import {User} from "../screens/project-list/search-panel";
+
+
+const AuthContext = React.createContext<{
+    user: User | null,
+    login: (form:AuthForm) => Promise<void>,
+    register: (form:AuthForm) => Promise<void>,
+    logout: () => Promise<void>,
+}|undefined>(undefined)
+
+AuthContext.displayName = 'AuthContext'
+
+interface AuthForm {
+    username: string;
+    password: string;
+}
+
+export const AuthProvider = ({children}:{children: ReactNode}) =>{
+    const [user, setUser] = useState<User | null>(null)
+
+    //point free
+    const login = (form: AuthForm) => auth.login(form).then(setUser)
+    const register = (form: AuthForm) => auth.register(form).then(user => setUser(user))
+    const logout = () => auth.logout().then(() => setUser(null))
+
+    return <AuthContext.Provider children={children} value={{user,login,register, logout}}></AuthContext.Provider>
+}
+
+export const useAuth = () =>{
+    const context = React.useContext(AuthContext)
+    if(!context){
+        throw new Error('useAuth必须在AuthProvider中使用')
+    }
+    return context
+}

src/context/index.tsx

@@ -0,0 +1,9 @@
+import React, {ReactNode} from "react";
+import {AuthProvider} from "./auth-context";
+
+
+export const AppProviders = ({children}:{children: ReactNode}) =>{
+    return <AuthProvider>
+        {children}
+    </AuthProvider>
+}

src/index.tsx

@@ -4,11 +4,14 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import {loadDevTools} from 'jira-dev-tool'
+import {AppProviders} from "./context";
 
-loadDevTools(()=>{
+loadDevTools(() => {
     ReactDOM.render(
         <React.StrictMode>
-            <App />
+            <AppProviders>
+                <App/>
+            </AppProviders>
         </React.StrictMode>,
         document.getElementById('root')
     );

src/screens/login/index.tsx

@@ -1,30 +1,27 @@
 import React, {FormEvent, FormEventHandler} from 'react'
 import * as qs from "qs";
 import {cleanObject} from "../../utils";
+import {useAuth} from "../../context/auth-context";
+
 const apiUrl = process.env.REACT_APP_API_URL
 export const LoginScreen = () => {
 
-    const login = (param: { username: string, password: string }) => {
-        fetch(`${apiUrl}/login`,{
-            method: 'POST',
-            headers:{
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(param)
-        }).then(async res =>{
-            if(res.ok){
-            }
-        })
-    }
+    const{login,user} = useAuth()
 
     const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault() //组织默认事件
         const username = (event.currentTarget.elements[0] as HTMLInputElement).value
         const password = (event.currentTarget.elements[1] as HTMLInputElement).value
-        login({username,password})
+        login({username, password})
     }
 
     return <form onSubmit={handleSubmit}>
+        {
+            user ? <div>
+                登录成功，用户名：{user?.name}
+                token: {user?.token}
+            </div> : null
+        }
         <div>
             <label htmlFor="username">用户名</label>
             <input type="text" id={'username'}/>

src/screens/project-list/search-panel.tsx

@@ -4,7 +4,8 @@ export interface User {
     id: string;
     name: string;
     personId: string;
-    organization: string
+    organization: string;
+    token: string;
 }
 
 interface SearchPanelProps{

src/unauthenticated-app/index.tsx

@@ -0,0 +1,13 @@
+import React, {useState} from "react";
+import {RegisterScreen} from "./register";
+import {LoginScreen} from "./login";
+
+export const UnauthenticatedApp = () =>{
+    const [isRegister, setIsRegister] = useState(false)
+    return <div>
+        {
+            isRegister ? <RegisterScreen /> : <LoginScreen/>
+        }
+        <button onClick={()=> setIsRegister(!isRegister)}>切换到{isRegister ? '登录' : '注册'}</button>
+    </div>
+}

src/unauthenticated-app/login.tsx

@@ -0,0 +1,28 @@
+import React, {FormEvent, FormEventHandler} from 'react'
+import {useAuth} from "../context/auth-context";
+
+
+const apiUrl = process.env.REACT_APP_API_URL
+export const LoginScreen = () => {
+
+    const{login,user} = useAuth()
+
+    const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault() //组织默认事件
+        const username = (event.currentTarget.elements[0] as HTMLInputElement).value
+        const password = (event.currentTarget.elements[1] as HTMLInputElement).value
+        login({username, password})
+    }
+
+    return <form onSubmit={handleSubmit}>
+        <div>
+            <label htmlFor="username">用户名</label>
+            <input type="text" id={'username'}/>
+        </div>
+        <div>
+            <label htmlFor="password">密码</label>
+            <input type="password" id={'password'}/>
+        </div>
+        <button type={'submit'}>登录</button>
+    </form>
+}