React低代码项目：用户登陆

吐司问卷：用户登陆

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 ResType
  console.log('resData', resData)
  const { errno, data, msg } = resData
  if (errno !== 0) {
    if (msg) {
      message.error(msg)
    }
    throw new Error(msg || '未知错误')
  }
  return data as any
})

export default instance

export type ResType = {
  errno: number
  data?: ResDataType
  msg?: 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 ResDataType
  return 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 ResDataType
  return data
}

// 登陆用户
export async function loginService(
  username: string,
  password: string
): Promise<ResDataType> {
  // Updated return type
  const url = '/api/user/login'
  const body = {
    username,
    password,
  }
  const data = (await axios.post(url, body)) as ResDataType
  return 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