1 登录访问控制
- 项目中有两种类型的功能 和 两种类型的页面 :
- 功能 :
- 登录后才能进行操作的功能 (获取个人资料.....)
- 不需要登录就可以操作的功能 ( 地图找房 获取房源列表 首页轮播图..... )
- 页面
- 登录之后才能访问的页面 ( 去出租 )
- 不需要登录访问的页面 ( 城市列表 首页 找房 我的 ..... )
2 React 项目中配置Token拦截器
核心点 : token
在拦截器里面处理 token 问题
在 配置axios 的js文件中进行配置（api.js）
## 2. 处理两种类型
- 我们自己封装一个鉴权路由组件
- 鉴权路由组件
- 封装的目的 : 限制某个页面只能在登录的情况下才能访问
- 说明 : React路由中没有直接提供该组件, 我们手动封装,来实现这个效果
## 3. AuthRoute 鉴权路由组件
- 官网 :`https://reacttraining.com/react-router/`
## 4. 封装 AuthRoute
4.1 创建一个 Rent组件 , 点击首页`去出租` , 跳转到 Rent 页面
4.2 因为 `<Route path="/rent" component={Rent}></Route>` 这个出口, 会导致一个问题
只要 path满足 `/rent`, 就会匹配 `Rent组件`, 所以我们要改造
4.3 `<AuthRoute path="/rent" component={Rent} ></AuthRoute>`
- AuthRoute 内部要实现的效果 : 如果登录了直接匹配Rent组件
如果没有登录,去跳转到登录页面,登录成功了,再去Rent
4 防抖 1
我们的页面里会有这样的一个业务，页面中有一个输入框，我们根据输入框里输入内容同时可能会去掉用http接口去查询对应的数据，如果这个用户输入的同时，频繁的触发input事件，然后频繁的向后台发送请求，那么直到用户输入完成时，之前的请求都应该是多余的，假设网络慢一点，后台返回的数据比较慢，那么显示的数据可能会出现频繁的变换，直到最后的一个请求返回。
思路， 我们输入一定的值，当值不再变化了，500毫秒之后再发送请求
自己写一个防抖效果， 延时器
防抖 2
利用 lodasy 框架
参考官网 : `https://lodash.com/docs/#debounce`
2.1 安装 : `yarn add lodash`
2.2 引入 : `import _ from 'lodash'`
2.3 把异步请求的方法封装到 `searchCommunityList` 里面
2.4 使用 `lodash 里面的 debounce`
5. log 取消打印
- `console.log = () => {}` console.log(res)
6 优化
# 优化
## 1. antd-mobile 按需加载 - 介绍
- 1.1 之前的引入不是按需加载,而是全部引入
```js
// 引入组件
import { DatePicker } from 'antd-mobile' // 这样的意思是引入了全部组件, 只不过是只使用了 `DatePicker`
// 引入样式
import 'antd-mobile/dist/antd-mobile.css' // 引入了全部样式
```
- 1.2 按需加载 - 手动引入 (弊端)
```js
import DatePicker from 'antd-mobile/lib/date-picker'; // 只引入 DatePicker
import 'antd-mobile/lib/date-picker/style/css'; // 只引入 DatePicker 的 css
```
- 1.3 需要加载 - 借助 `babel-plugin-import` (推荐)
```js
// 配置
......
// 引入组件
import { DatePicker } from 'antd-mobile' // 只引入 DatePicker , 并且根据 DatePicker 引入对应的样式
