day12/下午/244-尚硅谷-尚融宝-令牌校验的前端整合

好，前面呢，我其实讲到了，就是咱们即使在前端这个页面当中啊，他你拿到了那个啊。用户信息，你拿到了用户信息之后，也不意味着你这个用户信息就是合法的啊，你要携带着你这个token去后台去做校验，当这个token是合法的，才证明你这个人是合法的一个登录用户，所以呢，刚才我们既然已经在后端做了一个校验啊，这个token是否合法的这么一个接口，那么我们在前端呢，就要去调用它进行校验。所以呢，在这面还是刚才这个APP hier里面哈，我们找到刚才我们显示用户信息这一块，那么我们再捋一下这个流程，首先第一个步骤呢，就是从部位当中获取用户信息，然后呢判断部位当中对用户信息是否存在，如果存在的话呢，我们就直接类点优in号云now啊，然后呢啊这什么如果不存在的话，那我们就把原始啊，有可能这个里面已经存的值能给它清掉，清掉的话就退出就好了啊，那这个就是用户未登录的状态了，好，如果存在的话呢，我们就把这个user ino呢给它解析出来啊，把Jason串呢给它解析成一个对象，然后呢把这个对象呢赋值给他，在赋值之前我们要去做什么呀？要去校验一下这个里面的token是否是合法的token，所以呢，在这个地方首先。

需要校验偷看是否合法。好，this.dollar X点。因为这个里面我们要传什么参数啊，要传那个hi啊，要传hier，所以默认情况下呢，你要直接写这个点写。Dollar get，没地方写hier，知道吧，所以呢，我们要用它一个更通用的方法，就是ex方法，然后里面呢，接受一个配置对象啊，配置对象里面我们可以写URL啊，可以写method呀啊，还可以写head，写明白吧，所以在这个地方呢，我们可以传一个head过去啊好，那这个地方我们就可以写静止，对了，所以呢，我们把这个完善一下，比如说URL，呃，我们应该是刚才的这个地址吧，叫嗯，API Co user for token啊，这是我们的ul。

好，然后method应该是that，那接下来head应该是token。啊，偷从哪来，从user in for里来，所以呢，从这个里面来啊，User in for，嗯，然后呢，点。头好。然后这款呢，就是我们向后台发起一个请求，并且是携带着偷看去发起这个请求啊，然后再接下来呢，我们这个地方呢啊。

Response，我们来看一下response啊，如果能够正确的返回回来的话，那么就证明呢，是校验成功了啊，那有的同学说那失败呢，失败我们有响应拦截器，一会儿我领着大家去看一下那响应拦截器啊，响应拦截器里面呢，对失败做了处理，所以一旦返回到这个N这个地方来了，那么它就是成功的啊，所以这意思点。User in，也就是说我们要把这个this user in for呢，在校验成功的基础上，咱们再复述啊，Can表log叫教练成功。明白这个意思吧，先去做校验啊，然后校验成功了，咱们再进行复制好，然后啊，我们来看一下吧，这个能不能。

传过去，所以呢咱们嗯先进行一个登录啊，然后呢，13766816630，然后这面呢是123456啊然后呢，我先定位到network这块啊看看我这个请求，首先呢进行登录啊，登录完了呢做跳转，跳转完了之后呢，紧接着去调用这个查token对吧，先登录啊登录完了呢啊，然后跳到userc页，跳到userc页之后呢，紧接着做查头Ken对吧？差token呢，我们返回的是校验成功，如果校验成功了，这面呢就展示用户信息，并且呢库费里面存用户信息，整个的这样的一个流流程。就做完了。明白这个意思吧，啊，所以这块呢，是我们对整个的一个流程的优化啊，就校验用户信息流程的优化，那么在这块呢，我再给大家强调一下，就是实际上这个里面呢，会涉及到两个地方的内容，第一个地方呢，就是的请求拦截器里面，我们可以去处理它，不用每一次发请求的时候都携带着它，太麻烦了，你看嗯，我们之前在说这个访问令牌的时候单点登录哈。

有个图嘛，说是以后你每一次client端向服务器端发请球，是不是都要携带的这个头肯呀，啊都要携带这个头看，所以刚才我们做的这件事情就是，诶，我发请求我就携带头看，那未来比如说我充值我要携带头肯，我这个转账我要携带头看，对吧，我投标我要携带头肯啊我这个提现我要需要我要携带头肯，都要写带很麻烦，所以怎么办？把它放在请求拦截器里啊，然后这个地方也是一样的啊，我们实际上还有校验失败呢，那这个地方为什么没有判断校验失败呢？因为我们校验失败的这个流程呢，在响应拦截器里判断呢，只要走到这它就是成功，那我们来看一看这拦截器我们都写在哪了啊，昨天我们讲这个那APP的时候，曾经告诉过大家，像这种环境下呢，我们的。X拦截器呢，会写在这plug in下面，对不啦，有一个X的GS啊，然后这里面呢，大家看啊，这个呢就是请求拦截器了，好，这个呢就是响应拦截器了，好，然后我们来看一下请求拦截器，请求拦截器里面是不是首先从cook k里面取出UC in啊好，如果有了user in for，我们是不是就把这user in for解析出来，然后干嘛是不是放到he里好，所以实际上啊，我们啊，如果没有这个。

请请求拦截器的话啊，如果没有这个请求拦截器的话，那么我们在这个地方。嗯。这面啊，那么我们在这个地方传这个hier呢，还是很有必要的，但是实际上我们啊，其实已经提前写好了这个请求拉接器，那这个地方就用不用传还了呢，其实就不用了，不用了啊，你不用传它，因为拦截器里面帮我们传了，第二就是响应这块，响应这块呢，我们看这个X，这里面有个on response，这个是响应拦截器，响应拦截器里面呢，是不是除了判断等于零是成功直接给这个前端返回响应之外，还判断了一个负211啊，负211是什么？

就是这款。就是这个就叫未登录。啊，就叫未登录，所以呢，在啊这个响应拦截器里面，我们还对未登录进行了一个校验，一旦他没有登录，我们就直接给他，无论你在哪，反正就就嗯给他弹到首页面了啊，然后接下来呢，这面呢，就是对所有其他的错误进行处理，如果是错误的话，我就弹信息，如果是正确的话就正常执行，果是未登录的话，就跳转到首页啊，就是因为咱们这个系统，其实你要是没登录的话，别的页面基本上都是你登录才能访问的页面啊，这就直接跳转到首页，当然了，你也可以直接给用户跳转到登录页，都是可以的哈。

那么所以这块呢，是我们的一个响应拦截器和请求拦截器的一个编写，那这块也是一样，嗯，代码给大家了，大家要知道我们代码是如何走到这个流程的就可以了啊，然后这里面的业务呢，能能够读懂就可以了，那另外两个呢，就是请求，这个是响应失败的拦截器，这个呢是请求失败的拦截器啊好，那么。啊，我们来做一个测试吧，做一个测试哈，所以呢，在这个地方呢，我们先退出，退出之后呢，嗯，我们还是F12。13766816630，然后这面的密码123456，好，然后接下来呢，我们点击这个登录。好，点击登录之后呢，这面呢，就存上信息了啊，然后network这块呢，我们看一下这面就有一个check token check token这块呢，我们检查一下hier hader，他当时在发送请求的时候，大家看叫request headers啊，就是请求头当中是不是携带了一个token过去了啊，所以呢，在请求图当中携带了token，在服务器端呢，我们才能够把这个token拿到并且解析出来啊，这是整个的这样的一个流程，所以到这为止呢，我们前面的这个用户认证部分呢，就说完了。