day12/下午/239-尚硅谷-尚融宝-用户认证的前端整合以及用户校验的流程说明

好，那我们来看一下，呃，上午呢，我们对这个后端接口进行了一个实现啊，那我们呢，也在我们的swaer这个平台当中，对这个用户的登录呢，进行了一个全方面的一个测试，是吧？啊，我们测试了用户名是否啊这个正确，还有这用户类型密码是否正确，还有用户是否会被锁定啊等等这样的一些场景，那么这个后端接口，呃，这个测试完成了之后呢，我们就可以进行前后端的一个整合了，那么所以前后前端的整合呢，我们需要看前端的代码在哪进行整合，那首先呢，我们要知道这是个登录页啊，所以呢，我要找到这个log in.view啊这样的一个页面，然后呢，在这个页面当中呢，找到立即登录这个按钮啊，然后呢，在立即登录这个按钮上注册一个方法调用我们的远程的啊，这个阿贾克斯接口啊，所以呢，我们先来看一下我们的前端，那我们就找到这个老电页面哈，在这个老电页。

面当中呢，我们直接就找到这个朗月方法了啊，那具体查找的过程呢，还是就搜一下嘛，搜一下这个立即登录对吧？好，然后在立即登录当中呢，我们看到注册了一个事件叫做log in，好，那我们就在这个地方呢，去调用我们的ex，所以就直接就是this.dollar ex，然后点Dollar post，然后这边呢，我们直接写接口地址就行了，API杠。靠，有for老哈。好，然后接下来呢，啊，这个是我们后端接口的一个。地址了，然后呢，这个接口呢，它还是啊接收一个request body类型的这样的一个参数，所以呢是Jason数据，所以那我们要给他传一个参数，那这个Json类型的数据啊传输的方式呢，就是在后面第二个参数这个位置呢，给它写this.user in for啊这样的话呢，就作为Jason呢，我们就把这个参数传过去了，然后呢，就then啊登完了之后呢，这面就是with bus。

好啊，接下来呢，我们来看一下，当我们。成功的登录了之后，我们要做什么，成功的登录了之后呢，在response当中，我们能拿到我们返回的这个用户信息哈，好，我们先来看一下啊。13766816630123456F12啊，就是咱们在做前端测试的时候，要习惯于把F12打开，然后如果你想看这个network的话，定位到network这块，然后你点立即登录，首先先看一下这个啊呃，就是这个接口有没有被成功的调用，被成功调用这是我们成功的第一步对不对，然后第二步骤呢，就是看功能实没实现，那功能呢，很显然就是已经返回了我们需要的内容哈，用户被锁定是吧？好，那么这个我把这个用户在给他解锁了。

好，然后接下来呢，咱们再来点一下，那这样的话呢，大家看呃，这一次呢，我们这登录就成功了，再点一下啊啊这一次是吧，就返回了我们的一个响应结果，那我们这个响应结果呢，返回了我们的这个优秀info这个对象，优秀info这个对象里面呢，有用户头像啊，用户的手机号啊，名称啊昵称啊，另外呢，用户的类型啊，还有这个投肯信息，好，那接下来呢，我们就。需要把这个啊返回的这个数据呢，存储到我们的前端的库当中啊，尤其是这个token我们要存起来，为什么呢？因为我们以后每一次再去访问服务器端的时候，都要携带这个Ken去访问啊，尤其是针对一些啊需要用户登录才能访问到的页面，我们都要携带着token去访问，这样的话呢，啊，我们的啊这个后端就会校验这个token合不合法，如果这个token不合法，是一个伪造的ton，或者是一个过期的ton，那么就会让这个用户处于一种登出状态，就会强迫强制用户啊处于一种这种登出状态，那也就是说这个token调研失败嘛，啊调研失败那你就直接退出吧，是不是，那这个怎么做呢？后面我们再说，但是呢，现在我们需要把C付存到客户端，好，那么怎么存呢？我们呢，就是在这个地方，我们将它存到cookie当中，所以呢，我们需要在我们的这个项目当中啊引入cookie。

哈，就是这个地方引入cookie，好，这个cookie呢，我们已经做了一个啊，就是。模块啊，引入到我们的项目当中了，所以呢，这个模块呢叫JS cookie模块，那么在我们的页面当中呢，我们就可以通过import，然后我们给模块起一个名字from啊好，这个必须是那个模块的名字啊，就这个名字必须和这个名字保持一致啊，就是这个模块名字好我们把库模块引进来，引进来之后呢，把这个信息呢存到cookie里，Cookie点赛。

User in for，然后接下来呢，就是瑞棒啊点。Response，对，点data.user info，好啊，存完了之后呢，我们直接跳转到用户主页面window.location.hri等于杠user，好，这样就可以了，那接下来呢，我们再来做一个测试。啊，所以呢，在这边呢，我们来输入。137，然后这边呢，我们输入密码，然后接下来呢，把这个点击登录啊。

好看啊，现在呢，我们就已经跳转到用用户主页面了哈，现在呢，就来到了这个用户中心啊，那但是呢，用户中心这边我们还没有去做具体的实现，未来呢，我们会在这个用户中心当中的那填充具体的内容，那接下来呢，我们来看一下。现在呢，我是以这种投资人的身份登录的啊，所以如果是投资人的话呢，这边就是有资金记录，投资记录，回款计划，充值和提现这样的一个导航菜单啊，那如果我这个是借款人，借款人的话，那就是我们先手动的改一下啊，User type呢，它是二的话，就是借款人假设说我们现在的user type呢是二。然后呢，我呢重新来登录一下137668163。好，然后呢，借款人啊。然后呢，点立即登录好，我们现在呢又登录了，登录了之后呢，如果是借款人的话，这边呢，就是资金记录，借款记录，还款计划充值和提现啊，就是这样的几个菜单，所以他根据啊借款人和这个啊投资人的身份的不同，会显示不同的这个主导航啊。

那我们来看一下刚才我们存的这个啊，Cookie有没有存到啊，我们的浏览器的这个cookie的这个键当中，那大家看这面呢，就有一个user in for啊这样的一个P，然后呢，它的value，这个value哈，这个是我们返回来的这样的一个值，当然了后当中呢，它不接受一些特殊的字符啊，比如说引号什么的啊，都是一些特殊字符啊，所以说呢，他就是以这种转码啊进行这个啊转码的方式啊，把引号啊，比如说转成百分号二二啊这种啊，就存到了我们的cookie的这样的一个存储空间当中，所以呢，整个这款就是我们做的一个前端的一个存储了，那当然了啊，我们还需要在这个地方呢，展示用户信息啊，那这个地方展示用户信息呢，就是每次我们在刷新页面的时候，进入到这个页面的时候，我们得先判断一下这个用户呢，是不是登录状态，如果这个用户是登录状态，我们在这个地方再展示用户信息，有可能你前面登录过了，但是用户呢。

他可能把这个cookie呀给清掉了啊，清掉了或者是呢，这个啊呃，我们的这个JWT呢，它是有过期时间的，大家还记得吧？啊，我们可以设置过期时间，那如果呢，它的这个过期时间啊，已经到了对吧，已经超过了过期时间，那么呢，我们也是认为这个用户呢，是没有登录的，所以呢，每一次我们在展示这个用户信息之前呀，都要先啊拿着我们的这个token啊去服务器端去校验一下啊校验什么，就是校验这个投N是不是合法的，这个投N是不是过期的，如果是合法的，并且没有过期，我们再在这个地方显示用户的登录信息啊，如果是不合法的，或者是投给你过期了，那么这个地方呢，我们用户的登录信息呢，就不会展示出来，所以这个是接下来我们要做的内容，就是携带着cookie当中存储的这个抽Ken去服务器端进行合法性的校验，如果校验成功。

我们这个地方再展示用户信息啊，就是这样的一个过程。