【React】入门Day04 —— 项目搭建及登录与表单校验、token 管理、路由鉴权实现

项目搭建

创建项目

# 使用npx创建项目
npx create-react-app my-react-app
# 进入项目目录
cd my-react-app
# 创建项目目录结构
mkdir -p src/{apis,assets,components,pages,store,utils}
touch src/{App.js,index.css,index.js}

使用npx create-react-app创建项目，进入项目目录后通过npm start启动。
调整项目目录结构，包括apis、assets、components、pages等多个文件夹。

使用技术

接入scss预处理器，安装sass工具，创建全局样式文件index.scss。

# 安装sass工具
npm i sass -D

// 在src/index.scss中设置全局样式
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

引入组件库antd，安装后在Login页面测试Button组件。

# 安装antd组件库
npm i antd

// 在src/pages/Login/index.jsx中使用Button组件
import React from 'react';
import { Button } from 'antd';

const Login = () => {
  return (
    <div>
      <Button type='primary'>登录</Button>
    </div>
  );
};

export default Login;

使用react-router-dom配置基础路由，创建Layout和Login组件并配置路由规则。

# 安装react-router-dom
npm i react-router-dom

// 在src/router/index.js中配置路由
import { createBrowserRouter } from 'react-router-dom';
import Login from '../pages/Login';
import Layout from '../pages/Layout';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
  },
  {
    path: '/login',
    element: <Login />,
  },
]);

export default router;

通过craco工具包配置别名路径，在craco.config.js中设置webpack别名，并在jsconfig.json中配置VsCode提示。

# 安装craco工具包
npm i @craco/craco -D

// 在craco.config.js中配置别名
const path = require('path');
module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname,'src')
    }
  }
};

// 在package.json中修改scripts命令
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

// 在src/router/index.js中使用别名
import { createBrowserRouter } from 'react-router-dom';
import Login from '@/pages/Login';
import Layout from '@/pages/Layout';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
  },
  {
    path: '/login',
    element: <Login />,
  },
]);

export default router;

// 在jsconfig.json中配置VsCode提示
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

功能模块实现
- 登录模块
  - 基本结构搭建
在Login/index.js创建登录页面结构，引入antd组件，使用@/assets路径引入图片，在Login/index.scss中设置样式。

import React from 'react';
import { Card, Form, Input, Button } from 'antd';
import logo from '@/assets/logo.png';
import './index.scss';

const Login = () => {
  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src={logo} alt="" />
        <Form>
          <Form.Item>
            <Input size="large" placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item>
            <Input size="large" placeholder="请输入验证码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" size="large" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default Login;

表单校验实现

为Form组件设置validateTrigger，为Form.Item组件设置name和rules属性进行表单校验。

import React from 'react';
import { Form, Input, Button } from 'antd';

const Login = () => {
  return (
    <Form validateTrigger={['onBlur']}>
      <Form.Item
        name="mobile"
        rules={[
          { required: true, message: '请输入手机号' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号码格式不对'
          }
        ]}
      >
        <Input size="large" placeholder="请输入手机号" />
      </Form.Item>
      <Form.Item
        name="code"
        rules={[
          { required: true, message: '请输入验证码' },
        ]}
      >
        <Input size="large" placeholder="请输入验证码" maxLength={6} />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" size="large" block>
          登录
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Login;

获取登录表单数据

为Form组件设置onFinish属性，在点击登录按钮时触发获取表单数据的函数。

import React from 'react';
import { Form, Input, Button } from 'antd';

const Login = () => {
  const onFinish = formValue => {
    console.log(formValue);
  };

  return (
    <Form onFinish={onFinish}>
      <Form.Item>
        <Input size="large" placeholder="请输入手机号" />
      </Form.Item>
      <Form.Item>
        <Input size="large" placeholder="请输入验证码" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" size="large" block>
          登录
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Login;

封装 request 工具模块

安装axios，在utils/request.js中创建axios实例，配置baseURL、请求拦截器和响应拦截器。

# 安装axios
npm i axios

import axios from 'axios';

const http = axios.create({
  baseURL: 'http://example.com/api',
  timeout: 5000
});

// 请求拦截器
http.interceptors.request.use(config => {
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
http.interceptors.response.use(response => {
  return response.data;
}, error => {
  return Promise.reject(error);
});

export { http };

使用 Redux 管理 token

安装react-redux和@reduxjs/toolkit，在store中创建userStore切片，设置token初始状态和setUserInfo等reducers，封装fetchLogin异步方法。

# 安装react-redux和@reduxjs/toolkit
npm i react-redux @reduxjs/toolkit

import { createSlice } from '@reduxjs/toolkit';
import { http } from '@/utils';

const userStore = createSlice({
  name: 'user',
  initialState: {
    token: ''
  },
  reducers: {
    setUserInfo(state, action) {
      state.token = action.payload;
    }
  }
});

const { setUserInfo } = userStore.actions;
const userReducer = userStore.reducer;

const fetchLogin = loginForm => {
  return async dispatch => {
    const res = await http.post('/authorizations', loginForm);
    dispatch(setUserInfo(res.data.token));
  };
};

export { fetchLogin };
export default userReducer;

实现登录逻辑

在Login组件中调用fetchLogin方法，登录成功后跳转到首页并提示。

import React from 'react';
import { message } from 'antd';
import { useDispatch } from 'react-redux';
import { fetchLogin } from '@/store/modules/user';

const Login = () => {
  const dispatch = useDispatch();

  const onFinish = async formValue => {
    await dispatch(fetchLogin(formValue));
    message.success('登录成功');
  };

  return (
    <div>
      <form onSubmit={onFinish}>
        {/* 登录表单字段 */}
      </form>
    </div>
  );
};

export default Login;

token 持久化

封装setToken、getToken和clearToken方法，在userStore中setUserInfo时将token存入本地。

// 在@/utils/token.js中封装存取方法
const TOKENKEY = 'token_key';

function setToken(token) {
  return localStorage.setItem(TOKENKEY, token);
}

function getToken() {
  return localStorage.getItem(TOKENKEY);
}

function clearToken() {
  return localStorage.removeItem(TOKENKEY);
}

export {
  setToken,
  getToken,
  clearToken
};

// 在userStore中使用token持久化方法
import { createSlice } from '@reduxjs/toolkit';
import { http } from '@/utils';
import { getToken, setToken } from '@/utils/token';

const userStore = createSlice({
  name: 'user',
  initialState: {
    token: getToken() || ''
  },
  reducers: {
    setUserInfo(state, action) {
      state.token = action.payload;
      setToken(state.token);
    }
  }
});

export default userStore;

请求拦截器注入 token

在request.js的请求拦截器中，判断是否有token，有则添加到请求头Authorization中。

// 在utils/request.js中注入token
import axios from 'axios';

const http = axios.create({
  baseURL: 'http://example.com/api',
  timeout: 5000
});

http.interceptors.request.use(config => {
  const token = getToken();
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

http.interceptors.response.use(response => {
  return response.data;
}, error => {
  return Promise.reject(error);
});

export { http };

路由鉴权实现

在components/AuthRoute/index.jsx中创建路由鉴权高阶组件，判断本地是否有token，决定是否重定向到登录页面。

import React from 'react';
import { Navigate } from 'react-router-dom';
import { getToken } from '@/utils';

const AuthRoute = ({ children }) => {
  const isToken = getToken();
  if (isToken) {
    return <>{children}</>;
  } else {
    return <Navigate to="/login" replace />;
  }
};

export default AuthRoute;

// 在src/router/index.js中使用AuthRoute组件
import { createBrowserRouter } from 'react-router-dom';
import Login from '@/pages/Login';
import Layout from '@/pages/Layout';
import AuthRoute from '@/components/AuthRoute';

const router = createBrowserRouter([
  {
    path: '/',
    element: <AuthRoute><Layout /></AuthRoute>,
  },
  {
    path: '/login',
    element: <Login />,
  },
]);

export default router;

Layout 模块

基本结构和样式 reset

在pages/Layout/index.js中使用antd/Layout组件创建页面结构，引入antd的Menu和Popconfirm等组件，设置样式并安装normalize.css进行样式 reset。

import React from 'react';
import { Layout, Menu, Popconfirm } from 'antd';
import { HomeOutlined, DiffOutlined, EditOutlined, LogoutOutlined } from '@ant-design/icons';
import './index.scss';
import 'normalize.css';

const { Header, Sider } = Layout;

const items = [
  {
    label: '首页',
    key: '1',
    icon: <HomeOutlined />,
  },
  {
    label: '文章管理',
    key: '2',
    icon: <DiffOutlined />,
  },
  {
    label: '创建文章',
    key: '3',
    icon: <EditOutlined />,
  },
];

const GeekLayout = () => {
  return (
    <Layout>
      <Header className="header">
        <div className="logo" />
        <div className="user-info">
          <span className="user-name">用户名</span>
          <span className="user-logout">
            <Popconfirm title="是否确认退出？" okText="退出" cancelText="取消">
              <LogoutOutlined /> 退出
            </Popconfirm>
          </span>
        </div>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            theme="dark"
            defaultSelectedKeys={['1']}
            items={items}
            style={{ height: '100%', borderRight: 0 }}
          ></Menu>
        </Sider>
        <Layout className="layout-content" style={{ padding: 20 }}>
          内容
        </Layout>
      </Layout>
    </Layout>
  );
};

export default GeekLayout;

二级路由配置

在pages目录创建Home、Article、Publish页面文件夹，在router/index.js中配置嵌套子路由，在Layout中配置二级路由出口，使用Link修改左侧菜单内容实现路由切换。

// 在pages目录创建Home.jsx
import React from 'react';

const Home = () => {
  return <div>首页内容</div>;
};

export default Home;

// 在pages目录创建Article.jsx
import React from 'react';

const Article = () => {
  return <div>文章管理内容</div>;
};

export default Article;

// 在pages目录创建Publish.jsx
import React from 'react';

const Publish = () => {
  return <div>发布文章内容</div>;
};

export default Publish;

// 在src/router/index.js中配置二级路由
import { createBrowserRouter } from 'react-router-dom';
import Login from '@/pages/Login';
import Layout from '@/pages/Layout';
import Publish from '@/pages/Publish';
import Article from '@/pages/Article';
import Home from '@/pages/Home';
import { AuthRoute } from '@/components/AuthRoute';

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <AuthRoute>
        <Layout />
      </AuthRoute>
    ),
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: 'article',
        element: <Article />,
      },
      {
        path: 'publish',
        element: <Publish />,
      },
    ],
  },
  {
    path: '/login',
    element: <Login />,
  },
]);

export default router;

// 在Layout组件中配置二级路由出口
import React from 'react';
import { Outlet } from 'react-router-dom';

const GeekLayout = () => {
  return (
    <Layout className="layout-content" style={{ padding: 20 }}>
      <Outlet />
    </Layout>
  );
};

export default GeekLayout;

路由菜单点击交互实现

为Menu组件设置onClick属性实现点击菜单跳转路由，通过useLocation获取当前路由路径实现菜单反向高亮。

import React from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import { HomeOutlined, DiffOutlined, EditOutlined, LogoutOutlined } from '@ant-design/icons';

const items = [
  {
    label: '首页',
    key: '/',
    icon: <HomeOutlined />,
  },
  {
    label: '文章管理',
    key: '/article',
    icon: <DiffOutlined />,
  },
  {
    label: '创建文章',
    key: '/publish',
    icon: <EditOutlined />,
  },
];

const GeekLayout = () => {
  const navigate = useNavigate();

  const menuClick = route => {
    navigate(route.key);
  };

  return (
    <Layout>
      <Header className="main-header">
        <div className="logo" />
        <div className="user-info">
          <span className="user-name">用户名</span>
          <span className="user-logout">
            <Popconfirm title="是否确认退出？" okText="退出" cancelText="取消">
              <LogoutOutlined /> 退出
            </Popconfirm>
          </span>
        </div>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            theme="dark"
            selectedKeys={['1']}
            items={items}
            style={{ height: '100%', borderRight: 0 }}
            onClick={menuClick}
          ></Menu>
        </Sider>
        <Layout className="layout-content" style={{ padding: 20 }}>
          <Outlet />
        </Layout>
      </Layout>
    );
};

export default GeekLayout;

// 菜单反向高亮实现
import React from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { HomeOutlined, DiffOutlined, EditOutlined, LogoutOutlined } from '@ant-design/icons';

const items = [
  {
    label: '首页',
    key: '/',
    icon: <HomeOutlined />,
  },
  {
    label: '文章管理',
    key: '/article',
    icon: <DiffOutlined />,
  },
  {
    label: '创建文章',
    key: '/publish',
    icon: <EditOutlined />,
  },
];

const GeekLayout = () => {
  const location = useLocation();
  const selectedKey = location.pathname;

  return (
    <Layout>
      <Header className="main-header">
        <div className

展示个人信息

在store/userStore.js中编写获取用户信息的逻辑，在Layout组件中触发fetchUserInfo方法获取信息并渲染用户名。

// store/userStore.js
import { createSlice } from '@reduxjs/toolkit';
import { http } from '@/utils';
import { getToken, setToken } from '@/utils';

const userStore = createSlice({
  name: 'user',
  initialState: {
    token: getToken() || '',
    userInfo: {}
  },
  reducers: {
    setUserToken(state, action) {
      state.token = action.payload;
      setToken(state.token);
    },
    setUserInfo(state, action) {
      state.userInfo = action.payload;
    },
    clearUserInfo(state) {
      state.token = '';
      state.userInfo = {};
      clearToken();
    }
  }
});

// 解构出actionCreater
const { setUserToken, setUserInfo, clearUserInfo } = userStore.actions;
// 获取reducer函数
const userReducer = userStore.reducer;

const fetchLogin = (loginForm) => {
  return async (dispatch) => {
    const res = await http.post('/authorizations', loginForm);
    dispatch(setUserToken(res.data.token));
  };
};

const fetchUserInfo = () => {
  return async (dispatch) => {
    const res = await http.get('/user/profile');
    dispatch(setUserInfo(res.data));
  };
};

export { fetchLogin, fetchUserInfo, clearUserInfo };
export default userReducer;

退出登录实现

为Popconfirm添加确认回调事件，在store/userStore.js中新增clearUserInfo方法删除token和用户信息，在回调事件中调用该方法并返回登录页面。

// pages/Layout/index.js
import React, { useEffect } from 'react';
import { Layout, Menu, Popconfirm } from 'antd';
import {
  HomeOutlined,
  DiffOutlined,
  EditOutlined,
  LogoutOutlined,
} from '@ant-design/icons';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUserInfo } from '@/store/modules/user';

const { Header, Sider } = Layout;

const items = [
  // 菜单配置项
];

const GeekLayout = () => {
  const dispatch = useDispatch();
  const name = useSelector(state => state.user.userInfo.name);

  useEffect(() => {
    dispatch(fetchUserInfo());
  }, [dispatch]);

  const loginOut = () => {
    dispatch(clearUserInfo());
    // 假设这里有合适的导航函数，替换为实际的导航逻辑
    // navigate('/login'); 
  };

  return (
    <Layout>
      <Header className="header">
        <div className="logo" />
        <div className="user-info">
          <span className="user-name">{name}</span>
          <span className="user-logout">
            <Popconfirm
              title="是否确认退出？"
              okText="退出"
              cancelText="取消"
              onConfirm={loginOut}
            >
              <LogoutOutlined /> 退出
            </Popconfirm>
          </span>
        </div>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            theme="dark"
            defaultSelectedKeys={['1']}
            items={items}
            style={{ height: '100%', borderRight: 0 }}
          ></Menu>
        </Sider>
        <Layout className="layout-content" style={{ padding: 20 }}>
          {/* 页面内容 */}
        </Layout>
      </Layout>
    </Layout>
  );
};

export default GeekLayout;

处理 Token 失效

在http.interceptors.response中判断响应状态码为401时，清除token，跳转到登录页面并刷新页面。

// 在http.js（假设是配置axios请求相关的文件）中处理Token失效
import axios from 'axios';

const http = axios.create({
  baseURL: 'http://example.com/api',
  timeout: 5000
});

http.interceptors.response.use((response) => {
  return response.data;
}, (error) => {
  if (error.response && error.response.status === 401) {
    // 假设这里有合适的获取和清除token的函数，替换为实际的逻辑
    const token = getToken();
    if (token) {
      clearToken();
    }
    // 假设这里有合适的导航函数，替换为实际的导航逻辑
    // navigate('/login'); 
    window.location.reload();
  }
  return Promise.reject(error);
});

export { http };