0805登录_注册_token_用户信息_退出-网络ajax请求2-react-仿低代码平台项目

于 2025-04-28 10:53:36 发布
阅读量702 收藏 10
点赞数 9
分类专栏： # React 项目实战 文章标签： 网络 ajax react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaogzhen/article/details/147577055
版权

文章目录

1 JWT

JSON Web Token（JWT）是一种开放标准（RFC 7519），用于在各方之间安全传输信息。它通过数字签名确保数据的完整性和可信性，常用于身份验证和授权。以下是JWT的详细介绍：

1.1 JWT结构

JWT由三部分组成，用点（.）分隔：

  • Header（头部）
    包含令牌类型（typ: "JWT"）和签名算法（如alg: HS256）。
    示例：{"alg": "HS256", "typ": "JWT"} → Base64Url编码后形成第一部分。
  • Payload（载荷）
    存放声明（claims），包括预定义声明（如用户ID、过期时间）和自定义数据。
    常见预定义声明：
    • iss（签发者）、exp（过期时间）、sub（主题）、aud（受众）等。
      示例：{"sub": "123", "name": "Alice", "exp": 1516239022} → Base64Url编码后形成第二部分。
  • Signature（签名）
    对前两部分的签名，防止数据篡改。算法由Header指定（如HMAC SHA256）。
    生成方式：HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)。

最终JWT形式：xxxxx.yyyyy.zzzzz。

1.2 工作流程

  1. 用户登录：客户端发送凭证（如用户名/密码）到服务器。
  2. 生成JWT：服务器验证凭证，生成并返回JWT。
  3. 客户端存储：客户端保存JWT（通常存在localStorage或Cookie中）。
  4. 携带令牌请求：客户端在请求头中添加Authorization: Bearer <JWT>。
  5. 服务器验证：服务器检查签名有效性、过期时间等，验证通过后处理请求。

1.3 优点

  • 无状态：无需服务器存储会话信息，适合分布式系统。
  • 跨域支持：适用于API网关、单页应用（SPA）等场景。
  • 灵活性：载荷可自定义扩展，传递非敏感用户信息。

1.4 缺点

  • 不可废止：令牌到期前无法强制失效，需借助黑名单或短过期时间。
  • 存储风险：客户端存储不当可能导致XSS攻击窃取令牌。
  • 信息暴露：载荷仅Base64编码，需避免存放敏感数据。

1.5 安全实践

  • 使用HTTPS：防止令牌在传输中被截获。
  • 强签名算法：如HMAC SHA256或RSA，避免弱算法（如HS256密钥过短）。
  • 合理设置过期时间：缩短令牌有效期，减少泄露风险。
  • 敏感数据加密：必要时使用JWE（JSON Web Encryption）加密载荷。

1.6. 适用场景

  • API认证：RESTful API的无状态身份验证。
  • 单点登录（SSO）：跨多个系统的用户身份共享。
  • 移动端应用：减少频繁查询数据库的开销。

1.7 JWT与OAuth2

  • JWT常用作OAuth2的Bearer Token，传递用户身份和权限。
  • OAuth2定义授权流程，JWT是实现令牌的一种方式。

8. 示例代码（Node.js）

const jwt = require('jsonwebtoken');

// 生成JWT
const token = jwt.sign(
  { userId: 123, role: 'admin' },
  'your-secret-key',
  { expiresIn: '1h' }
);

// 验证JWT
jwt.verify(token, 'your-secret-key', (err, decoded) => {
  if (err) throw err;
  console.log(decoded); // { userId: 123, role: 'admin', iat: ..., exp: ... }
});

通过理解JWT的结构、流程及安全实践，开发者可以有效利用其在现代Web应用中实现安全、高效的身份验证。

2 用户mock和api

用户mock,user.js代码如下所示：

const Mock = require('mockjs')
const Random = Mock.Random


module.exports = [
  {
    // 获取用户
    url: '/api/user/info',
    method: 'get',
    response() {
      return {
        errno: 0,
        data: {
          username: Random.title(),
          nickname: Random.cname(),
        },
      }
    }
  },
  {
    // 注册新用户
    url: '/api/user/register',
    method: 'post',
    response() {
      return {
        errno: 0
      }
    }
  },
  {
    // 用户登录
    url: '/api/user/login',
    method: 'post',
    response() {
      return {
        errno: 0,
        data: {
          token: Random.word(20)
        },
      }
    }
  },
]

前端user.ts 用户api接口代码如下所示：

 import request, { ResDataType } from "../services/request";

/**
 * 获取用户信息
 * @returns  用户信息
 */
export async function getUserInfoApi(): Promise<ResDataType> {
  const url = "/api/user/info";
  const data = (await request.get(url)) as ResDataType;
  return data;
}

/**
 * 注册新用户
 * @returns  注册是否成功
 */
export async function registerApi(
  username: string,
  password: string,
  nickname?: string
): Promise<ResDataType> {
  const url = "/api/user/register";
  const body = { username, password, nickname: nickname || username };
  const data = (await request.post(url, body)) as ResDataType;
  return data;
}

/**
 * 用户登录
 * @returns  token
 */
export async function loginApi(
  username: string,
  password: string
): Promise<ResDataType> {
  const url = "/api/user/login";
  const data = (await request.post(url, { username, password })) as ResDataType;
  return data;
}

3 注册

Register.tsx代码如下所示：

import { FC } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Typography, Space, Form, Input, Button, message } from "antd";
import { UserAddOutlined } from "@ant-design/icons";
import { useRequest } from "ahooks";

import { LOGIN_PATHNAME } from "../router";
import { registerApi } from "@/api/user";

import styles from "./Register.module.scss";

const { Title } = Typography;

const Register: FC = () => {
  const nav = useNavigate();

  const { run: handleRegister } = useRequest(
    async (values) => {
      const { username, password, nickname } = values;
      return await registerApi(username, password, nickname);
    },
    {
      manual: true,
      onSuccess() {
        message.success("注册成功");
        // 跳转登录页
        nav(LOGIN_PATHNAME);
      },
    }
  );

  function onFinish(values: any) {
    handleRegister(values);
  }

  return (
    <div className={styles.container}>
      <div>
        <Space>
          <Title level={2}>
            <UserAddOutlined />
          </Title>
          <Title level={2}>注册新用户</Title>
        </Space>
      </div>
      <div>
        <Form
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              { required: true, message: "请输入用户名" },
              {
                type: "string",
                min: 5,
                max: 20,
                message: "字符长度再5-20之间",
              },
              {
                pattern: /^\w+$/,
                message: "只能是字母数字下划线",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[
              { required: true, message: "请输入用户名" },
              {
                min: 8,
                message: "密码长度最少8位",
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="确认密码"
            name="confirm"
            dependencies={["password"]}
            rules={[
              {
                required: true,
                message: "请输入确认密码",
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue("password") === value) {
                    return Promise.resolve();
                  } else {
                    return Promise.reject(new Error("两次密码不一致"));
                  }
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item label="昵称" name="nickname">
            <Input />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                注册
              </Button>
              <Link to={LOGIN_PATHNAME}>已有账户，登录</Link>
            </Space>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};
export default Register;

执行注册，成功挑战登录页，如下图所示：在这里插入图片描述

4 登录

登录页Login.tsx代码如下所示：

import { FC, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Typography, Space, Form, Input, Button, Checkbox, message } from "antd";
import { UserAddOutlined } from "@ant-design/icons";
import { useRequest } from "ahooks";

import { MANAGE_INDEX_PATHNAME, REGISTER_PATHNAME } from "../router";
import { loginApi } from "@/api/user";

import styles from "./Register.module.scss";

const { Title } = Typography;

const USERNAME_KEY = "username";
const PASSWORD_KEY = "password";

/**
 * 浏览器本地存储用户信息
 * @param username 用户名
 * @param password 密码
 */
function rememberUser(username: string, password: string) {
  localStorage.setItem(USERNAME_KEY, username);
  localStorage.setItem(PASSWORD_KEY, password);
}

/**
 * 浏览器本地删除用户信息
 * @param username 用户名
 * @param password 密码
 */
function deleteUserFromStorage(username: string, password: string) {
  localStorage.removeItem(USERNAME_KEY);
  localStorage.removeItem(PASSWORD_KEY);
}

/**
 * 浏览器本地获取用户信息
 */
function getUserInfoFromStorage() {
  return {
    username: localStorage.getItem(USERNAME_KEY),
    password: localStorage.getItem(PASSWORD_KEY),
  };
}

const Login: FC = () => {
  const nav = useNavigate()

  // 表单组件初始化
  const [form] = Form.useForm();
  useEffect(() => {
    const { username, password } = getUserInfoFromStorage();
    form.setFieldsValue({ username, password });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const { run: handleLogin } = useRequest(
    async (values) => {
      const { username, password } = values;
      return await loginApi(username, password);
    },
    {
      manual: true,
      onSuccess(res) {
        message.success("登录成功")
        // todo 存储token
        // 跳转我的问卷
        nav(MANAGE_INDEX_PATHNAME)
      },
    }
  );

  function onFinish(values: any) {

    const { username, password, remember } = values || {};
    if (remember) {
      rememberUser(username, password);
    } else {
      deleteUserFromStorage(username, password);
    }
    handleLogin({ username, password });
  }

  return (
    <div className={styles.container}>
      <div>
        <Space>
          <Title level={2}>
            <UserAddOutlined />
          </Title>
          <Title level={2}>用户登录</Title>
        </Space>
      </div>
      <div>
        <Form
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
          initialValues={{ remember: true }}
          form={form}
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              { required: true, message: "请输入用户名" },
              {
                type: "string",
                min: 5,
                max: 20,
                message: "字符长度再5-20之间",
              },
              {
                pattern: /^\w+$/,
                message: "只能是字母数字下划线",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[
              { required: true, message: "请输入用户名" },
              {
                min: 8,
                message: "密码长度最少8位",
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            wrapperCol={{ offset: 6, span: 16 }}
            name="remember"
            valuePropName="checked"
          >
            <Checkbox>记住我</Checkbox>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                登录
              </Button>
              <Link to={REGISTER_PATHNAME}>注册新用户</Link>
            </Space>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};
export default Login;

登录成功后跳转我的问卷也，如下图所示：在这里插入图片描述

5 token存储

用户登录成功后，需要存储token，userToken.ts代码如下所示

/**
 * @description localStorage管理用户token
 * @author gaogzhen
 */

const KEY = "USER-TOKEN"

/**
 * 设置token
 * @param token 
 */
export function setToken(token:string) {
  localStorage.setItem(KEY, token)  
}

/**
 * 获取token
 * @returns token
 */
export function getToken() {
  return localStorage.getItem(KEY) || ''
}


/**
 * 删除token
 */
export function removeToken() {
  localStorage.removeItem(KEY)
}

登录页登录成功后，执行存储token，Login.tsx代码如下：

  const { run: handleLogin } = useRequest(
    async (values) => {
      const { username, password } = values;
      return await loginApi(username, password);
    },
    {
      manual: true,
      onSuccess(res) {
        message.success("登录成功");
        // 存储token
        const { token = "" } = res;
        setToken(token);
        // 跳转我的问卷
        nav(MANAGE_INDEX_PATHNAME);
      },
    }
  );

localStorage存储如下图哦所示：在这里插入图片描述

6 请求拦截器设置token

登录成功后，用户每次请求需要携带token，用户身份验证、权限验证等。这里通过请求拦截器实现，request.ts代码如下所示：

import axios from "axios";
import { message } from "antd";
import { AUTHORIZATION } from "@/constant";
import { getToken } from "@/utils/userToken";

const request = axios.create({
  timeout: 5000,
});

// request拦截：每次请求携带token
request.interceptors.request.use((config) => {
  // todo token 校验
  config.headers[AUTHORIZATION] = `Bearer ${getToken()}`;
  return config;
});

// response 拦截：统一处理errno和msg
request.interceptors.response.use((res) => {
  const resData = (res.data || {}) as ResType;
  const { errno, data, msg } = resData;

  if (errno !== 0) {
    // 错误提示
    if (msg) {
      message.error(msg);
    }
    throw new Error(msg);
  }

  return data as any;
});
export default request;

export type ResDataType = {
  [key: string]: any;
};

export type ResType = {
  errno: number;
  data?: ResDataType;
  msg?: string;
};

效果如下图所示：

在这里插入图片描述

6 获取用户信息

用户登录之后，用户信息很多地方需要使用，在学习状态管理之后再处理，这里我们暂时在用户信息组件处理。

用户信息UserInfo.tsx代码如下所示：

import { FC } from "react";
import { Link } from "react-router-dom";
import { LOGIN_PATHNAME } from "../router/index";
import { useRequest } from "ahooks";
import { getUserInfoApi } from "@/api/user";
import { UserOutlined } from "@ant-design/icons";
import { Button } from "antd";

const UserInfo: FC = () => {
  const { data } = useRequest(getUserInfoApi);
  const { username, nickname } = data || {};

  const User = (
    <>
      <span style={{ color: "#e8e8e8" }}>
        <UserOutlined />
        {nickname}
      </span>
      <Button type="link">退出</Button>
    </>
  );

  const Login = <Link to={LOGIN_PATHNAME}>登录</Link>;
  return <>{username ? User : Login}</>;
};
export default UserInfo;

效果如下图所示：

在这里插入图片描述

7 退出登录

UserInfo.tsx退出功能代码如下所示：

import { FC } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useRequest } from "ahooks";
import { Button } from "antd";
import { UserOutlined } from "@ant-design/icons";

import { LOGIN_PATHNAME } from "../router/index";
import { getUserInfoApi } from "@/api/user";
import { removeToken } from "@/utils/userToken";

const UserInfo: FC = () => {

  const nav = useNavigate()

  const { data } = useRequest(getUserInfoApi);
  const { username, nickname } = data || {};

  function logout() {
    removeToken()
    // 跳转登录页
    nav(LOGIN_PATHNAME)
  }

  const User = (
    <>
      <span style={{ color: "#e8e8e8" }}>
        <UserOutlined />
        {nickname}
      </span>
      <Button type="link" onClick={logout}>退出</Button>
    </>
  );

  const Login = <Link to={LOGIN_PATHNAME}>登录</Link>;
  return <>{username ? User : Login}</>;
};
export default UserInfo;

注：

  • 执行退出，但是右上角还是显示登录状态，后面处理

结语

❓QQ:806797785

⭐️仓库地址：https://gitee.com/gaogzhen

⭐️仓库地址：https://github.com/gaogzhen

[1]ahook官网[CP/OL].

[2]mock文档[CP/OL].

[3]Ant Design官网[CP/OL].

前端实战｜React18项目启动——pc端极客园项目前置准备
Coding and studying
08-24 2万+
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架。
react + zarm + rc-form + crypto-js 实现个人中心页面，头像上传，密码重置，登录退出功能
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
05-17 830
需要实现的大致效果 这里大致需要实现4个页面，一个个人中心的主页面，另外还有3个子页面，用户信息修改页，重置密码页，关于我们页。这里关于我们页，就不写了。重点实现一下用户信息修改以及重置密码页面功能。下面样式部分的代码就不粘贴了，有需要的参考我这篇，里面有我学习的项目地址：https://kaimo313.blog.csdn.net/article/details/122586455 实现过程 1.联调问题以及路由添加 一个问题是上传的时候有问题，该问题由Lweilve提出https://blog.csd
react-极客园pc项目
JayChouyyds589的博客
06-15 1003
黑马程序员的笔记整合
【React-admin】构建React应用（12）- 基于React-admin框架实现打开新TAB页面共享登陆状态
chenqk_123的专栏
04-19 1622
在使用React-admin框架的时候，碰到这样一个需求，也不能说是需求吧，应该是产品的共性。问题是：当我登陆之后，打开新的标签页TAB（通常是在登陆的主页面上，有些模块会在列表中加上链接，按下Ctrl和鼠标左键，会打开一个新的TAB页面），那么在新页面中应该能和上一个登陆之后的页面共享登陆状态。 但是在React-admin默认使用的是sessionstorage来保存保存登陆的数据，如下是React-admin框架自带的设置登陆用户的方法： /** * 设置当前用户信息 * @param login
【React】Day6-9 极客项目
weixin_63681863的博客
04-22 632
CRA是一个底层基于webpack快速创建React项目的脚手架工具。
React--》从零开始搭建一个文章后台管理系统
ztK63LrD的博客
03-27 6281
本项目讲解的是一个简单的文章后台管理系统，系统的功能很简单，看完本篇文章你将了解学习到的知识有很多，而且博主也将源码开源出来，希望可以帮助大家。
React - Geek-PC项目 文档
NOfighting的博客
06-11 857
一款后台管理项目 - React-geek-PC 项目介绍 ● 项目功能演示 - 登录、退出 - 首页 - 内容（文章）管理：文章列表、发布文章、修改文章 ● 技术 - React 官方脚手架 create-react-app - react hooks - 状态管理：mobx - UI 组件库：antd v4 - ajax 请求库：axios - 路由：react-router-dom 以及 history - 富文本编辑器：react-quill - CSS 预编译器：sass
吐司问卷（React低代码）：用户登陆模块实现
CaptainDrake的博客
03-19 1018
JWT、登陆注册流程设计
vue通用后台管理系统（保姆级）--持续更新中_vue管理后台
2401_84446882的博客
04-27 2043
路由出口路由匹配到的组件将渲染在这里。
React项目全球新闻发布管理系统 - 新版问题解决方式整理及部署网站至 Netlify
.
11-28 5971
整理了一下新版的变化以及遇到的坑的解决办法。 千锋前端-React全家桶_React项目全球新闻发布管理系统 https://www.bilibili.com/video/BV1fw411d7R5
mapstruct常见错误及解决方案
gaogzhen的博客
12-01 6118
mapstruct常见错误及解决方案
springboot2.x集成Jetcache遇到的各种问题
gaogzhen的博客
02-15 3079
文章目录1、常规排查2、具体报错分析 相关依赖 依赖 版本 springboot 2.2.3.RELEASE jetcache-starter-redis 2.6.2 jetcache-anno 2.6.2 1、常规排查 检查依赖是否导入 <dependency> <groupId>com.alicp.jetcache</groupId> <artifactId>jetcache-starter-redis&lt
初始化-前端后台管理-Saas多租户平台开发
gaogzhen的博客
11-25 1754
初始化-前端后台管理-Saas多租户平台开发 目录 文章目录1、框架选择2、初步简介及改造计划2.1、项目启动2.2、关注模块2.3、异步组件2.4、路由2.5、api2.6、store2.7、权限控制2.8、登录3、后续***后记*** ： 内容 1、框架选择 目前我们做的是前端后台管理模块，很适合做SPA应用，选择vue+element-ui。在github上找了个不错的集成框架，vue-element-admin,下面给出github地址，关于详细介绍自己去查看。 github地址：htt
0201sherlock(福尔摩斯)-通过名称寻找媒体账号(地址)-github-开源项目学习
gaogzhen的博客
02-29 1273
0201sherlock(福尔摩斯)-通过名称寻找媒体账号(地址)-github-开源项目学习
公司管理-Saas多租户平台开发
gaogzhen的博客
12-01 1271
公司管理-Saas多租户平台开发 目录 文章目录1、表1.1、序言1.2、规范1.3、公司表sql1.4、地区表1.5、行业表2、接口文档2.1、公司管理接口3、后端接口3.1、mybatis-plus4、前端页面4.1、新增内容4.2、页面详情4.2.1、公司列表页***后记*** ： 内容 前面我们已经把前后端项目搭建完毕，下面讲解功能模块-公司管理。 1、表 1.1、序言 数据库：MySQL8.0.12 新建数据库：ihrm 公用表命名：前缀+表名 功能模块表命名规则：前缀+模块+表名 统
swagger文档生成与查看-业务模块-Saas多租户平台开发
gaogzhen的博客
11-19 1221
swagger文档生成与查看-业务模块-Saas多租户平台开发 目录 文章目录1、API 文档2、swagger2生成API文档3、优化API文档显示3.1、汉化3.2、页面及功能优化3.3、测试***后记*** ： 内容 本文只是简述swagger2如何生成文档过程，关于swagger2详细教程以及源码之类的可自行查阅相关文档。 1、API 文档 现在项目基本上都是前后端分离模式，而且前后端分别由不同的团队开发，那么前后端开发人员的交流就变得很关键。选择好的交流方式，提高开发效率；反之，影响项目
0401react中使用css-react-css-仿低代码平台项目
最新发布
gaogzhen的博客
04-08 998
0401react中使用css-react-css-仿低代码平台项目
0302useState-hooks-react-仿低代码平台项目
gaogzhen的博客
04-04 943
0302useState-hooks-react-仿低代码平台项目
0101-vite创建react_ts-环境准备-仿低代码平台项目
gaogzhen的博客
03-29 879
0101-vite创建react_ts-环境准备-仿低代码平台项目
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gaog2zh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值