006i7geoly1fb552x9lwoj30k00k0taf0.jpg
12.27 完善登录页与创建仓库
一、登录前端页面的完善
1. 其实和上次的注册功能干的事几乎一毛一样，首先现在 UserApi.js 文件下在创建一个登录接口，然后再登录页对这个接口进行引入，之后就是拿到 UserApi.js 给它传的一个 Promise 对象，然后 .then 对数据进行处理
image.png
image.png
image.png
2. 完善基本功能后，在优化页面的一些特效，增加用户的体验感，比如注册功能页面引用的，loading 和延时，都可以多试试
image.png
image.png
image.png
二、创建 store 仓库
1. 下载 redux
npm install --save redux
2. 在scr 文件夹下创建一个 store 文件夹，里面创建两个文件，一个是 index.js 文件，另一个是 reducer.js 文件夹
index.js 的内容如下
image.png
reducer.js 的内容如下
image.png
3. 为了组件间更好的使用 store ，我们可以下载 react-redux
npm install --save react-redux
4. 在最外层引入 react-redux 的 Provider 方法，这里可以在 App.js 或者最外层的 index.js 文件下引入，这里我选择在 App.js 下面引入
image.png
5. 由于我们可能在 store 的 index.js 文件下使用 redux 的中间件，所以，再安装一个 redux-thunk
npm install --save redux-thunk
6. 为了方便我们查看仓库的数据，可以去下载一个名为 Redux DevTools 的 redux 的插件，下载完后，我们在 store 文件夹下的 index.js 里引入一下（ 这里是同时将 redux-thunk 与插件一起引入使用了 ）
点击这里进入 redux 插件文档
image.png
找到 1.2 部分，照做即可
image.png
完成后结果如下图
image.png
三、 登录状态
1. 在 Login 的 index.js 中引入 react-redux 插件的 connect 方法，并使用此方法，代码如下（函数嵌套函数，算是一个闭包）
image.png
image.png
2. 在后台假数据接口，穿一个 data 值给前端
image.png
3. 将后台传过来的数据存到我们的 store 仓库里面，并且做一些本地存储，这样刷新页面不会重置
image.png
四、登录拦截（除了登录、注册页，其他页面都要做登录拦截）
1.首先在 src 文件夹下新建一个 utils 文件夹，这个文件夹用于存放一些公用的组件，在这个文件夹下创建一个 PrivateRouter.js 文件，用于做一个登录拦截的组件，这个文件的代码如下
image.png
2. 在 Login 文件夹下的 index.js 文件里新增一些代码，这段代码用于获取上面 PrivateRouter 组件存进 state 里面的一个重定向的地址，然后进行一个判断，因为，如果这个 state 不存在的话，默认的值就是 undefined，这样页面就会报错，所以要先判断，再跳转
image.png
3. 在 App.js 文件下引入并使用即可
image.png
