用react实现一个简单的登录页面

用react实现一个简单的登录页面

React 是一个用于构建用户界面的 javascript 库，是当前前端主流框架之一。

这里主要是演示一下，用react搭建一个简易的登录页面。

演示准备

本地安装一下VSCode，在没激活码使用webstorm的情况下，vscode也是一个很好的选择，而且vscode有很多插件，合理使用，也能用的很舒服。

准备一个登录用的接口，可以是mock接口，也可以随便用某些后端框架写一个本地运行。

实操演示-创建工程

到工作目录打开cmd界面，通过命令新建一个工程：

新建过程中会引入一些必要的包：

新建react工程

实操演示-配置sass环境

配置一下sass环境，sass是一种预编译的css，作用类似于Less。由于React中内置了处理sass的配置，所以在创建的React项目中，可以直接使用sass来写样式。

安装用于解析sass的包：

yarn add sass

创建一个全局样式文件：

index.scss

引用这个样式文件：

引用index.scss

将一些不会使用的文件和引用删除：

删除无用文件和引用

实操演示-配置基础路由

需要安装路由的包：

yarn add react-router-dom

准备一个函数组件Login：

再准备一个函数组件Layout：

将准备的两个组件进行路由配置：

进行路由配置

实操演示-Ant Design的引入

antd是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。antd有很多优点，感兴趣可以去官网看一下。

先安装antd：

yarn add antd

引用antd的样式文件：

引用antd样式文件

要确认引入是否生效，可以直接从官网上找个组件，添加到页面上，将工程运行起来，可以直观的看到。

从官网上找一个Button的组件：

官网上的Button组件

将antd的Button添加到页面上：

引用antd的组件

将工程运行起来：

yarn start

运行起来的界面：

运行后的界面

可以看到Button的样式是正常的，说明antd样式文件引用没问题。

实操演示-配置别名路径

配置别名路径的目的是通过@符号简化路径处理。

create-react-app这个工具创建的工程，将所有工程化配置，都隐藏在了react-scripts包中，所以在项目中看不到任何配置信息。

我们可以通过第三方库来进行修改。先安装第三方库：

yarn add -D @craco/craco

创建一个craco的配置文件，并在这个文件中配置路径别名：

修改package.json中脚本命令：

将原来代码中的一些引用修改成带@符的引用：

修改引用

重新启动工程，在界面上是看不出区别的。

当前在引用的时候，直接打@符号，是不会提示路径的，为了方便使用，可以在根目录创建一个配置文件：

编辑jsconifg.json文件

有了这个配置文件，后面在引用时打@符号就会有提示了。

实操演示-搭建静态结构

在Login/index.js中创建登录页面基础结构，这里不需要自己一个组件一个组件的写，直接到antd官网上抄案例：

找案例的源码

将源码复制过来：

粘贴源码

Form的父组件Card主要是为了将登录表单以卡片的形式展现。

在Login目录下创建index.scss文件，指定组件样式：

编辑login的index.scss文件

引用index.scss文件：

引用index.scss

将需要使用到的图片资源放到assets目录中：

根据实际需要，调整一下Form表单的结构和样式。这个validateTrigger参数是控制提示语触发的时机的：

设置提示语出现时机

这个提示语是否触发是根据这个rules的配置决定的：

校验规则

rules不仅可以校验是否有值，也可以校验填入的值具体格式，比如手机号、邮箱等。

这个initialValues是控制默认值的：

设置默认值

实操演示-后端交互封装

这里使用axios来调用后端接口，先进行安装：

yarn add axios

创建一个http.js文件：

其中headers是为了解决浏览器的cors error进行的配置。

为了方便管理，再新建一个index.js文件：

新建index.js文件

实操演示-编写业务代码

这里使用mobx来写业务代码，先安装mobx：

yarn add mobx

再安装mobx的连接工具mobx-react-lite：

yarn add mobx-react-lite

编辑登录相关的业务代码：

把所有模块都做统一处理：

对store做统一处理

实操演示-组件中调用mobx

在Login组件中进行调用：

调用mobx

其中message也是antd的组件，是一个顶部小弹窗。useNavigate是一个路由工具，用于登录成功后跳转到其他页面，使用时的replace参数是用于控制不让用户通过回退返回到登录页面。

实操演示-token持久化

创建token.js文件，里面编写几个工具函数，并导出：

token.js

至于上面几个工具函数的作用，可以直接从字面意思明白的吧。

到index.js中进行统一管理：

index.js统一管理

回到业务代码部分，使用token.js：

使用token.js

将工程运行起来，登录后就能在本地浏览器的Storage中看到这个token值，就像这样：

Storage中持久化的token

实操演示-请求拦截器注入token

前面已经获取了token，之后需要鉴权的接口调用时都需要在请求头中加上这个token，但是每一次接口调用都写一遍这个请求头，也挺麻烦的。这里就在请求拦截器中完成注入token的逻辑。

调整http.js中的逻辑：

注入token

实操演示-路由鉴权实现

创建一个高阶函数组件，在这个组件中实现鉴权逻辑：

AuthComponent.js

鉴权的方式很简单，就是判断有没有token，就就正常渲染，没有就重定向到登录页面。

回到App.js，修改路由部分的逻辑：

使用AuthComponent组件

总结

到这里，一个简单的登录页面前端demo就已经做好了。没有什么特别难理解的内容，都是一些现成的工具拼装使用。