Nest通关秘籍

外观

这节继续来写修改密码、修改信息页面：

首先是修改密码的页面 src/pages/UpdatePassword：

javascript
import { Button, Form, Input, message } from 'antd';
import { useForm } from 'antd/es/form/Form';
import './index.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 }
}

export function UpdatePassword() {
    const [form] = useForm();
    const navigate = useNavigate();

    const onFinish = async (values: UpdatePassword) => {
        console.log(values);
    }

    const sendCaptcha = 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="username"
                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
                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 部分如下：

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;
}

跑起来是这样的：

然后再调用下后端接口。

在 interfaces 添加这两个接口：

javascript
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);
}

更改密码页面里调用下：

javascript
const sendCaptcha = async function () {
    const address = form.getFieldValue('email');
    if(!address) {
        return message.error('请输入邮箱地址');
    }

    try {
        const res = await updatePasswordCaptcha(address);
        if(res.status === 201 || res.status === 200) {
            message.success('发送成功');
        } 
    } catch(e: any) {
        message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
    }
};

发送验证码接口的调用逻辑和注册时一模一样。

更改密码接口的调用逻辑也和注册差不多：

javascript
const onFinish = async (values: UpdatePassword) => {
    if(values.password !== values.confirmPassword) {
        return message.error('两次密码不一致');
    }
    try {
        const res = await updatePassword(values);

        if(res.status === 201 || res.status === 200) {
            message.success('密码修改成功');
            setTimeout(() => {
                navigate('/login');
            }, 1500);
        }
    } catch(e: any) {
        message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
    }
};

测试下：

填入邮箱，点击发送验证码。

提示发送成功。

邮箱里也收到了这个验证码。

然后填入新密码，点击修改密码按钮：

提示修改成功，然后会跳到登录页面。

在登录页面用新密码登录，提示登录成功。

这样，修改密码功能的前后端就都完成了。

然后还有一个更改个人信息的页面。

前面几个功能都是未登录时的，而这个修改个人信息的功能需要登录之后才能用。

而且界面上方是有公共的导航栏的。

所以这个页面要声明一个 /index 的路由作为父级路由，然后 /index/update_info 作为子路由。

添加一个 pages/index/index.tsx 页面

javascript
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 --save

css 如下：

css
#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 的路由，并且添加两个子路由：

javascript
{
    path: "/",
    element: <Index></Index>,
    children: [
      {
        path: 'aaa',
        element: <div>aaa</div>
      },
      {
        path: 'bbb',
        element: <div>bbb</div>
      }
    ]
},

测试下：

没啥问题。

然后在下面添加 update_info 路由，并实现 page/update_info/UpdateInfo 组件：

javascript
{
    path: 'update_info',
    element: <UpdateInfo/>
}

写下 pages/UpdateInfo/index.tsx 这个组件

javascript
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 = async (values: UserInfo) => {
        
    };

    const sendCaptcha = 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：

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 发送验证码的接口

首先在 interfaces.ts 里添加这 3 个接口：

javascript
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');
}

然后我们先做用户信息的回显：

javascript
useEffect(() => {
    async function query() {
        const res = await getUserInfo();

        if(res.status === 201 || res.status === 200) {
            console.log(res.data);
        }
    }
    query();
}, []);

调用 getUserInfo 接口，返回数据后打印下。

这个接口的访问需要登录，也就是要从 localStorage 里取出 token 放到 header 里。

这种携带 header 的通用逻辑可以放在 axios 的 interceptor 里做。

并且接口返回 token 的 header 更新本地 token 的逻辑。

javascript

const axiosInstance = axios.create({
    baseURL: 'http://localhost:3005/',
    timeout: 3000
});

axiosInstance.interceptors.request.use(function (config) {
    const accessToken = localStorage.getItem('token');

    if(accessToken) {
        config.headers.authorization = 'Bearer ' + accessToken;
    }
    return config;
})

axiosInstance.interceptors.response.use(
    (response) => {
        const newToken = response.headers['token'];
        if(newToken) {
            localStorage.setItem('token', newToken);
        }
        return response;
    }, async (error) => {
        if(!error.response) {
            return Promise.reject(error);
        }
        let { data } = error.response;
        if (data.statusCode === 401) {
            message.error(data.message);

            setTimeout(() => {
                window.location.href = '/login';
            }, 1500);
        } else {
            return Promise.reject(error);
        }
    }
)

这段逻辑就是在每次发请求之前，在 header 里加上 authorization，带上 token。

当响应的 header 带有 token，就更新本地 token。

如果返回的是 401 的状态码，就提示错误，跳转登录页。

访问 /update_info 页面

提示没登录，然后跳转到了登录页。

给用户图标添加跳到 /update_info 的链接：

我们登录下：

再访问就不会 /update_info 跳转了：

然后可以看到控制台打印了当前登录用户的信息：

然后我们做下回显：

javascript
useEffect(() => {
    async function query() {
        const res = await getUserInfo();

        if(res.status === 201 || res.status === 200) {
            console.log(res.data);

            form.setFieldValue('headPic', res.data.headPic);
            form.setFieldValue('nickName', res.data.nickName);
            form.setFieldValue('email', res.data.email);
            form.setFieldValue('username', res.data.username);
        }
    }
    query();
}, []);

这样，回显的数据就有了：

然后实现发送验证码：

javascript
const sendCaptcha = async function () {
    try {
        const res = await updateUserInfoCaptcha();
        if(res.status === 201 || res.status === 200) {
            message.success('发送成功');
        } 
    } catch(e: any) {
        message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
    }
};

然后是更新接口：

javascript
const onFinish = async (values: UserInfo) => {
    try {
        const res = await updateInfo(values);
        if(res.status === 201 || res.status === 200) {
            message.success('用户信息更新成功');
        }
    } catch(e: any) {
        message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
    }
};

测试下：

修改信息，点击发送验证码：

填入验证码，点击修改，提示用户信息更新成功。

去数据库里看一下：

确实修改成功了。

这样，修改用户信息的流程就走完了。

案例代码在小册仓库：

前端代码

后端代码

总结 ​

这节我们实现了修改密码、修改个人信息这两个页面。

添加了 axios 的拦截器来实现 token 自动携带和刷新 token，并且在接口返回 401 的时候跳转登录页。

这样，用户端的用户相关功能就都完成了。