吐司问卷：用户登陆

Date: February 17, 2025 4:12 PM (GMT+8)

---

JWT

**概念：**登陆成功后，服务端返回一个 token

JWT组成：

JWT 由三个部分组成：头部（Header）、载荷（Payload） 和 签名（Signature）。它们通过点（.）连接，格式如下：

header.payload.signature

示例：

假设用户登录成功，后端生成了一个 JWT，格式如下：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

这个 JWT 分为三部分：

1. 头部（Header）：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
2. 载荷（Payload）：eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ
3. 签名（Signature）：SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

JWT 工作流程通常如下：

1. 用户登录： 用户提供用户名和密码，后端验证身份。
2. 生成 JWT： 登录成功后，后端生成 JWT，包含用户身份信息，并通过密钥签名，确保其不可篡改。
3. 返回 JWT： 后端将 JWT 发送给客户端，客户端通常将 JWT 存储在浏览器的 LocalStorage 或 Cookie 中。
4. 客户端请求： 客户端在后续请求中将 JWT 作为 Authorization 头传递给后端（通常是 Authorization: Bearer <token>）。
5. 服务器验证 JWT： 服务器根据 JWT 中的签名和密钥验证 JWT 的合法性，如果合法，则执行相应的操作，否则返回错误信息。

---

---

---

开发用户的 mock 和 service

思路：

• 封装 axios 请求拦截器：增加用户token
• 设计 用户注册登陆接口
• 设计 工具函数 user-token：用于管理用户 token
• 设计 问卷页面 的当前用户显示与退出功能

封装 axios 请求拦截器：增加用户token

ajax.ts

import axios from 'axios'
import { message } from 'antd'
import { getToken } from '../utils/user-token'const instance = axios.create({timeout: 10000,
})instance.interceptors.request.use(config => {const token = getToken()if (token) {config.headers['Authorization'] = `Bearer ${token}`}return config},error => {return Promise.reject(error)}
)instance.interceptors.response.use(res => {const resData = (res.data || {}) as ResTypeconsole.log('resData', resData)const { errno, data, msg } = resDataif (errno !== 0) {if (msg) {message.error(msg)}throw new Error(msg || '未知错误')}return data as any
})export default instanceexport type ResType = {errno: numberdata?: ResDataTypemsg?: string
}// key表示字段名，any表示字段值的类型
export type ResDataType = {[key: string]: any
}

设计 用户注册登陆接口：

user.ts

import axios, { ResDataType } from './ajax'// 获取用户信息
export async function getUserInfoService(): Promise<ResDataType> {const url = '/api/user/info'const data = (await axios.get(url)) as ResDataTypereturn data
}// 注册用户
export async function registerService(username: string,password: string,nickname?: string
): Promise<ResDataType> {const url = '/api/user/register'const body = {username,password,nickname: nickname || username,}const data = (await axios.post(url, body)) as ResDataTypereturn data
}// 登陆用户
export async function loginService(username: string,password: string
): Promise<ResDataType> {// Updated return typeconst url = '/api/user/login'const body = {username,password,}const data = (await axios.post(url, body)) as ResDataTypereturn data
}

设计工具函数 user-token：用于管理用户 token：

user-token.ts

/*** @description 管理用户token*/const KEY = 'USER_TOKEN'export function setToken(token: string) {localStorage.setItem(KEY, token)
}export function getToken() {return localStorage.getItem(KEY) || ''
}
export function removeToken() {localStorage.removeItem(KEY)
}

设计 问卷页面 的当前用户显示与退出功能：

userInfo.tsx

import React, { FC } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { LOGIN_PATHNAME } from '../router'
import { Button, message } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import { getUserInfoService } from '../services/user'
import { removeToken } from '../utils/user-token'
import { useRequest } from 'ahooks'const UserInfo: FC = () => {const nav = useNavigate()const { data } = useRequest(getUserInfoService)const { username, nickname } = data || {}const logout = () => {removeToken()message.success('退出成功')nav(LOGIN_PATHNAME)}const UserInfo = () => {return (<><span style={{ color: '#e8e8e8' }}><UserOutlined />{nickname || username}</span><Button type="link" onClick={logout}>退出</Button></>)}const Login = () => {return (<><Link to={LOGIN_PATHNAME}>登陆</Link></>)}return <div>{username ? <UserInfo /> : <Login />}</div>
}export default UserInfo