React+Redux+Ant Design+TypeScript 电子商务实战-客户端应用 02 登录注册

2024-08-23 01:18
文章标签 javascript 实战 react 应用 02 登录 ant design 客户端 redux 注册 typescript frontend 电子商务

本文主要是介绍React+Redux+Ant Design+TypeScript 电子商务实战-客户端应用 02 登录注册，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

创建导航菜单

// src\components\core\Navigation.tsx
import { Menu } from 'antd'
import { Link } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { AppState } from '../../store/reducers'
import { RouterState } from 'connected-react-router'// 判断选中类名的钩子函数
function useActive(currentPath: string, path: string): string {return currentPath === path ? 'ant-menu-item-selected' : ''
}const Navigation = () => {const router = useSelector<AppState, RouterState>(state => state.router)const pathname = router.location.pathnameconst isHome = useActive(pathname, '/')const isShop = useActive(pathname, '/shop')return (<Menu mode="horizontal" selectable={false}><Menu.Item className={isHome}><Link to="/">首页</Link></Menu.Item><Menu.Item className={isShop}><Link to="/shop">商城</Link></Menu.Item></Menu>)
}export default Navigation
// src\components\core\Layout.tsx
import React, { FC } from 'react'
import Navigation from './Navigation'// 定义 Layout 组件参数类型的接口
interface Props {children: React.ReactNode
}// FC 表示函数型组件类型
const Layout: FC<Props> = ({ children }) => {return (<div><Navigation></Navigation><div style={{ width: '85%', minWidth: '980px', margin: '0 auto' }}>{children}</div></div>)
}export default Layout

创建页头

页头组件

// src\components\core\Layout.tsx
import { PageHeader } from 'antd'
import React, { FC } from 'react'
import Navigation from './Navigation'// 定义 Layout 组件参数类型的接口
interface Props {children: React.ReactNodetitle: stringsubTitle: string
}// FC 表示函数型组件类型
const Layout: FC<Props> = ({ children, title, subTitle }) => {return (<div><Navigation></Navigation><PageHeader className="jumbotron" title={title} subTitle={subTitle} /><div style={{ width: '85%', minWidth: '980px', margin: '0 auto' }}>{children}</div></div>)
}export default Layout

页头样式

/* src\style.css */
.jumbotron {background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;margin-bottom: 25px;
}.jumbotron span {color: #fff;
}@-webkit-keyframes Gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}
}@-moz-keyframes Gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}
}@keyframes Gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}
}

引入样式表

// src\index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import 'antd/dist/antd.css'
import './style.css'
import Routes from './Routes'
import { Provider } from 'react-redux'
import store, { history } from './store'
import { ConnectedRouter } from 'connected-react-router'ReactDOM.render(<React.StrictMode><Provider store={store}><ConnectedRouter history={history}><Routes /></ConnectedRouter></Provider></React.StrictMode>,document.getElementById('root')
)

页面组件传递 title 和 subTitle

// src\components\core\Home.tsx
import { useSelector } from 'react-redux'
import Layout from './Layout'const Home = () => {const state = useSelector(state => state)return (<Layout title="RM商城" subTitle="优享品质 惊喜价格">Home {JSON.stringify(state)}</Layout>)
}export default Home
// src\components\core\Shop.tsx
import { useSelector } from 'react-redux'
import Layout from './Layout'const Shop = () => {const state = useSelector(state => state)return (<Layout title="RM商城" subTitle="挑选你喜欢的商品把">Shop {JSON.stringify(state)}</Layout>)
}export default Shop

构建注册和登录表单

注册页面组件

// src\components\core\Signup.tsx
import Layout from './Layout'
import { Button, Form, Input } from 'antd'const Signup = () => {return (<Layout title="注册" subTitle="还没有账号？注册一个吧"><Form><Form.Item name="name" label="昵称"><Input /></Form.Item><Form.Item name="password" label="密码"><Input.Password /></Form.Item><Form.Item name="email" label="邮箱"><Input /></Form.Item><Form.Item><Button type="primary" htmlType="submit">注册</Button></Form.Item></Form></Layout>)
}export default Signup

登录页面组件

// src\components\core\Signin.tsx
import Layout from './Layout'
import { Button, Form, Input } from 'antd'const Signin = () => {return (<Layout title="登录" subTitle=""><Form><Form.Item name="email" label="邮箱"><Input /></Form.Item><Form.Item name="password" label="密码"><Input.Password /></Form.Item><Form.Item><Button type="primary" htmlType="submit">登录</Button></Form.Item></Form></Layout>)
}export default Signin

配置路由

// src\Routes.tsx
import { HashRouter, Route, Switch } from 'react-router-dom'
import Home from './components/core/Home'
import Shop from './components/core/Shop'
import Signin from './components/core/Signin'
import Signup from './components/core/Signup'const Routes = () => {return (<HashRouter><Switch><Route path="/" component={Home} exact /><Route path="/shop" component={Shop} /><Route path="/signin" component={Signin} /><Route path="/signup" component={Signup} /></Switch></HashRouter>)
}export default Routes

配置导航菜单

// src\components\core\Navigation.tsx
import { Menu } from 'antd'
import { Link } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { AppState } from '../../store/reducers'
import { RouterState } from 'connected-react-router'// 判断选中类名的钩子函数
function useActive(currentPath: string, path: string): string {return currentPath === path ? 'ant-menu-item-selected' : ''
}const Navigation = () => {const router = useSelector<AppState, RouterState>(state => state.router)const pathname = router.location.pathnameconst isHome = useActive(pathname, '/')const isShop = useActive(pathname, '/shop')const isSignin = useActive(pathname, '/signin')const isSignup = useActive(pathname, '/signup')return (<Menu mode="horizontal" selectable={false}><Menu.Item className={isHome}><Link to="/">首页</Link></Menu.Item><Menu.Item className={isShop}><Link to="/shop">商城</Link></Menu.Item><Menu.Item className={isSignin}><Link to="/signin">登录</Link></Menu.Item><Menu.Item className={isSignup}><Link to="/signup">注册</Link></Menu.Item></Menu>)
}export default Navigation

实现注册的 Redux 流程

和注册相关的 action

// src\store\actions\auth.action.ts
// action.type 常量
export const SIGNUP = 'SIGNUP' // 发送注册请求
export const SIGNUP_SUCCESS = 'SIGNUP_SUCCESS' // 注册成功
export const SIGNUP_FAIL = 'SIGNUP_FAIL' // 注册失败// action.payload 接口类型
export interface SignupPayload {email: stringname: stringpassword: string
}// action 对象接口类型
export interface SignupAction {type: typeof SIGNUPpayload: SignupPayload
}
export interface SignupSuccessAction {type: typeof SIGNUP_SUCCESS
}
export interface SignupFailAction {type: typeof SIGNUP_FAILmessage: string
}// actionCreator
export const signup = (payload: SignupPayload): SignupAction => ({type: SIGNUP,payload
})
export const signupSuccess = (): SignupSuccessAction => ({type: SIGNUP_SUCCESS
})
export const signupFail = (message: string): SignupFailAction => ({type: SIGNUP_FAIL,message
})// action 的联合类型
export type AuthUnionType = SignupAction | SignupSuccessAction | SignupFailAction

定义 reducer

// src\store\reducers\auth.reducer.ts
import { AuthUnionType, SIGNUP, SIGNUP_FAIL, SIGNUP_SUCCESS } from '../actions/auth.action'// state 接口类型
export interface AuthState {signup: {loaded: booleansuccess: booleanmessage: string}
}// state 默认值
const initialState: AuthState = {signup: {loaded: false, // 注册请求是否结束success: false, // 注册是否成功message: '' // 注册失败提示}
}export default function authReducer(state = initialState, action: AuthUnionType) {switch (action.type) {// 发送注册请求case SIGNUP:return {...state,signup: {loaded: false,success: false}}// 注册成功case SIGNUP_SUCCESS:return {...state,signup: {loaded: true,success: true}}// 注册失败case SIGNUP_FAIL:return {...state,signup: {loaded: true,success: false,message: action.message}}default:return state}
}
// src\store\reducers\index.ts
import { connectRouter, RouterState } from 'connected-react-router'
import { History } from 'history'
import { combineReducers } from 'redux'
import authReducer, { AuthState } from './auth.reducer'
// import testReducer from './test.reducer'// 定义一个包含 router 的 store 类型接口 供外部使用
export interface AppState {router: RouterStateauth: AuthState
}const createRootReducer = (history: History) =>combineReducers({// test: testReducer,router: connectRouter(history),auth: authReducer})export default createRootReducer

定义 saga 接收请求

// src\store\sagas\auth.saga.ts
import axios from 'axios'
import { takeEvery, put } from 'redux-saga/effects'
import { API } from '../../config'
import { SIGNUP, SignupAction, signupFail, signupSuccess } from '../actions/auth.action'function* handleSignup(action: SignupAction) {try {const response = yield axios.post(`${API}/signup`, action.payload)yield put(signupSuccess())} catch (error) {yield put(signupFail(error.response.data.errors[0]))}
}export default function* authSaga() {yield takeEvery(SIGNUP, handleSignup)
}
// src\store\sagas\index.ts
import { all } from 'redux-saga/effects'
import authSaga from './auth.saga'export default function* rootSaga() {yield all([authSaga()])
}
// src\store\index.ts
import { applyMiddleware, createStore } from 'redux'
import createRootReducer from './reducers'
import { createHashHistory } from 'history'
import { routerMiddleware } from 'connected-react-router'
import { composeWithDevTools } from 'redux-devtools-extension'
import createSagaMiddleware from '@redux-saga/core'
import rootSaga from './sagas'export const history = createHashHistory()const sagaMiddleware = createSagaMiddleware()const store = createStore(createRootReducer(history),composeWithDevTools(applyMiddleware(routerMiddleware(history), sagaMiddleware))
)sagaMiddleware.run(rootSaga)export default store

修改页面组件

// src\components\core\Signup.tsx
import Layout from './Layout'
import { Button, Form, Input } from 'antd'
import { signup, SignupPayload } from '../../store/actions/auth.action'
import { useDispatch } from 'react-redux'const Signup = () => {// 获取 dispatch 方法const dispatch = useDispatch()// 注册表单提交const onFinish = (value: SignupPayload) => {// 发送注册请求dispatch(signup(value))}return (<Layout title="注册" subTitle="还没有账号？注册一个吧"><Form onFinish={onFinish}><Form.Item name="name" label="昵称"><Input /></Form.Item><Form.Item name="password" label="密码"><Input.Password /></Form.Item><Form.Item name="email" label="邮箱"><Input /></Form.Item><Form.Item><Button type="primary" htmlType="submit">注册</Button></Form.Item></Form></Layout>)
}export default Signup

处理注册结果

实现内容

  1. 注册成功 清空表单
  2. 注册成功 显示成功的提示信息
  3. 注册失败 显示失败的提示信息
  4. 离开页面之前 重置状态
    • 注册状态如果未重置，返回该页面仍然会显示注册结果和提示

刷新表单和显示提示信息

// src\components\core\Signup.tsx
import Layout from './Layout'
import { Button, Form, Input, Result } from 'antd'
import { signup, SignupPayload } from '../../store/actions/auth.action'
import { useDispatch, useSelector } from 'react-redux'
import { AppState } from '../../store/reducers'
import { AuthState } from '../../store/reducers/auth.reducer'
import { useEffect } from 'react'
import { Link } from 'react-router-dom'const Signup = () => {// 获取 dispatch 方法const dispatch = useDispatch()// 获取注册结果const auth = useSelector<AppState, AuthState>(state => state.auth)// 创建表单数据域// 用于绑定到 Form 组件上操作表单const [form] = Form.useForm()// 注册表单提交const onFinish = (value: SignupPayload) => {// 发送注册请求dispatch(signup(value))}// 监听状态useEffect(() => {// 1. 注册成功 清空表单if (auth.signup.loaded && auth.signup.success) {form.resetFields()}}, [auth])// 2. 注册成功 显示成功的提示信息const showSuccess = () => {if (auth.signup.loaded && auth.signup.success) {return (<Resultstatus="success"title="注册成功"extra={[<Button type="primary"><Link to="/signin">登录</Link></Button>]}/>)}}// 3. 注册失败 显示失败的提示信息const showError = () => {if (auth.signup.loaded && !auth.signup.success) {return <Result status="warning" title="注册失败" subTitle={auth.signup.message} />}}// 4. 离开页面之前 重置页面状态useEffect(() => {// 离开页面时会执行这个方法return () => {// 稍后写}}, [])// 注册表单const signupForm = () => (<Form form={form} onFinish={onFinish}><Form.Item name="name" label="昵称"><Input /></Form.Item><Form.Item name="password" label="密码"><Input.Password /></Form.Item><Form.Item name="email" label="邮箱"><Input /></Form.Item><Form.Item><Button type="primary" htmlType="submit">注册</Button></Form.Item></Form>)return (<Layout title="注册" subTitle="还没有账号？注册一个吧">{showSuccess()}{showError()}{signupForm()}</Layout>)
}export default Signup

重置注册状态

定义 action

// src\store\actions\auth.action.ts
// action.type 常量
export const SIGNUP = 'SIGNUP' // 发送注册请求
export const SIGNUP_SUCCESS = 'SIGNUP_SUCCESS' // 注册成功
export const SIGNUP_FAIL = 'SIGNUP_FAIL' // 注册失败
export const RESET_SIGNUP = 'RESET_SIGNUP' // 重置注册状态// action.payload 接口类型
export interface SignupPayload {email: stringname: stringpassword: string
}// action 对象接口类型
export interface SignupAction {type: typeof SIGNUPpayload: SignupPayload
}
export interface SignupSuccessAction {type: typeof SIGNUP_SUCCESS
}
export interface SignupFailAction {type: typeof SIGNUP_FAILmessage: string
}
export interface ResetSignupAction {type: typeof RESET_SIGNUP
}// actionCreator
export const signup = (payload: SignupPayload): SignupAction => ({type: SIGNUP,payload
})
export const signupSuccess = (): SignupSuccessAction => ({type: SIGNUP_SUCCESS
})
export const signupFail = (message: string): SignupFailAction => ({type: SIGNUP_FAIL,message
})
export const resetSignup = (): ResetSignupAction => ({type: RESET_SIGNUP
})// action 的联合类型
export type AuthUnionType = SignupAction | SignupSuccessAction | SignupFailAction | ResetSignupAction

定义 reducer

// src\store\reducers\auth.reducer.ts
import { AuthUnionType, RESET_SIGNUP, SIGNUP, SIGNUP_FAIL, SIGNUP_SUCCESS } from '../actions/auth.action'// state 接口类型
export interface AuthState {signup: {loaded: booleansuccess: booleanmessage: string}
}// state 默认值
const initialState: AuthState = {signup: {loaded: false, // 注册请求是否结束success: false, // 注册是否成功message: '' // 注册失败提示}
}export default function authReducer(state = initialState, action: AuthUnionType) {switch (action.type) {// 发送注册请求case SIGNUP:return {...state,signup: {loaded: false,success: false}}// 注册成功case SIGNUP_SUCCESS:return {...state,signup: {loaded: true,success: true}}// 注册失败case SIGNUP_FAIL:return {...state,signup: {loaded: true,success: false,message: action.message}}// 重置注册状态case RESET_SIGNUP:return {...state,signup: {loaded: false,success: false,message: ''}}default:return state}
}

执行重置操作

// src\components\core\Signup.tsx
import Layout from './Layout'
import { Button, Form, Input, Result } from 'antd'
import { resetSignup, signup, SignupPayload } from '../../store/actions/auth.action'
import { useDispatch, useSelector } from 'react-redux'
import { AppState } from '../../store/reducers'
import { AuthState } from '../../store/reducers/auth.reducer'
import { useEffect } from 'react'
import { Link } from 'react-router-dom'const Signup = () => {// 获取 dispatch 方法const dispatch = useDispatch()// 获取注册结果const auth = useSelector<AppState, AuthState>(state => state.auth)// 创建表单数据域// 用于绑定到 Form 组件上操作表单const [form] = Form.useForm()// 注册表单提交const onFinish = (value: SignupPayload) => {// 发送注册请求dispatch(signup(value))}// 监听状态useEffect(() => {// 1. 注册成功 清空表单if (auth.signup.loaded && auth.signup.success) {form.resetFields()}}, [auth])// 2. 注册成功 显示成功的提示信息const showSuccess = () => {if (auth.signup.loaded && auth.signup.success) {return (<Resultstatus="success"title="注册成功"extra={[<Button type="primary"><Link to="/signin">登录</Link></Button>]}/>)}}// 3. 注册失败 显示失败的提示信息const showError = () => {if (auth.signup.loaded && !auth.signup.success) {return <Result status="warning" title="注册失败" subTitle={auth.signup.message} />}}// 4. 离开页面之前 重置页面状态useEffect(() => {// 离开页面时会执行这个方法return () => {dispatch(resetSignup())}}, [])// 注册表单const signupForm = () => (<Form form={form} onFinish={onFinish}><Form.Item name="name" label="昵称"><Input /></Form.Item><Form.Item name="password" label="密码"><Input.Password /></Form.Item><Form.Item name="email" label="邮箱"><Input /></Form.Item><Form.Item><Button type="primary" htmlType="submit">注册</Button></Form.Item></Form>)return (<Layout title="注册" subTitle="还没有账号？注册一个吧">{showSuccess()}{showError()}{signupForm()}</Layout>)
}export default Signup

实现登录的 Redux 流程

和登录相关的 action

// src\store\actions\auth.action.ts/*** 注册*/.../*** 登录*/export const SIGNIN = 'SIGNIN' // 发送登录请求
export const SIGNIN_SUCCESS = 'SIGNIN_SUCCESS' // 登录成功
export const SIGNIN_FAIL = 'SIGNIN_FAIL' // 登录失败export interface SigninPayload {email: stringpassword: string
}export interface SigninAction {type: typeof SIGNINpayload: SigninPayload
}export interface SigninSuccessAction {type: typeof SIGNIN_SUCCESS
}export interface SigninFailAction {type: typeof SIGNIN_FAILmessage: string
}export const signin = (payload: SigninPayload): SigninAction => ({type: SIGNIN,payload
})export const signinSuccess = (): SigninSuccessAction => ({type: SIGNIN_SUCCESS
})export const signinFail = (message: string): SigninFailAction => ({type: SIGNIN_FAIL,message
})// action 的联合类型
export type AuthUnionType =| SignupAction| SignupSuccessAction| SignupFailAction| ResetSignupAction| SigninAction| SigninSuccessAction| SigninFailAction

定义 reducer

// src\store\reducers\auth.reducer.ts
import {AuthUnionType,RESET_SIGNUP,SIGNIN,SIGNIN_FAIL,SIGNIN_SUCCESS,SIGNUP,SIGNUP_FAIL,SIGNUP_SUCCESS
} from '../actions/auth.action'// state 接口类型
export interface AuthState {signup: {loaded: booleansuccess: booleanmessage: string}signin: {loaded: booleansuccess: booleanmessage: string}
}// state 默认值
const initialState: AuthState = {signup: {loaded: false, // 注册请求是否结束success: false, // 注册是否成功message: '' // 注册失败提示},signin: {loaded: false, // 登录请求是否结束success: false, // 登录是否成功message: '' // 登录失败提示}
}export default function authReducer(state = initialState, action: AuthUnionType) {switch (action.type) {...// 发送登录请求case SIGNIN:return {...state,signin: {loaded: false,success: false,message: ''}}// 登录成功case SIGNIN_SUCCESS:return {...state,signin: {loaded: true,success: true,message: ''}}// 登录失败case SIGNIN_FAIL:return {...state,signin: {loaded: true,success: false,message: action.message}}default:return state}
}

定义 sage 接收请求

// src\store\sagas\auth.saga.ts
import axios, { AxiosResponse } from 'axios'
import { takeEvery, put } from 'redux-saga/effects'
import { API } from '../../config'
import {SIGNIN,SigninAction,signinFail,signinSuccess,SIGNUP,SignupAction,signupFail,signupSuccess
} from '../actions/auth.action'function* handleSignup(action: SignupAction) {try {yield axios.post(`${API}/signup`, action.payload)yield put(signupSuccess())} catch (error) {yield put(signupFail(error.response.data.errors[0]))}
}function* handleSignin(action: SigninAction) {try {const response: AxiosResponse = yield axios.post(`${API}/signin`, action.payload)// 存储令牌localStorage.setItem('jwt', JSON.stringify(response.data))yield put(signinSuccess())} catch (error) {yield put(signinFail(error.response.data.errors[0]))}
}export default function* authSaga() {// 注册yield takeEvery(SIGNUP, handleSignup)// 登录yield takeEvery(SIGNIN, handleSignin)
}

修改页面组件

// src\components\core\Signin.tsx
import Layout from './Layout'
import { Button, Form, Input } from 'antd'
import { signin, SigninPayload } from '../../store/actions/auth.action'
import { useDispatch } from 'react-redux'const Signin = () => {// 获取 dispatchconst dispatch = useDispatch()const onFinish = (value: SigninPayload) => {dispatch(signin(value))}return (<Layout title="登录" subTitle=""><Form onFinish={onFinish}><Form.Item name="email" label="邮箱"><Input /></Form.Item><Form.Item name="password" label="密码"><Input.Password /></Form.Item><Form.Item><Button type="primary" htmlType="submit">登录</Button></Form.Item></Form></Layout>)
}export default Signin

处理登录结果

实现内容

  1. 获取登录结果
  2. 登录失败 显示错误信息
  3. 登录成功 根据角色跳转到对应的管理页面
  4. 处理导航链接
    • 已登录
    • 隐藏[登录，注册]
    • 显示[dashboard]

获取登录结果和显示失败信息

// src\components\core\Signin.tsx
import Layout from './Layout'
import { Button, Form, Input, Result } from 'antd'
import { signin, SigninPayload } from '../../store/actions/auth.action'
import { useDispatch, useSelector } from 'react-redux'
import { AppState } from '../../store/reducers'
import { AuthState } from '../../store/reducers/auth.reducer'const Signin = () => {// 获取 dispatchconst dispatch = useDispatch()const onFinish = (value: SigninPayload) => {dispatch(signin(value))}// 1. 获取登录结果const auth = useSelector<AppState, AuthState>(state => state.auth)// 2. 登录失败 显示错误信息const showError = () => {if (auth.signin.loaded && !auth.signin.success) {return <Result status="warning" title="登录失败" subTitle={auth.signin.message} />}}// 3. 登录成功 根据角色跳转到对应的管理页面// 4. 处理导航链接: 已登录 隐藏[登录，注册] 显示[dashboard]// 登录表单const singinForm = () => (<Form onFinish={onFinish}><Form.Item name="email" label="邮箱"><Input /></Form.Item><Form.Item name="password" label="密码"><Input.Password /></Form.Item><Form.Item><Button type="primary" htmlType="submit">登录</Button></Form.Item></Form>)return (<Layout title="登录" subTitle="">{showError()}{singinForm()}</Layout>)
}export default Signin

登录成功跳转管理页面

定义一个判断是否登录的方法

首先定义一个 User 接口和 Jwt 接口便于其它地方使用：

// src\store\models\auth.ts
export interface User {_id: stringname: stringemail: stringrole: number
}export interface Jwt {token: stringuser: User
}

定义判断方法：

// src\helpers\auth.ts
import { Jwt } from '../store/models/auth'// 是否登录
export function isAuth(): boolean | Jwt {const jwt = localStorage.getItem('jwt')if (jwt) {return JSON.parse(jwt)}return false
}

跳转页面

// src\components\core\Signin.tsx
import Layout from './Layout'
import { Button, Form, Input, Result } from 'antd'
import { signin, SigninPayload } from '../../store/actions/auth.action'
import { useDispatch, useSelector } from 'react-redux'
import { AppState } from '../../store/reducers'
import { AuthState } from '../../store/reducers/auth.reducer'
import { isAuth } from '../../helpers/auth'
import { Jwt } from '../../store/models/auth'
import { Redirect } from 'react-router-dom'const Signin = () => {// 获取 dispatchconst dispatch = useDispatch()const onFinish = (value: SigninPayload) => {dispatch(signin(value))}// 1. 获取登录结果const auth = useSelector<AppState, AuthState>(state => state.auth)// 2. 登录失败 显示错误信息const showError = () => {if (auth.signin.loaded && !auth.signin.success) {return <Result status="warning" title="登录失败" subTitle={auth.signin.message} />}}// 3. 登录成功 根据角色跳转到对应的管理页面const redirectToDashboard = () => {const auth = isAuth()if (auth) {const {user: { role }} = auth as Jwtif (role === 0) {// 普通用户return <Redirect to="/user/dashboard" />} else {// 管理员return <Redirect to="/admin/dashboard" />}}}// 4. 处理导航链接: 已登录 隐藏[登录，注册] 显示[dashboard]// 登录表单const singinForm = () => (<Form onFinish={onFinish}><Form.Item name="email" label="邮箱"><Input /></Form.Item><Form.Item name="password" label="密码"><Input.Password /></Form.Item><Form.Item><Button type="primary" htmlType="submit">登录</Button></Form.Item></Form>)return (<Layout title="登录" subTitle="">{showError()}{redirectToDashboard()}{singinForm()}</Layout>)
}export default Signin

处理导航链接

// src\components\core\Navigation.tsx
import { Menu } from 'antd'
import { Link } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { AppState } from '../../store/reducers'
import { RouterState } from 'connected-react-router'
import { isAuth } from '../../helpers/auth'
import { Jwt } from '../../store/models/auth'// 判断选中类名的钩子函数
function useActive(currentPath: string, path: string): string {return currentPath === path ? 'ant-menu-item-selected' : ''
}const Navigation = () => {const router = useSelector<AppState, RouterState>(state => state.router)const pathname = router.location.pathnameconst isHome = useActive(pathname, '/')const isShop = useActive(pathname, '/shop')const isSignin = useActive(pathname, '/signin')const isSignup = useActive(pathname, '/signup')const isDashboard = useActive(pathname, getDashboardUrl())function getDashboardUrl() {let url = '/user/dashboard'if (isAuth()) {const {user: { role }} = isAuth() as Jwtif (role === 1) {url = '/admin/dashboard'}}return url}return (<Menu mode="horizontal" selectable={false}><Menu.Item className={isHome}><Link to="/">首页</Link></Menu.Item><Menu.Item className={isShop}><Link to="/shop">商城</Link></Menu.Item>{!isAuth() && (<><Menu.Item className={isSignin}><Link to="/signin">登录</Link></Menu.Item><Menu.Item className={isSignup}><Link to="/signup">注册</Link></Menu.Item></>)}{isAuth() && (<Menu.Item className={isDashboard}><Link to={getDashboardUrl()}>dashboard</Link></Menu.Item>)}</Menu>)
}export default Navigation

创建 Dashboard 用户管理页面

创建普通用户管理页面

// src\components\admin\Dashboard.tsx
import Layout from '../core/Layout'const Dashboard = () => {return (<Layout title="用户 dashboard" subTitle="">Dashboard</Layout>)
}export default Dashboard

配置路由

// src\Routes.tsx
import { HashRouter, Route, Switch } from 'react-router-dom'
import Dashboard from './components/admin/Dashboard'
import Home from './components/core/Home'
import Shop from './components/core/Shop'
import Signin from './components/core/Signin'
import Signup from './components/core/Signup'const Routes = () => {return (<HashRouter><Switch><Route path="/" component={Home} exact /><Route path="/shop" component={Shop} /><Route path="/signin" component={Signin} /><Route path="/signup" component={Signup} /><Route path="/user/dashboard" component={Dashboard} /></Switch></HashRouter>)
}export default Routes

创建受保护的路由

dashboard 页面需要登陆后才能访问，要添加访问权限。

创建一个受保护的路由组件，限制只有登录后才能访问的页面：

// src\components\admin\PrivateRoute.tsx
import { Redirect, Route, RouteProps } from 'react-router-dom'
import { FC } from 'react'
import { isAuth } from '../../helpers/auth'interface PrivateRouteProps extends RouteProps {component: React.ComponentType<any>
}const PrivateRoute: FC<PrivateRouteProps> = ({ component: Component, ...rest }) => {return (<Route{...rest}render={props => {const auth = isAuth()if (auth) {return <Component {...props} />}return <Redirect to="/signin" />}}/>)
}export default PrivateRoute

替换原来的路由：

// src\Routes.tsx
import { HashRouter, Route, Switch } from 'react-router-dom'
import Dashboard from './components/admin/Dashboard'
import PrivateRoute from './components/admin/PrivateRoute'
import Home from './components/core/Home'
import Shop from './components/core/Shop'
import Signin from './components/core/Signin'
import Signup from './components/core/Signup'const Routes = () => {return (<HashRouter><Switch><Route path="/" component={Home} exact /><Route path="/shop" component={Shop} /><Route path="/signin" component={Signin} /><Route path="/signup" component={Signup} /><PrivateRoute path="/user/dashboard" component={Dashboard} /></Switch></HashRouter>)
}export default Routes

创建管理员管理页面

// src\components\admin\AdminDashboard.tsx
import Layout from '../core/Layout'const AdminDashboard = () => {return (<Layout title="管理员 dashboard" subTitle="">Dashboard</Layout>)
}export default AdminDashboard

创建管理员身份判断路由

// src\components\admin\AdminRoute.tsx
import { Redirect, Route, RouteProps } from 'react-router-dom'
import { FC } from 'react'
import { isAuth } from '../../helpers/auth'
import { Jwt } from '../../store/models/auth'interface PrivateRouteProps extends RouteProps {component: React.ComponentType<any>
}const AdminRoute: FC<PrivateRouteProps> = ({ component: Component, ...rest }) => {return (<Route{...rest}render={props => {const auth = isAuth() as Jwtif (auth && auth.user.role === 1) {return <Component {...props} />}return <Redirect to="/signin" />}}/>)
}export default AdminRoute

配置管理员管理页面路由

// src\Routes.tsx
import { HashRouter, Route, Switch } from 'react-router-dom'
import AdminDashboard from './components/admin/AdminDashboard'
import AdminRoute from './components/admin/AdminRoute'
import Dashboard from './components/admin/Dashboard'
import PrivateRoute from './components/admin/PrivateRoute'
import Home from './components/core/Home'
import Shop from './components/core/Shop'
import Signin from './components/core/Signin'
import Signup from './components/core/Signup'const Routes = () => {return (<HashRouter><Switch><Route path="/" component={Home} exact /><Route path="/shop" component={Shop} /><Route path="/signin" component={Signin} /><Route path="/signup" component={Signup} /><PrivateRoute path="/user/dashboard" component={Dashboard} /><AdminRoute path="/admin/dashboard" component={AdminDashboard} /></Switch></HashRouter>)
}export default Routes

完善管理员 Dashboard 页面

// src\components\admin\AdminDashboard.tsx
import { Col, Descriptions, Menu, Row, Typography } from 'antd'
import { Link } from 'react-router-dom'
import Layout from '../core/Layout'
import { ShoppingCartOutlined, UserOutlined, OrderedListOutlined } from '@ant-design/icons'
import { Jwt } from '../../store/models/auth'
import { isAuth } from '../../helpers/auth'const { Title } = Typographyconst AdminDashboard = () => {const {user: { name, email }} = isAuth() as Jwtconst adminLinks = () => (<><Title level={5}>管理员链接</Title><Menu style={{ borderRight: 0 }}><Menu.Item><ShoppingCartOutlined style={{ marginRight: '5px' }} /><Link to="">添加分类</Link></Menu.Item><Menu.Item><UserOutlined style={{ marginRight: '5px' }} /><Link to="">添加产品</Link></Menu.Item><Menu.Item><OrderedListOutlined style={{ marginRight: '5px' }} /><Link to="">订单列表</Link></Menu.Item></Menu></>)const adminInfo = () => (<Descriptions title="管理员信息" bordered><Descriptions.Item label="昵称">{name}</Descriptions.Item><Descriptions.Item label="邮箱">{email}</Descriptions.Item><Descriptions.Item label="角色">管理员</Descriptions.Item></Descriptions>)return (<Layout title="管理员 dashboard" subTitle=""><Row><Col span="4">{adminLinks()}</Col><Col span="20">{adminInfo()}</Col></Row></Layout>)
}export default AdminDashboard

这篇关于React+Redux+Ant Design+TypeScript 电子商务实战-客户端应用 02 登录注册的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1097935。

相关文章

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战：从入门到进阶优化1. MyBatis
阅读更多...
MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL？1.2 动态SQL的优点1.3 动态S
阅读更多...
Pandas使用SQLite3实战

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法：读
阅读更多...
springboot security验证码的登录实例

springboot security验证码的登录实例

《springbootsecurity验证码的登录实例》：本文主要介绍springbootsecurity验证码的登录实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录前言代码示例引入依赖定义验证码生成器定义获取验证码及认证接口测试获取验证码登录总结前言在spring
阅读更多...
Python中随机休眠技术原理与应用详解

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2
阅读更多...
Python Dash框架在数据可视化仪表板中的应用与实践记录

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash？1.1
阅读更多...
Android Kotlin 高阶函数详解及其在协程中的应用小结

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民（First-ClassCitizen）,使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数？3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda
阅读更多...
Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
css中的 vertical-align与line-height作用详解

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》：本文主要介绍了CSS中的`vertical-align`和`line-height`属性，包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，详细内容请阅读本文，希望能对你有所帮助... 目录vertical-ali
阅读更多...
Java中&和&&以及|和||的区别、应用场景和代码示例

Java中&和&&以及|和||的区别、应用场景和代码示例

《Java中&和&&以及|和||的区别、应用场景和代码示例》：本文主要介绍Java中的逻辑运算符&、&&、|和||的区别,包括它们在布尔和整数类型上的应用,文中通过代码介绍的非常详细,需要的朋友可... 目录前言1. & 和 &&代码示例2. | 和 ||代码示例3. 为什么要使用 & 和 | 而不是总是使
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2