用户相关的页面还剩下两个，这节我们来写一下：
首先是修改密码的页面，把注册页面的表单拿过来改改就行：
import { Button, Form, Input, message } from 'antd';
import { useForm } from 'antd/es/form/Form';
import './update_password.css';
import { useCallback } from 'react';
import { Link, useNavigate } from 'react-router-dom';
export interface UpdatePassword {
email: string;
captcha: string;
password: string;
confirmPassword: string;
}
const layout1 = {
labelCol: { span: 6 },
wrapperCol: { span: 18 }
}
const layout2 = {
labelCol: { span: 0 },
wrapperCol: { span: 24 }
}
export function UpdatePassword() {
const [form] = useForm();
const navigate = useNavigate();
const onFinish = useCallback(async (values: UpdatePassword) => {
console.log(values);
}, []);
const sendCaptcha = useCallback(async function () {
console.log('send captcha')
}, []);
return <div id="updatePassword-container">
<h1>会议室预订系统</h1>
<Form
form={form}
{...layout1}
onFinish={onFinish}
colon={false}
autoComplete="off"
>
<Form.Item
label="邮箱"
name="email"
rules={[
{ required: true, message: '请输入邮箱!' },
{ type: "email", message: '请输入合法邮箱地址!'}
]}
>
<Input />
</Form.Item>
<div className='captcha-wrapper'>
<Form.Item
label="验证码"
name="captcha"
rules={[{ required: true, message: '请输入验证码!' }]}
>
<Input />
</Form.Item>
<Button type="primary" onClick={sendCaptcha}>发送验证码</Button>
</div>
<Form.Item
label="密码"
name="password"
rules={[{ required: true, message: '请输入密码!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item
label="确认密码"
name="confirmPassword"
rules={[{ required: true, message: '请输入确认密码!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item
{...layout1}
label=" "
>
<Button className='btn' type="primary" htmlType="submit">
修改
</Button>
</Form.Item>
</Form>
</div>
}css 部分如下：
#updatePassword-container {
width: 400px;
margin: 100px auto 0 auto;
text-align: center;
}
#updatePassword-container .btn {
width: 100%;
}
#updatePassword-container .captcha-wrapper {
display: flex;
justify-content: flex-end;
}跑起来是这样的：
然后再调用下后端接口。
这时我发现一个问题：
之前写的 update_password 接口需要登录，然后用 @UserInfo 从 reqeust.user 取 userId。
但其实这个页面是从这里点进来的：
这时候并没有登录，只是通过邮箱验证身份，然后修改密码。
但是邮箱我们并没有添加唯一约束，只有 username 是在注册的时候做了唯一检查：
所以需要通过 username 来找到修改密码的用户。
可以改成前端传 username，然后后端验证过邮箱验证码之后，再根据 username 查询摇改密码的用户。
此外，我们在 User 的 entity 这里给 username 添加唯一约束：
然后可以看到 typeorm 确实给 username 添加了唯一索引：
在 mysql workbench 里也可以看到：
然后修改下 update_password 接口：
把 @RequireLogin、@ApiBearAuth 还有 @UsrInfo 去掉。
修改 UpdatePasswordDto，添加 username 属性：
@IsNotEmpty({
message: '用户名不能为空'
})
@ApiProperty()
username: string;然后改下 UserService 的 updatePassword 方法：
改成根据 username 查询用户，并且还要验证下邮箱是否正确。
const foundUser = await this.userRepository.findOneBy({
username: passwordDto.username
});
if(foundUser.email !== passwordDto.email) {
throw new HttpException('邮箱不正确', HttpStatus.BAD_REQUEST);
}还有，发送验证码接口的 @RequireLogin 和 @ApiBearerAuth 也要去掉：
测试下：
请求 /user/update_password/captcha 接口发送验证码：
然后请求 /user/update_password 接口：
提示修改密码成功。
我们在页面登录下试试：
用最新密码登录，提示登录成功。
postman 里跑通流程之后，我们在页面里加一下。
在更改密码页面加上 username 表单项：
<Form.Item
label="用户名"
name="username"
rules={[
{ required: true, message: '请输入用户名!' },
]}
>
<Input />
</Form.Item>类型中也加上 username：
然后在 interfaces.ts 添加这两个接口：
export async function updatePasswordCaptcha(email: string) {
return await axiosInstance.get('/user/update_password/captcha', {
params: {
address: email
}
});
}
export async function updatePassword(data: UpdatePassword) {
return await axiosInstance.post('/user/update_password', data);
}更改密码页面里调用下：
const sendCaptcha = useCallback(async function () {
const address = form.getFieldValue('email');
if(!address) {
return message.error('请输入邮箱地址');
}
const res = await updatePasswordCaptcha(address);
if(res.status === 201 || res.status === 200) {
message.success(res.data.data);
} else {
message.error('系统繁忙，请稍后再试');
}
}, []);发送验证码接口的调用逻辑和注册时一模一样。
更改密码接口的调用逻辑也和注册差不多：
const onFinish = useCallback(async (values: UpdatePassword) => {
if(values.password !== values.confirmPassword) {
return message.error('两次密码不一致');
}
const res = await updatePassword(values);
const { message: msg, data} = res.data;
if(res.status === 201 || res.status === 200) {
message.success('密码修改成功');
setTimeout(() => {
navigate('/login');
}, 1500);
} else {
message.error(data || '系统繁忙，请稍后再试');
}
}, []);测试下：
填入邮箱，点击发送验证码。
提示发送成功。
邮箱里也收到了这个验证码。
然后填入新密码，点击修改密码按钮：
提示修改成功，然后会跳到登录页面：
在登录页面用新密码登录，提示登录成功。
这样，修改密码功能的前后端就都完成了。
然后还有一个更改个人信息的页面。
这个页面有所不同。
前面几个功能都是未登录时的，而这个修改个人信息的功能需要登录之后才能用。
而且界面上方是有公共的导航栏的。
所以这个页面要声明一个 /index 的路由作为父级路由，然后 /index/update_info 作为子路由。
添加一个 index/index.tsx 页面
import { UserOutlined } from "@ant-design/icons";
import { Outlet } from "react-router-dom";
import './index.css';
export function Index() {
return <div id="index-container">
<div className="header">
<h1>会议室预定系统</h1>
<UserOutlined className="icon"/>
</div>
<div className="body">
<Outlet></Outlet>
</div>
</div>
}这里用到了 antd 的 icon 组件，需要安装用到的包：
npm install @ant-design/icons --savecss 如下：
#index-container{
height: 100vh;
display: flex;
flex-direction: column;
}
#index-container .header{
height: 80px;
border-bottom: 1px solid #aaa;
line-height: 80px;
display: flex;
justify-content: space-between;
padding: 0 20px;
}
#index-container h1{
margin: 0;
}
#index-container .icon {
font-size: 40px;
margin-top: 20px;
}
#index-container .body{
flex: 1;
}整体是竖直的 flex 布局，高度 100vh，上面 80px 下面 flex:1
然后 header 部分是 水平的 flex 布局。
把它添加到 /index 的路由，并且添加两个子路由：
{
path: "/",
element: <Index></Index>,
errorElement: <ErrorPage />,
children: [
{
path: 'aaa',
element: <div>aaa</div>
},
{
path: 'bbb',
element: <div>bbb</div>
}
]
},测试下：
没啥问题。
然后在下面添加 update_info 路由，并实现 page/update_info/UpdateInfo 组件：
import { Button, Form, Input, message } from 'antd';
import { useForm } from 'antd/es/form/Form';
import { useCallback } from 'react';
import './update_info.css';
import { useNavigate } from 'react-router-dom';
export interface UserInfo {
headPic: string;
nickName: string;
email: string;
captcha: string;
}
const layout1 = {
labelCol: { span: 6 },
wrapperCol: { span: 18 }
}
export function UpdateInfo() {
const [form] = useForm();
const navigate = useNavigate();
const onFinish = useCallback(async (values: UserInfo) => {
}, []);
const sendCaptcha = useCallback(async function () {
}, []);
return <div id="updateInfo-container">
<Form
form={form}
{...layout1}
onFinish={onFinish}
colon={false}
autoComplete="off"
>
<Form.Item
label="头像"
name="headPic"
rules={[
{ required: true, message: '请输入头像!' },
]}
>
<Input/>
</Form.Item>
<Form.Item
label="昵称"
name="nickName"
rules={[
{ required: true, message: '请输入昵称!' },
]}
>
<Input />
</Form.Item>
<Form.Item
label="邮箱"
name="email"
rules={[
{ required: true, message: '请输入邮箱!' },
{ type: "email", message: '请输入合法邮箱地址!'}
]}
>
<Input />
</Form.Item>
<div className='captcha-wrapper'>
<Form.Item
label="验证码"
name="captcha"
rules={[{ required: true, message: '请输入验证码!' }]}
>
<Input />
</Form.Item>
<Button type="primary" onClick={sendCaptcha}>发送验证码</Button>
</div>
<Form.Item
{...layout1}
label=" "
>
<Button className='btn' type="primary" htmlType="submit">
修改密码
</Button>
</Form.Item>
</Form>
</div>
}和前几个页面差不多。
css：
#updateInfo-container {
width: 400px;
margin: 50px auto 0 auto;
text-align: center;
}
#updateInfo-container .btn {
width: 100%;
}
#updateInfo-container .captcha-wrapper {
display: flex;
justify-content: flex-end;
}访问 /update_info 可以看到这个页面：
这个页面涉及到 3 个接口：
/user/info 查询用户信息的接口，用来回显数据
/user/update 修改用户信息的接口，用来做修改
/user/update/captcha 发送验证码的接口
我们看下 swagger 接口文档：
/user/info 接口没有参数，但是需要登录：
/user/update 接口需要在 body 传这么几个参数：
/user/update/captcha 需要传一个邮箱地址：
不知道有没有同学发现这里有点不太合理：
邮箱是用户自己传的，那如果传的不是注册用的邮箱呢？
前面发送验证码需要传邮箱地址，是因为那是注册或者修改密码用，没有登录。
而现在已经登录了，就不应该再传邮箱地址了，应该是放在 jwt 里，然后在 LoginGuard 里取出来注入 controller。
我们改一下：
改一下这个 login 接口，在 jwt 里放 email 的信息：
同时 refresh 接口也要改下放在 jwt 里的信息：
这里要取 user.email，需要在 UserService 的 findUserById 方法里返回下 email：
然后在 LoginGuard 里从 jwt 里取出 email 来：
然后在 /user/update/captcha 就可以直接从 request.user 里拿 email 信息了：
把参数的标注去掉，其余的都不用变，这样就是从 jwt 里取登录用户的 email 来发邮件了。
我们测试下：
先登录：
然后用这个 accessToken 访问下发送验证码接口：
发送成功，收到了这个验证码：
然后调用下查询用户信息的接口：
之后调用修改接口：
在数据库里看下，用户信息已经改过来了：
postman 里接口的流程跑通之后，我们在页面调用下。
首先在 interfaces.ts 里添加这 3 个接口：
export async function getUserInfo() {
return await axiosInstance.get('/user/info');
}
export async function updateInfo(data: UserInfo) {
return await axiosInstance.post('/user/update', data);
}
export async function updateUserInfoCaptcha() {
return await axiosInstance.get('/user/update/captcha');
}然后我们先做用户信息的回显：
useEffect(() => {
async function query() {
const res = await getUserInfo();
const { data } = res.data;
if(res.status === 201 || res.status === 200) {
console.log(data);
}
}
query();
}, []);调用 getUserInfo 接口，返回数据后打印下。
这个接口的访问需要登录，也就是要从 localStorage 里取出 accessToken 放到 header 里。
这种携带 header 的通用逻辑可以放在 axios 的 interceptor 里做。
并且还有 token 过期之后调用 refresh 刷新 token 的逻辑。
这个我们前面写过，直接拿过来放在 interfaces.ts 里：
import { message } from "antd";
const axiosInstance = axios.create({
baseURL: 'http://localhost:3005/',
timeout: 3000
});
axiosInstance.interceptors.request.use(function (config) {
const accessToken = localStorage.getItem('access_token');
if(accessToken) {
config.headers.authorization = 'Bearer ' + accessToken;
}
return config;
})
interface PendingTask {
config: AxiosRequestConfig
resolve: Function
}
let refreshing = false;
const queue: PendingTask[] = [];
axiosInstance.interceptors.response.use(
(response) => {
return response;
},
async (error) => {
if(!error.response) {
return Promise.reject(error);
}
let { data, config } = error.response;
if(refreshing) {
return new Promise((resolve) => {
queue.push({
config,
resolve
});
});
}
if (data.code === 401 && !config.url.includes('/user/refresh')) {
refreshing = true;
const res = await refreshToken();
refreshing = false;
if(res.status === 200) {
queue.forEach(({config, resolve}) => {
resolve(axiosInstance(config))
})
return axiosInstance(config);
} else {
message.error(res.data);
setTimeout(() => {
window.location.href = '/login';
}, 1500);
}
} else {
return error.response;
}
}
)
async function refreshToken() {
const res = await axiosInstance.get('/user/refresh', {
params: {
refresh_token: localStorage.getItem('refresh_token')
}
});
localStorage.setItem('access_token', res.data.access_token || '');
localStorage.setItem('refresh_token', res.data.refresh_token || '');
return res;
}这段逻辑就是在每次发请求之前，在 header 里加上 authorization，带上 access_token。
当响应码是 401 的时候，就刷新 token，刷新失败提示错误信息，然后跳到登录页。
并且通过 refreshing 的标记和 task 队列实现了并发请求只刷新一次。
这部分看不明白的同学建议回头看下 access_token 和 refresh_token 无感刷新那节。
其中，这代码代码可能有同学有疑问：
if(!error.response) {
return Promise.reject(error);
}是为了请求没有发送成功的情况的：
请求没有发送成功时，错误对象没有 response 属性。
接下来，我们先登录下：
给用户图标添加跳到 /update_info 的链接：
然后可以看到控制台打印了当前登录用户的信息：
然后我们做下回显：
form.setFieldValue('headPic', data.headPic);
form.setFieldValue('nickName', data.nickName);
form.setFieldValue('email', data.email);这样，回显的数据就有了：
然后实现发送验证码：
const sendCaptcha = useCallback(async function () {
const res = await updateUserInfoCaptcha();
if(res.status === 201 || res.status === 200) {
message.success(res.data.data);
} else {
message.error('系统繁忙，请稍后再试');
}
}, []);这里不需要填邮箱地址，服务端会从 jwt 里取。
那这里的邮箱也是不应该修改的，给它加个 disabled：
点击发送验证码。
提示发送成功，邮箱里也收到了这个验证码：
接下来就差更新接口了，我们调用下：
const onFinish = useCallback(async (values: UserInfo) => {
const res = await updateInfo(values);
if(res.status === 201 || res.status === 200) {
const { message: msg, data} = res.data;
if(msg === 'success') {
message.success('用户信息更新成功');
} else {
message.error(data);
}
} else {
message.error('系统繁忙，请稍后再试');
}
}, []);测试下：
修改信息，点击发送验证码：
填入验证码，点击修改，提示用户信息更新成功。
去数据库里看一下：
确实修改成功了。
这样，修改用户信息的流程就走完了。
不过现在的头像是直接填的路径，这里应该做成图片的展示，以及图片的上传。
我们需要添加个上传图片的接口：
在 UserController 里添加这个 handler：
@Post('upload')
@UseInterceptors(FileInterceptor('file', {
dest: 'uploads'
}))
uploadFile(@UploadedFile() file: Express.Multer.File) {
console.log('file', file);
return file.path;
}安装用到的类型包：
npm install @types/multer在 postman 里测试下：
选择 form-data 类型，然后添加 file 字段，选择一个文件：
返回了服务端保存路径，并且打印了文件信息：
我们限制下只能上传图片：
import * as path from 'path';@Post('upload')
@UseInterceptors(FileInterceptor('file', {
dest: 'uploads',
fileFilter(req, file, callback) {
const extname = path.extname(file.originalname);
if(['.png', '.jpg', '.gif'].includes(extname)) {
callback(null, true);
} else {
callback(new BadRequestException('只能上传图片'), false);
}
}
}))
uploadFile(@UploadedFile() file: Express.Multer.File) {
console.log('file', file);
return file.path;
}callback 的第一个参数是 error，第二个参数是是否接收文件。
然后我们上传一个非图片文件试一下：
返回了错误信息。
上传图片是正常的：
然后限制下图片大小，最大 3M:
limits: {
fileSize: 1024 * 1024 * 3
}当你上传超过 3M 的图片时，会提示错误：
然后我们改下保存的文件名，这需要自定义 storage。
前面讲 multer 文件上传那节讲过，直接拿过来（忘了的同学可以回头看一下）：
添加 src/my-file-storage.ts
import * as multer from "multer";
import * as fs from 'fs';
const storage = multer.diskStorage({
destination: function (req, file, cb) {
try {
fs.mkdirSync('uploads');
}catch(e) {}
cb(null, 'uploads')
},
filename: function (req, file, cb) {
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9) + '-' + file.originalname
cb(null, uniqueSuffix)
}
});
export { storage };这个就是自己指定怎么存储，multer.distkStorage 是磁盘存储，通过 destination、filename 的参数分别指定保存的目录和文件名。
指定 storage：
然后测试下：
这样路径就能看出来是什么文件了。
我们把这个目录设置为静态文件目录，这样能直接访问上传的图片。
在 main.ts 里添加 uploads 目录为静态目录：
app.useStaticAssets('uploads', {
prefix: '/uploads'
});指定通过 /uploads 的前缀访问。
然后我们把路径复制，在浏览器访问下：
这样就可以访问到上传的文件了。
也就是说，上传头像之后，可以直接拿到图片的 url。
我们在页面里加一下：
在 src/page/update_info 下增加一个 HeadPicUpload.tsx
import { Button, Input } from "antd";
interface HeadPicUploadProps {
value?: string;
onChange?: Function
}
export function HeadPicUpload(props: HeadPicUploadProps) {
return props?.value ? <div>
{props.value}
<Button>上传</Button>
</div>: <div>
<Button>上传</Button>
</div>
}在上传头像的地方引入下：
为什么是 value 和 onChange 两个参数呢？
因为 antd 的 Form.Item 在渲染时会给子组件传这两个参数。
现在渲染出来的是这样的：
我们在 postman 里上传个图片，比如这个：
拿到它的路径：
然后手动去数据库里改一下：
点击 apply。
刷新下页面，可以看到确实变了：
然后把它改成图片：
<img src={'http://localhost:3005/' + props.value} alt="头像" width="100" height="100"/>头像就显示出来了： 
然后我们把后面的上传按钮改为 antd 的拖拽上传组件：
import { InboxOutlined } from "@ant-design/icons";
import { Button, Input, message } from "antd";
import Dragger, { DraggerProps } from "antd/es/upload/Dragger";
interface HeadPicUploadProps {
value?: string;
onChange?: Function
}
const props: DraggerProps = {
name: 'file',
action: 'http://localhost:3005/user/upload',
onChange(info) {
const { status } = info.file;
if (status === 'done') {
console.log(info.file.response);
message.success(`${info.file.name} 文件上传成功`);
} else if (status === 'error') {
message.error(`${info.file.name} 文件上传失败`);
}
}
};
const dragger = <Dragger {...props}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">点击或拖拽文件到这个区域来上传</p>
</Dragger>
export function HeadPicUpload(props: HeadPicUploadProps) {
return props?.value ? <div>
<img src={'http://localhost:3005/' + props.value} alt="头像" width="100" height="100"/>
{dragger}
</div>: <div>
{dragger}
</div>
}测试下，提示上传成功：
控制台打印了文件路径：
服务端也确实有了这个文件：
我们浏览器访问下：
能够正常访问。
接下来就通过 onChange 回调传给 Form 就好了。
这样表单的值就会改，触发重新渲染，就可以看到新的头像：
不过现在还没更新到数据库。
点击发送验证码：
填入验证码，点击修改：
提示更新成功。
数据库里确实更新了：
刷新下页面，可以看到依然是这个头像：
代表修改成功了。
至此，我们完成了用户信息修改的前后端。
案例代码在小册仓库：
总结
这节我们实现了修改密码和修改个人信息这两个页面。
修改密码页面不需要登录，但我们当时的接口是需要登录的，所以改了一下。
并且给 username 加上了唯一约束，通过 username 来查询用户，然后修改。
修改个人信息页面是登录后的，我们通过 React Router 的路由嵌套写了多级页面。
实现了用户信息的回显和更新的功能。
之后实现了头像上传，上传的目录作为静态文件目录，这样可以直接访问。
这样，用户端的用户相关功能就都完成了。