React+ts+vite脚手架搭建（五）【登录篇】

进阶的鱼2025-11-23 18:48

前言

上一篇我们介绍了在脚手架中配置代码格式规范、代码提交规范：React+ts+vite脚手架搭建（五）【规范篇】

本篇我们将开始脚手架中的最后一篇--登录篇

本文我们将完成一个传统的账号+密码登录功能

具体步骤

新建一个登录路由

在路由配置中新建一个登录路由

新建登录+代码

在这段代码中我们分别做了：
- 账号和密码的输入框、登录按钮
- 点击登录按钮逻辑
- 登录成功后将返回的token保存到localStorage

js 复制代码

import React, { useState } from "react";
import "./index.css";
const Login = () => {
  const [form, setForm] = useState({
    username: "",
    password: "",
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setForm({
      ...form,
      [name]: value,
    });
  };

  const login = () => {
    if (!form.username || !form.password) {
      alert("请输入账号密码");
      return;
    } else {
      localStorage.setItem("token", "123456");
    }
  };

  return (
    <div className="login">
      <h1>登录页</h1>
      <div>
        <input
          type="text"
          placeholder="请输入账号"
          name="username"
          value={form.username}
          onChange={handleChange}
        />
      </div>
      <div>
        <input
          type="password"
          placeholder="请输入密码"
          name="password"
          value={form.password}
          onChange={handleChange}
        />
      </div>
      <button onClick={login}>登录</button>
    </div>
  );
};

export default Login;

页面如下：

token的携带

我们存储完token后，需要在每次的接口请求中都携带上，这里我们直接在请求拦截器上携带上

登录的校验

一般来说一个需要登录的系统，大部分的接口都是需要登录验证的，所以我们直接将登录的校验写在响应拦截器中，当发现接口响应回来的code为未登录的code时，即直接跳转到登录页重新开始登录

总结

这样一个极简的登录系统就已经做好。。。

这里有几点补充：

系统登录的token一般是通过接口返回的，我这里是模拟了一下，大家后续可以根据自己项目的实际情况来写接口
登录的token我是存在localStorage中的，你也可以存储在sessionStorage中