位置: IT常识 - 正文

前端实战|React18极客园——登陆模块(token持久化、路由拦截、mobx、封装axios)(前端实战面试题)

编辑:rootadmin
前端实战|React18极客园——登陆模块(token持久化、路由拦截、mobx、封装axios)

推荐整理分享前端实战|React18极客园——登陆模块(token持久化、路由拦截、mobx、封装axios)(前端实战面试题),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端实战训练营,前端实战项目11套,前端实战项目推荐,前端实战项目11套,前端实战案例,前端实战项目11套,前端实战项目推荐,前端实战项目,内容如对您有帮助,希望把文章链接给更多的朋友!

欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥React框架React框架React框架🔥,中间穿插了一些基础知识的回顾 🌈博客主页👉codeMak1r.小新的博客

😇本文目录😇登陆模块1.基本结构模块2. 创建表单结构3. 表单校验实现4. 获取登录表单数据5. 封装http工具模块6. 配置登录Mobx7. 实现登录逻辑8. token持久化封装工具函数持久化设置9. axios请求拦截器注入token10. 路由导航守卫

本文被专栏【React–从基础到实战】收录 🕹坚持创作✏️,一起学习📖,码出未来👨🏻‍💻!

最近在学习React过程中,找到了一个实战小项目,在这里与大家分享。 本文遵循项目开发流程,逐步完善各个需求 前文——《项目前置准备》

登陆模块1.基本结构模块

本节目标: 能够使用antd搭建基础布局

实现步骤

在 Login/index.js 中创建登录页面基本结构在 Login 目录中创建 index.scss 文件,指定组件样式将 logo.png 和 login.png 拷贝到 assets 目录中

代码实现

pages/Login/index.js

import { Card } 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="" /> {/* 登录表单 */} </Card> </div> )}export default Login

pages/Login/index.scss

.login { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: center/cover url('~@/assets/login.png'); .login-logo { width: 200px; height: 60px; display: block; margin: 0 auto 20px; } .login-container { width: 440px; height: 360px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 50px rgb(0 0 0 / 10%); } .login-checkbox-label { color: #1890ff; }}2. 创建表单结构

本节目标: 能够使用antd的Form组件创建登录表单

实现步骤

打开 antd Form 组件文档找到代码演示的第一个示例(基本使用),点击<>(显示代码),并拷贝代码到组件中分析 Form 组件基本结构调整 Form 组件结构和样式

代码实现

pages/Login/index.js

import { Form, Input, Button, Checkbox } from 'antd'const Login = () => { return ( <Form> <Form.Item> <Input size="large" placeholder="请输入手机号" /> </Form.Item> <Form.Item> <Input size="large" placeholder="请输入验证码" /> </Form.Item> <Form.Item> <Checkbox className="login-checkbox-label"> 我已阅读并同意「用户协议」和「隐私条款」 </Checkbox> </Form.Item> <Form.Item> <!-- 渲染Button组件为submit按钮 --> <Button type="primary" htmlType="submit" size="large" block> 登录 </Button> </Form.Item> </Form> )}3. 表单校验实现

本节目标: 能够为手机号和密码添加表单校验

实现步骤

为 Form 组件添加 validateTrigger 属性,指定校验触发时机的集合为 Form.Item 组件添加 name 属性,这样表单校验才会生效为 Form.Item 组件添加 rules 属性,用来添加表单校验

代码实现

page/Login/index.js

const Login = () => { return ( <Form validateTrigger={['onBlur', 'onChange']}> <Form.Item name="mobile" rules={[ { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不对', validateTrigger: 'onBlur' }, { required: true, message: '请输入手机号' } ]} > <Input size="large" placeholder="请输入手机号" /> </Form.Item> <Form.Item name="code" rules={[ { len: 6, message: '验证码6个字符', validateTrigger: 'onBlur' }, { required: true, message: '请输入验证码' } ]} > <Input size="large" placeholder="请输入验证码" maxLength={6} /> </Form.Item> <Form.Item name="remember" valuePropName="checked"> <Checkbox className="login-checkbox-label"> 我已阅读并同意「用户协议」和「隐私条款」 </Checkbox> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit" size="large" block> 登录 </Button> </Form.Item> </Form> )}4. 获取登录表单数据

本节目标: 能够拿到登录表单中用户的手机号码和验证码

实现步骤

为 Form 组件添加 onFinish 属性,该事件会在点击登录按钮时触发创建 onFinish 函数,通过函数参数 values 拿到表单值Form 组件添加 initialValues 属性,来初始化表单值

代码实现

pages/Login/index.js

// 点击登录按钮时触发 参数values即是表单输入数据const onFinish = values => { console.log(values)}<Form onFinish={ onFinish } initialValues={{ mobile: '13911111111', code: '246810', remember: true }}>...</Form>5. 封装http工具模块

本节目标: 封装axios,简化操作

实现步骤

创建 utils/http.js 文件创建 axios 实例,配置 baseURL,请求拦截器,响应拦截器在 utils/index.js 中,统一导出 http

代码实现

utils/http.js

import axios from 'axios'const http = axios.create({ baseURL: 'http://geek.itheima.net/v1_0', timeout: 5000})// 添加请求拦截器http.interceptors.request.use((config)=> { return config }, (error)=> { return Promise.reject(error)})// 添加响应拦截器http.interceptors.response.use((response)=> { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return response }, (error)=> { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error)})export { http }

utils/index.js

import { http } from './http'export { http }6. 配置登录Mobx

本节目标: 基于mobx封装管理用户登录的store

store/login.Store.js

// 登录模块import { makeAutoObservable } from "mobx"import { http } from '@/utils'class LoginStore { token = '' constructor() { makeAutoObservable(this) } // 登录 login = async ({ mobile, code }) => { const res = await http.post('http://geek.itheima.net/v1_0/authorizations', { mobile, code }) this.token = res.data.token }}export default LoginStore前端实战|React18极客园——登陆模块(token持久化、路由拦截、mobx、封装axios)(前端实战面试题)

store/index.js

import React from "react"import LoginStore from './login.Store'class RootStore { // 组合模块 constructor() { this.loginStore = new LoginStore() }}// 导入useStore方法供组件使用数据const StoresContext = React.createContext(new RootStore())export const useStore = () => React.useContext(StoresContext)7. 实现登录逻辑

本节目标: 在表单校验通过之后通过封装好的store调用登录接口

实现步骤

使用useStore方法得到loginStore实例对象在校验通过之后,调用loginStore中的login函数登录成功之后跳转到首页

代码实现

import { useStore } from '@/store'const onFinish = async (values) => { // 存储登录成功的token try { await loginStore.setToken(values) navigate('/', { replace: true }) message.success('At Your Service, Sir!', 2) } catch (error) { message.error(error.response?.data?.message || '登录失败') } }; const onFinishFailed = (errorInfo) => { const [name] = errorInfo.errorFields[0].name if (name === "captcha") message.error('登录失败,请检查验证码是否有误!', 2); if (name === "tel") message.error('登录失败,请检查手机号是否有误!', 2); } return (...)}8. token持久化封装工具函数

本节目标: 能够统一处理 token 的持久化相关操作,确保刷新后 token 不丢失。

实现步骤

创建 utils/token.js 文件分别提供 getToken/setToken/clearToken/isAuth 四个工具函数并导出创建 utils/index.js 文件,统一导出 token.js 中的所有内容,来简化工具函数的导入将登录操作中用到 token 的地方,替换为该工具函数

代码实现

utils/token.js

const TOKEN_KEY = 'geek_pc'const getToken = () => localStorage.getItem(TOKEN_KEY)const setToken = token => localStorage.setItem(TOKEN_KEY, token)const clearToken = () => localStorage.removeItem(TOKEN_KEY)export { getToken, setToken, clearToken }持久化设置

本节目标: 使用token函数持久化配置

实现步骤

拿到token的时候一式两份,存本地一份初始化的时候优先从本地取,取不到再初始化为控制

代码实现

store/login.Store.js

// 登录模块import { makeAutoObservable } from "mobx"import { setToken, getToken, clearToken, http } from '@/utils'class LoginStore { // 这里哦!! token = getToken() || '' constructor() { makeAutoObservable(this) } // 登录 login = async ({ mobile, code }) => { const res = await http.post('http://geek.itheima.net/v1_0/authorizations', { mobile, code }) this.token = res.data.token // 还有这里哦!! setToken(res.data.token) }}export default LoginStore9. axios请求拦截器注入token

《Vue/React项目实现axios请求拦截器注入token》

本节目标: 把token通过请求拦截器注入到请求头中

拼接方式:config.headers.Authorization = Bearer ${token}}

utils/http.js

http.interceptors.request.use(config => { const token = getToken('pc-key') if (token) { config.headers.Authorization = `Bearer ${token}` } return config})

第一次发起请求,是登录请求,此时,localStorage中没有token,getToken获取不到,不走下面这个if函数体,直接return config;

后面再发请求时,由于已经登录了,此时,localStorage中有token,getToken获取到了,走if中的函数体,在发起请求前自动进行预处理,追加一个token,以便于访问需要权限的页面

为请求头对象(headers)中添加token验证的自定义字段(Authorization),作用是为了让需要验证才能使用的API能够使用(请求头中携带了token值则可通过验证)

在最后必须return config

10. 路由导航守卫

【Vue/React实现路由鉴权/导航守卫/路由拦截(react-router v6)】

本节目标: 能够实现未登录时访问拦截并跳转到登录页面(路由鉴权实现)

实现思路

自己封装 AuthRoute 路由鉴权高阶组件,实现未登录拦截,并跳转到登录页面

思路为:判断本地是否有token,如果有,就返回子组件,否则就重定向到登录Login

实现步骤

在 components 目录中,创建 AuthRoute/index.js 文件判断是否登录登录时,直接渲染相应页面组件未登录时,重定向到登录页面将需要鉴权的页面路由配置,替换为 AuthRoute 组件渲染

代码实现

components/AuthRoute/index.js

// 路由鉴权// 1. 判断token是否存在// 2. 如果存在 直接正常渲染// 3. 如果不存在 重定向到登录路由import { Navigate } from "react-router-dom";import { getToken } from "@/utils";// 高阶组件:把一个组件当成另外一个组件的参数传入 然后通过一定的判断 返回新的组件// 这里的AuthRoute就是一个高阶组件function AuthRoute({ children }) { // 获取token const tokenStr = getToken() // 如果token存在 直接正常渲染 if (tokenStr) { return <>{children}</> } // 如果token不存在,重定向到登录路由 else { return <Navigate to='/login' replace /> }}{/* <AuthRoute> <Layout /> </AuthRoute> 登录:<> <Layout /> </> 非登录:<Navigate to="/login" replace />*/ }export { AuthRoute }

注:utils工具函数getToken如下

// 从localstorage中取tokenconst getToken = () => {return window.localStorage.getItem(key)}

src/routes/index.js路由表文件

import Layout from "@/pages/Layout";import Login from "@/pages/Login";import { AuthRoute } from "@/components/AuthRoute";// eslint-disable-next-lineexport default [ // 不需要鉴权的组件Login { path: "/login", element: <Login /> }, // 需要鉴权的组件Layout { path: "/", element: <AuthRoute> <Layout /> </AuthRoute> }]

下篇文章:Layout布局模块的实现 专栏订阅入口【React–从基础到实战】

本文链接地址:https://www.jiuchutong.com/zhishi/300108.html 转载请保留说明!

上一篇:Vue(ref和$refs属性介绍与使用)

下一篇:【HTML | CSS】春节将至,为网页挂上精美的灯笼吧(附源码)程序员的浪漫(_ html)

  • 苹果13天气怎么定位到本地(苹果13天气怎么设置)

    苹果13天气怎么定位到本地(苹果13天气怎么设置)

  • 华为路由器登录密码怎么查(华为路由器登录地址)

    华为路由器登录密码怎么查(华为路由器登录地址)

  • 旺信怎么加好友(旺信怎么登陆)

    旺信怎么加好友(旺信怎么登陆)

  • 荣耀30pro支持红外人脸识别功能吗(荣耀30Pro支持红外线)

    荣耀30pro支持红外人脸识别功能吗(荣耀30Pro支持红外线)

  • beatsx白灯不停闪烁

    beatsx白灯不停闪烁

  • 快手已重置能恢复吗(快手重置了会怎样)

    快手已重置能恢复吗(快手重置了会怎样)

  • 百兆网线能用千兆路由器吗(百兆网线能用千兆网线吗)

    百兆网线能用千兆路由器吗(百兆网线能用千兆网线吗)

  • 华为手机语音播放失败什么原因(华为手机语音播报在哪里设置)

    华为手机语音播放失败什么原因(华为手机语音播报在哪里设置)

  • 手机电池健康掉的快什么原因(手机电池健康掉到99)

    手机电池健康掉的快什么原因(手机电池健康掉到99)

  • 苹果充电口怎么清灰尘(苹果充电口怎么拆)

    苹果充电口怎么清灰尘(苹果充电口怎么拆)

  • qq聊天记录能保存多久(qq聊天记录能保存多少条)

    qq聊天记录能保存多久(qq聊天记录能保存多少条)

  • 为什么微信老是环境异常封号(为什么微信老是显示储存已满)

    为什么微信老是环境异常封号(为什么微信老是显示储存已满)

  • 抖音怎么把关注人置顶(抖音怎么把关注和粉丝设为私密)

    抖音怎么把关注人置顶(抖音怎么把关注和粉丝设为私密)

  • word中分节符的作用是什么(word中分节符的类型有哪些)

    word中分节符的作用是什么(word中分节符的类型有哪些)

  • 京东红包怎么使用(京东红包怎么弄)

    京东红包怎么使用(京东红包怎么弄)

  • ops电脑是什么意思(ops电脑模块是什么意思)

    ops电脑是什么意思(ops电脑模块是什么意思)

  • 小米cc9pro要不要贴保护膜

    小米cc9pro要不要贴保护膜

  • 什么是设计状况(设计状况系数怎么读)

    什么是设计状况(设计状况系数怎么读)

  • 华为手机耳机插孔在哪里(华为手机耳机插孔是2.5还是3.5)

    华为手机耳机插孔在哪里(华为手机耳机插孔是2.5还是3.5)

  • bm46电池是什么手机(bm46电池多少钱)

    bm46电池是什么手机(bm46电池多少钱)

  • qq音乐桌面歌词怎么设置(qq音乐桌面歌词怎么移动不了)

    qq音乐桌面歌词怎么设置(qq音乐桌面歌词怎么移动不了)

  • 小米5x怎么设置nfc功能(小米5x怎么设置全面屏手势)

    小米5x怎么设置nfc功能(小米5x怎么设置全面屏手势)

  • 耳机煲音的方法(耳机怎么进行煲机?)

    耳机煲音的方法(耳机怎么进行煲机?)

  • 手机坏了电话号码怎么找回(手机坏了电话号码没有了怎么办)

    手机坏了电话号码怎么找回(手机坏了电话号码没有了怎么办)

  • b站视频怎么保存到相册(b站视频怎么保存音频)

    b站视频怎么保存到相册(b站视频怎么保存音频)

  • ICCV, ECCV, CVPR,IEEE的关系

    ICCV, ECCV, CVPR,IEEE的关系

  • 大学生问AI(大学生问卷spss数据分析作业)

    大学生问AI(大学生问卷spss数据分析作业)

  • 2023版最新最全React面试题

    2023版最新最全React面试题

  • 浙江增值税专用发票几个点
  • 小规模超过30万计算
  • 支付企业所得税会计科目
  • 申报增值税附加税减免项目选错了
  • 不征税收入的三个条件文件依据
  • 法人章和财务章谁保管
  • 小规模纳税人免税怎么做账
  • 预提利息收入纳税调整
  • 回购股份限售
  • 小规模纳税检查怎么做
  • 公司业务招待费占比
  • 装卸费收取的税收筹划是怎样的?
  • 小规模纳税人城镇土地使用税减免政策
  • 纳税人证明怎么办理
  • 资产负债表资产总额在哪
  • 企业固定资产报废申请报告
  • 收到苗木发票怎么做账
  • 施工项目费用明细表模板
  • php安装教程详解
  • 以租代购怎么入账
  • 不能错过的只有你下架了吗
  • 会计结账时账户余额为零
  • 软件开发企业进项税额抵扣
  • php功能实现
  • web无法运行
  • 核定征收的企业注销需要缴纳个人所得税吗
  • css垂直导航栏
  • Element UI - v-infinite-scroll无限滚动组件
  • 增值税发票填写注意事项
  • webpack配置publicpath
  • js如何把字符串转换成数字
  • 正版菜狗
  • html小游戏代码大全
  • Laravel+jQuery实现AJAX分页效果
  • 应收账款贷款怎么做
  • 财政拨付注册资金怎么填
  • 保险费的增值税税率
  • 售价金额核算法的优点有
  • 公司报销招待费需要发票还需要菜单明细吗
  • 公司增资该怎么做账
  • server2003dns配置
  • sqlserver2012完全卸载
  • 预计净残值是怎么算出来的
  • 个体工商户需要给员工交社保吗
  • 现金支付什么会计科目
  • 某企业福利部门
  • 行政事业单位的营业执照叫什么
  • 微信提现手续费多少?
  • 多计提房产税怎么冲销
  • 企业出现有利润的现象
  • 外来原始凭证丢了怎么办
  • 虚开发票如何界定?
  • 租金收入分摊政策规定
  • 最新mysql数据库安装步骤
  • 如何卸载独显
  • windows xp运行
  • ubuntu复制文件到当前文件夹
  • centos 安装
  • win7和2008r2
  • linux系统的文件怎么导出来
  • centos7安装过程报错
  • windows8鼠标点击右键反应慢咋回事
  • win7电脑无法上网 连接正常
  • win10 20h2怎么更新
  • windows 7如何连接
  • python实现人脸识别代码
  • javascript 二维码
  • shell脚本转码
  • attributes.add
  • python编程
  • 深入理解计算机系统
  • shell 比较大小
  • java 视频教程
  • 财税公司销售工作好做么
  • 督察综合服务中心是干什么的
  • 江苏税务ukey怎么申请
  • 内蒙古一般纳税人查询网
  • 综治中心能取代公务员吗
  • 专用发票章盖在哪里
  • 如何开展班级全部活动
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设