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 分为三部分:

  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

jsx 复制代码
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

jsx 复制代码
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

jsx 复制代码
/**
 * @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

jsx 复制代码
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
相关推荐
知了清语7 分钟前
pnpm之monorepo项目, vite版本冲突, 导致vite.config.ts ts警告处理
前端
弗锐土豆29 分钟前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
Hilaku32 分钟前
我为什么放弃了“大厂梦”,去了一家“小公司”?
前端·javascript·面试
1undefined234 分钟前
element中的table改造成虚拟列表(不定高),并封装成hooks
前端·vue.js
浅墨momo38 分钟前
搭建第一个Shopify App
前端·程序员
然我42 分钟前
React 事件机制:从代码到原理,彻底搞懂合成事件的核心逻辑
前端·react.js·面试
Codebee42 分钟前
OneCode 组件服务通用协议栈:构建企业级低代码平台的技术基石
前端·前端框架·开源
Running_C42 分钟前
常见web攻击类型
前端·http
jackyChan42 分钟前
ES6 Proxy 性能问题,你真知道吗?🚨
前端·javascript