一.封装各个类型的申请办法
在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界面
至此，对于登陆的性能基本上实现.