00:00
大家好,这节课我们来完成一下退出登录的功能啊。啊,首先。找到退出登录所在的这个地方,看它是,呃,就是说他原本脚手架请求的一个方式,然后再把它改成我们自己的啊。来找一下我们的文件,然后这些就都先关掉了啊。还是从头给大家找一下,呃,他这个位置是在头像的这个下拉的这下面对吧,那经过我们刚才就说之前这么多的一个文件目录的一个熟悉。我们可以直接找到它在这个公共的组件里面,全局的头部,哎,头像的下拉。这里面是不是。嗯,有这个。退出登录在这儿呢,是不是好。退出登录啊,然后它这里面啊,去匹配这个logout。在上面。这边判断如果K等于这个log out退出的话,然后是调用了这个啊,使用这个dispat,就使用model,调用这个log里面的loging out清楚了吧,那我们要去写这个退出登录,肯定也是去改这个logo login model里面的log out方法来我们找一找,直接看到model。
01:11
找到login model里面的log out方法,哎,在这呢,我先把注射给写上啊。嗯,退出登录好。嗯,退出登录呢。嗯,我们先把这些他自己带的代码,我们先不看,先按照我们自己的逻辑想一想,我们退出登录要做什么啊,请求API啊,退出登录对不对,然后是API,如果返回了这个啊成功,我们就是在删除本地存储的。Talking和user INF是不是这样的啊,那为什么一定要请求远程的API去退出登录呢?你如果仅仅是删除了本地的这个talking和user音的话,那服务端存储的这个用户的这个talking其实并没有被销毁啊,并没有让他去过期啊,我们这个登录的话,它是就退出的话,它是有专门的退出的接口的啊在这个。
02:11
认证API里面看一下退出好,当我们退出的时候要请求这个地址,这样的话它就给我们,呃,会在服务端也把这个talking给销毁,这才是一个合理的一个流程啊,不是说你直接把本地的这个talking和user in for删了就完了啊,那这个肯定是不完善的这个功能啊,我们按照我们的流程先写底下的,先不管它。来,那既然涉及到请求了,是要请求API对吧,它肯定会存在一个异步的一个情况,那所以我们利用这个生成器的这个特性,我们把这个函数啊加上一个星,嗯,这样的话。加上这个性之后,我们把把这个函数呢,就是变成一个生成器,配合这个生成器的这个液的就可以来以同步的方式去写我们的。写我们的这个方法,写我们的这个代码。啊,把它的参数给上,第一个参数不需要啊,那第二个参数我们需要一个call一个put是不是。
03:06
那实际上这个put我们也不需要啊,我们不需要去操作这个状态,我们直接就用Co码就可以了,来在这里去,呃,发送请求,获取我们获取我们的呃结果啊,Response等于。靠。访问哪个方法呢?访问退出的方法啊,那我们看看。Service里面我们有没有定义退出的方法,Log里面啊,明显是没有定义的啊,这一个获取验证码的方法,这个不要。啊,我们把这个注释给写一写,这个是。执行登录啊,执行登录。啊,获取talking,好,接下来再来写一个方法。Export默认暴露ay nc。
04:00
三个写,再来写一个。Out啊,退出的方法。退出我们就不需要参数了啊。把这个写写啊。退出登录好,这时候我们要return一个request,看一下手册,退出要使用什么请求方式,使用post。点post,我们可以直接这么去写也可以啊,把这个请求的方法放到第二个参数里面,那我们直接是点post,这样啊省事,因为我们不在不用去携带参数嘛,好请求哪个地址呢?就是这个地址啊,不要API。请求它,我们就能完成这个退出。好,接下来在这个model里面使用靠来访问这个方法,当然这个方法现在是没有的,我们得从这个service里面。找找这个service啊,在哪呢?在这啊log service里面去暴露出来啊,这个log out这个方法啊,然后这些不用的我们就先删掉了。
05:00
好,接下来。请求他就会。完成一个退出啊,我们看看它的返回的一个状态码,返回的是一个204,就是请求成功对吧?啊请求成功的时候呢,我们这边是没有这个sta响应的啊,除非你失败的时候,他才会去捕获到这个错误的一个状态码。所以我们直接判断是否请求成功就可以了啊。接下来。直接啊,这个先写上,嗯,那先写这个吧。删除本地的存储的talking和user in for使用。Local storage,如果你想全部删除呢,可以直接用这个,可如果只是想删除某一个呢,可以使用这个Rim item。我们使用这个吧,删一个talking。
06:02
看一看这个talking,我们怎么定义的这个东西啊。好,再来删一个,由此音符删除这两个,然后是重定向啊重定向。嗯,一般退出之后啊,重定向呢,我们就给它重定向到这个登录页就可以了啊,它下面这个这个也是这么做的,只不过它有嗯。呃,获取了一个回原的一个,就是说radio的一个地址,但我们其实我们不用这么麻烦啊,我们直接把它重新用到这个登录,这就可以来replace log啊。这样就可以了,好。来,我们来验证一下啊。啊,再同中捋一下,在这个头像就说啊,头部这里啊,我们点了这个退出登录的时候,当我们点了这个退出登录的时候呢,啊,注意这里面这个我们menu这个菜单,它有一个on click啊会调这个on click,就是on menu click click,然后在这里面我们匹配这个K,如果等于就是当我们点了。
07:04
这个退出登录的时候,因为他的case这个log out嘛,那我就会执行这里面,这里面是使用这个dispatch,然后去访问了,就说是调用了这个命名空间为login的这个model的啊,Log out方法啊,那我们在这个方法里面呢,看一下在这个model的方法里面。访问了退出这个,哎,请求这个方法啊之后。呃,就是退出成功之后,我们删除了本地的这个talking和user,当然我们这个判断比较简单啊,如果大家想写的完善一些的话,你要根据这个真实的一个状态的情况去,呃,再多加一些判断条件,那这个我们先简单写一下啊,之后就是。销毁完本地的talking和user之后,重新下好,那我们把这个没用的删掉之后。来浏览器中测试。啊,刷新现在是好使的啊。那我们来退出,退出登录。
08:00
诶已经退出了对吧。好,那我们再来登录一下super me123123提交。诶,这就登录成功了。看到了吗?啊,但是。嗯,虽然退出和登录都好使了。那个我们是不是还得。就是说把一些能优化的地方给给优化一下啊。那首先优化什么呢?把这个这个名字我们看看对不对啊,我们找个地方来打印一下我们获取到的这个数据。在上面,嗯,不是在这个user model里面。这个啊,Model里面user model里面我们来打印一下这个user。看一下用数据到底是什么。啊是对的啊,这个就是内幕就是它可能数据库就是返回的就是它,嗯。
09:01
嗯,头像也没问题,那接下来呢。我们再来看一个优化的地方,就是说我们登录的时候,登录成功之后没有消息提醒。然后退出的时候呢,也没有这个楼顶,你看我点了退出也没有这个。楼顶。我们把这个优化给加一下,比如说。嗯,先看一下这个退出登录,它还有一个问题啊。啊,这个是代理的这个问题,这个是请求成功了啊,这个是退出成功了204。好,那这个就先不用管了,他有时候确实API会访问,访问出问题。把这个lo打开。那接下来呢,就是我们登录成功的时候,给他加上一个消息提醒,哎,这边弹弹一个框登录成功。这时候找谁找,肯定是找这个登录的这个model啊,在这里进行登登录的,那登录成功的话呢,是在这里对不对,所以我们在这里来提醒啊,提醒登录成功。
10:04
那我们使用谁呢?使用message吧,我感觉那个message要比较好看一些,Import message啊,From ad登录成功之后message点啊,Success。写下登录成功啊。同样的,呃,退出的话也给他加一下吧。在这个请求成功之前,我们把这个。消息给他提醒,加上退出成功。来,这时候我来刷新一下啊。我们先看先测试这个登录啊。然后123123来提交。有点慢。登录成功对吧,然后加载这个数据,然后我们打印的这个数据也有,接下来我们来退出,退出登录。啊,也退出成功对不对,好,接下来呢,呃,我们把那个。
11:01
就是这还有一个loading效果还挺好,但是我们退出登录点了,好像跟没反应一样,我们把这个loading也给加一下。来找一下啊先把。User models的这个输出给给删掉啊,Log给删掉,那找到头像这里,哎,我们在这里去调用的login的model执行的退出对吧,那我们在这个。呃,这个model里面啊,在这里面来加上这个loading啊。嗯,我们来看一看使用哪个loading啊,来找一下手册,找一下这个NTD里面啊找到。这个message啊,其实message这里面呢,就有一个这样的一个loading,比如说这样的一个情况,我们就用这个就可以啊。然后看看怎么用,它是直接调message的load loading方法。然后。它有一个返回结果,那在调这个返回结果的时候呢,就会让它隐藏啊,那我们就来使用这个message。因为这个message呢已经引入过了,所以在请求API之前,我们把那个呃,Loading给加上。
12:05
Message啊,Loading里面写我们的文字啊,退出中大几个点,嗯。之后用一个变量来接收一下。嗯,漏了。哎,因为这个变量结束之后,我们调用这个变量的话,这个它就会隐藏,哎,就是我们退出成功之后。我们让他,嗯,实际上是。呃,无论成功或者失败,我们都应该在最后让他去隐藏啊,调用那个方法就可以让他去隐藏。啊,这个退出成功的这个提示消息呢,我们放到这里面,放到这里,放到在最后,就是在清除完这个cookie之后,我们再给它弹出退出成功这个位置调整一下。来验证一下我们的loading有没有效。回到这里啊。现在来刷新一下啊。
13:01
来我这里,我点击退出登录。可以看到有效啊,然后再登录一下,我们再来测试一下提交。好,登录成功,然后再退出。那这个loading加好之后啊,我们就退出登录也基本上就是完成了。好的,那这小节先到这里。
我来说两句