吐司问卷：用户登陆
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 分为三部分：
- 头部（Header）：
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 - 载荷（Payload）：
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ - 签名（Signature）：
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
JWT 工作流程通常如下：
- 用户登录： 用户提供用户名和密码，后端验证身份。
- 生成 JWT： 登录成功后，后端生成 JWT，包含用户身份信息，并通过密钥签名，确保其不可篡改。
- 返回 JWT： 后端将 JWT 发送给客户端，客户端通常将 JWT 存储在浏览器的 LocalStorage 或 Cookie 中。
- 客户端请求： 客户端在后续请求中将 JWT 作为
Authorization头传递给后端（通常是Authorization: Bearer <token>）。 - 服务器验证 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