一. 封装各个类型的申请办法

在 Api 文件夹下创立一个 ajax.js 文件来筹备对 axios 实现二次封装。

在这里假如咱们只用到 post 和 get 申请

ok，咱们实现了最根本的二次封装。
这样应用起来如同和间接应用 axios 并没有什么区别，让咱们持续包装一下。
在 Api 文件夹下再创立一个 index.js 文件，来寄存咱们后续可能须要的各种类型的申请办法。

二. 解决跨域问题

当浏览器向服务器发动申请时，即便存在跨域问题，服务器仍旧是会响应申请，并返回数据给浏览器，但当浏览器拿到数据后发现存在跨域问题了，这时候浏览器就不会将数据给页面，相当于把数据给扣留

接下来解决一下跨域的问题，回忆一下跨域的解决办法。

1.JSONP

然而这个只能解决 GET 申请，极度不举荐，了解起来也比拟难

2. 后端设置响应头

独身这样存在安全隐患，所有人都能够给我发送申请.

3. 本人配置代理（罕用）

这个也有两个办法

1. 在 package.json 文件夹最初加上
（仅实用于开发 dev 环境）

而后应用 $nodemon 重启 server.js 文件，重启 react 脚手架

这样我 axios 的所有申请地址都能够发给 localost:3000，如果 public 文件夹下没有，那么就会找localhost:5500 要。

2. 在 src 文件夹下创立 setupProxy.js 增加以下代码即可：

便能够灵便的依据本人须要来实现申请哪些服务器端口的数据。

3. 应用封装好的 myajax 办法替换之前的办法

这是我之前应用的登陆页面的用户名和明码的核查

接下来就能够替换了。

4. 实现 – 登陆欢送 ${userName}– 的成果

而后我想实现一个成果，进入 dashboard 页面当前我能够

补充 这里我设置了一个变量，来显示登陆当前用户名。能够提醒 你好 +${userName}

然而这个办法有弊病，刷新浏览器会失落贮存在电脑内存里的变量。

接下来咱们换一种思路来实现这个成果。

浏览器有 localStorage 这个对象，本地储藏室，很形象易懂了。

这外面咱们须要用到 getItem，和setItem 办法用来获取和设置用户信息。
在 Utiles 文件夹创立storageUtilesmemory 那个文件没啥用。请忽视

上面咱们来封装一下这个 localStorage 身上的办法。这里咱们须要就要思考，首先必定是存储信息，再而后就是想方法刷新浏览器的时候 获取到信息，最初不必的时候删除信息。

因为浏览器是保留 JSON 格局的数据，咱们用户输出的信息是 {userName:"xx",passWord:"xx"} 这种对象数据，保留的时候浏览器是无奈辨认的，
留神 要晓得对象的 toString()办法，输入的后果是 [object,object] 并不是咱们常识认为的，"userName:"xx",passWord:"xx""并不是这种成果，这里咱们须要特地留神。于是就要用的 JSON.stringfy 办法来把对象转换成 JSON 格局的字符串。留神，JSON 仅仅只是一种数据存储格局，它并没有对象这个概念！！！！！！！它并没有对象这个概念！！！！！！！它并没有对象这个概念！！！！！！！ 它并非一种高级语言之类的，然而人们把它书写的格局规定成相似于高级语言中的对象那种写法而已。仅此而已！就像最简略的txt 格局，我在 txt 文件里写{name:XX}，你说它是个对象？它有对象这个概念吗？它仅仅只是数据的存储格局罢了。

封装好当前，咱们就须要在适合的中央来调用这些办法，首先保留办法是最简略的，那必定是明码输出正确的时候保留。让咱们返回 Login 组件。

想用就得引入

紧接着先将变量保留到内存中，而后保留到浏览器中。

这时候千万不要认为就功败垂成了，你仅仅只是保留到浏览器对象里了，然而浏览器又不晓得你什么时候读取，而后思考咱们想要的成果，刷新浏览器，就马上读取，那么咱们应该想到 index.js 这个入口文件，这个文件下的所有代码都会在页面加载的时候马上执行。而后就是惯例的引入和变量赋值。

下面代码实现的成果就是:1 当进入页面关上，浏览器找到 index.js 文件 2. 会从上向下执行 index.js 的所有代码 3. 而后再渲染 dender 的代码，因为咱们上面的这个成果是在 <App> 组 件内的所以渲染是在 index.js 之后的，故能够读取到过后设置的信息，因而就不会呈现 undefined 了。

5. 实现关登陆一次后，敞开浏览器仍旧能够间接进入 dashborad 页面

这个其实非常简单，在之前写好的路由表里写一个判断语句即可。
关上

引入咱们的变量

次要的代码就是这里，通过判断memoryUtiles.user.value 也就是变量里是否存在用户名，来抉择主页出现哪个页面。

让咱们来操作一下，在浏览器输出localhost

能够看到浏览器间接跳到了 dashboard 界面

至此，对于登陆的性能基本上实现.