diff --git a/src/config/request.tsx b/src/config/request.tsx
index 64ed46e..07c3317 100644
--- a/src/config/request.tsx
+++ b/src/config/request.tsx
@@ -4,12 +4,13 @@ import { Spin } from "antd"
 
 import CreateAxiosInstance from "@/service/request"
 import type { IAxiosRequestConfig, IAxiosResponse, AxiosError } from "@/service/request"
+import utils from "@/utils"
 
 const request = new CreateAxiosInstance({
 	baseURL: "",
 	timeout: 10000,
 	headers: {
-		token: "token"
+		token: utils.getToken()
 	},
 	abort: false,
 	load: false
@@ -52,6 +53,11 @@ request.requestStart = (config: IAxiosRequestConfig) => {
 		}
 		requestNum += 1
 	}
+	if (config.headers!.token) {
+		config.headers!.token = utils.getToken()
+	}
+
+	return config
 }
 
 request.requestEnd = (config: IAxiosRequestConfig) => {
diff --git a/src/views/book/list/index.tsx b/src/views/book/list/index.tsx
index 6e0e130..6595300 100644
--- a/src/views/book/list/index.tsx
+++ b/src/views/book/list/index.tsx
@@ -1,5 +1,5 @@
 import { Table, Tag, Space, Pagination } from "antd"
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState, useCallback, Component } from "react"
 import type { PaginationProps } from "antd"
 import api from "@/api"
 import "./list.scss"
@@ -10,11 +10,12 @@ const App = () => {
 	const [list, setList] = useState([])
 	const [currentPage, setCurrentPage] = useState(1)
 	const [numPerPage, setNumPerPage] = useState(10)
-	const [totalCount, setTotalCount] = useState(100)
-	const [pageSizeOptions] = useState(["10", "20", "50", "100"])
+	const [totalCount, setTotalCount] = useState(10)
+	const pageSizeOptions = ["10", "20", "50", "100"]
 
 	const [loading, setLoading] = useState(false)
-	const getBookList = (data) => {
+	const getBookList = data => {
+		console.log("getBookList currentPage:", currentPage)
 		setLoading(true)
 		api.book
 			.getBookList(data)
@@ -29,21 +30,28 @@ const App = () => {
 			})
 	}
 
+	const resetCurrentPage = useCallback(num => setCurrentPage(num), [setCurrentPage])
+
 	const onChange: PaginationProps["onChange"] = pageNumber => {
 		console.log("Page: ", pageNumber)
+		getBookList({ currentPage: pageNumber, numPerPage })
 		setCurrentPage(pageNumber)
 	}
 
 	const onShowSizeChange = (current, size) => {
-		setCurrentPage(1)
+		resetCurrentPage(1)
+		getBookList({ currentPage: 1, numPerPage: size })
 		setNumPerPage(size)
 	}
 
 	useEffect(() => {
-		getBookList({ currentPage: currentPage, numPerPage: numPerPage })
-	}, [currentPage])
+		console.log("useEffect currentPage:", currentPage)
+		getBookList({ currentPage, numPerPage })
+	}, [])
+
 	return (
 		<div>
+			<button onClick={resetCurrentPage}>resetCurrentPage</button>
 			<Table dataSource={list} pagination={false} loading={loading} rowKey={(record: any) => record.id}>
 				<Column title="Author" dataIndex="author" key="author" />
 				<Column title="BookName" dataIndex="merchName" key="merchName" />
@@ -73,4 +81,97 @@ const App = () => {
 	)
 }
 
+class ListApp extends Component {
+	state = {
+		list: [],
+		loading: false,
+		totalCount: 0,
+		listQuery: {
+			currentPage: 1,
+			numPerPage: 10
+		}
+	}
+	getBookList = () => {
+		this.setState({ loading: true })
+		api.book
+			.getBookList(this.state.listQuery)
+			.then(book => {
+				this.setState({
+					list: book.recordList,
+					totalCount: book.totalCount,
+					listQuery: {
+						currentPage: book.currentPage,
+						numPerPage: book.numPerPage
+					}
+				})
+			})
+			.finally(() => {
+				this.setState({ loading: false })
+			})
+	}
+	onChange = (currentPage, pageSize) => {
+		this.setState(
+			state => ({
+				listQuery: {
+					...state.listQuery,
+					currentPage
+				}
+			}),
+			() => {
+				this.getBookList()
+			}
+		)
+	}
+	onShowSizeChange = (current, numPerPage) => {
+		this.setState(
+			state => ({
+				listQuery: {
+					...state.listQuery,
+					currentPage: 1,
+					numPerPage
+				}
+			}),
+			() => {
+				this.getBookList()
+			}
+		)
+	}
+	componentDidMount() {
+		this.getBookList()
+	}
+	render() {
+		return (
+			<div>
+				<Table dataSource={this.state.list} pagination={false} loading={this.state.loading} rowKey={(record: any) => record.id}>
+					<Column title="Author" dataIndex="author" key="author" />
+					<Column title="BookName" dataIndex="merchName" key="merchName" />
+					<Column title="Type" dataIndex="merchTypeName" key="merchTypeName" />
+					<Column
+						title="Action"
+						key="action"
+						render={(_: any, record) => (
+							<Space size="middle">
+								<a>Edit</a>
+								<a>Delete</a>
+							</Space>
+						)}
+					/>
+				</Table>
+				<Pagination
+					className="pagination"
+					defaultCurrent={this.state.listQuery.currentPage}
+					total={this.state.totalCount}
+					pageSize={this.state.listQuery.numPerPage}
+					onShowSizeChange={this.onShowSizeChange}
+					pageSizeOptions={["10", "20", "50", "100"]}
+					onChange={this.onChange}
+					showSizeChanger
+					showQuickJumper
+					hideOnSinglePage={true}
+				/>
+			</div>
+		)
+	}
+}
+
 export default App