00:00
大家好,这节课我们来完成一下登录功能,首先把我们的项目运行起来,因为我们有自己的这个API可以用,所以我们不用他的这个Mo,那我们启动的时候。你就不要用那个start。那我们来看看这个。嗯,启动的命令啊。有一个啊,这个start啊,D是可以把这个幕给关闭的啊,或者说我们。直接运行。这个。啊,Start对吧,这个直接运行run div,它也会走这个start div啊,或者说是执行这个start no都可以。那我们就直接啊运行这个低位。这时候我们如果用DV启动的时候,它就是没有呃,这个Mo的啊,这个大家一定要注意。
01:00
啊,用错了,应该是第一位是吧。或者你使用n PM run EV也行啊,我这边使用的。嗯,先让它呃走的,我把它最小化,那找到我们的登录页面。在这个s RC pages login里面,哎,这是我们的登录页面啊,之前我们也对它做过一些的一个经典。嗯,登录页面我们来看一看啊。找到这个啊表单啊,我们从哪开始看啊,从这个form啊开始往下看表单。这有一个。嗯,Perform text,哎,就是我们输入用户名的地方,这个是,呃,有一个perform text.password就是我们输入密码的地方啊,那这个password的这个密码框,它是使用这种点的方式来进行使用的。嗯,清楚吧,啊,那接下来呢,我们需要改一些东西,看一看我们的登录的文档API,在这个认证API里面找到我们的登录。
02:07
呃,我们自己的登录需要的字段名是email和password,就说邮箱加密码,而不是用户名,所以这边我们改一改啊,那比如说啊,从这开始改这个name,就是我们提交的表单的这个字段,我们改成email。啊呃,这个大小自动大小这个就不用管了,包括图标啊,这个不用动,然后是一个holder,就是说。输入我们的邮箱啊。把这个改了吧。嗯。Email。啊,请输入邮箱。我们把这个改成这个啊,这个是place holder,然后这个它用了一个,呃,翻译的一个工具,那如果我们不想。
03:00
做这个国际化,不做翻译的话呢,那就直接。就是给这个place holder,我们写内容就可以了啊,这样就行。好,那么我们就把这个国际化产给删掉,尽可能让代码看起来比较比较简洁。哎,这样的话,大家看起来就。比较好看啊。然后把这个给它改掉。啊,这个。就是说是一个提醒的一个文字是吧,那我们把我们的这个邮箱和密码给写上吧,来找一找啊。看看在哪写的有,在这个说明文档里面有。因为去操作这个后台,我们需要这个管理员的权限啊,用普通用户你是操作不了的,所以我们用这个账号,然后在这里给个提醒。密码是这个,哎,我们在密码这里也给个提醒。那这个改完了啊,密码是password,这个是没问题的。
04:01
接下来看一看啊。这个字段里面的有一个ruler ruler是做表单验证用的,然后是必填,然后当验证不通过的时候提醒消息,它这里面提醒消息呢,也是用了国际化的一个翻译啊,那你如果不要的话呢,就直接把它给。写成啊字符串就可以了啊好。请输入邮箱。嗯,然后下面这个也是请输入密码,我先把这个国际化的都给删掉啊这样。大家看起来比较。比较简洁。啊,那这样大家就看起来比较简单是吧,你看一个呃。邮箱的一个输入框,一个密码的一个输入框,然后它的属性有place holder,一个表单验证的一个规则,对吧,一个是它的尺寸,以及这个logo的一个设置。就是icon的一个设置。啊,然后是它的内膜,好,那我们来看一下我们这个页面啊。来127。
05:03
那个。呃,当我们直接访问首页的时候,会给我们重新上的登录,但是这个登录呢,是原来的地址,我们后来的登录地址改过对吧,我们路由改过,所以这块一直没改。好,那。我们去找到他。重定向到这里啊。把它给改了。嗯,直接全局搜索吧。应该是在这里啊。也就是。我从头给大家找也行,看我们的路由来。Root时,然后需要认证的页面,它会走这么一个,就是说会经过这么一个公有的一个布局,对吧?那这个里面之前给大家讲过,它并不是布局文件,我们这个是布局文件,那这个实际上就是做了一个认证的文件,我们来找找在这个layout里面这个东西。啊,在这里面你看判断是否登录,如果没有登录会给我们充电上的登录对不对,那这个地址肯定不对啊,我们之前的路由登录路由已经改了是不是。
06:04
啊,把这个登录的路由我们给改了。嗯,其他的地方就没了啊,来这是我们再重新请求这个。八零。这时候就给我们重定向的登录了,对吧。呃,这个他会谈一个,就是刚才重对象的时候呢,会谈一个请求,那这个请求呢。是因为他会去获取用户信息啊,那这个我们先不管,到后面我们写处理用户信息再再说啊,我们现在至少你看我们去访问这个首页对吧,后台的首页它能为我们成像登录对不对,那这个登录呢,包括这个邮箱,我们使用这个密码使用这个我们也写好了啊,这些文字都是有的,那接下来。就开始去完成我们登录的功能,对吧?好嗯。怎么完成呢?我们首先诶看一下表单验证是有效的,对吧,那接下来我们输入的内容输入之后呢,我们再点提交的时候,我们要把这个表单输入的内容。
07:05
啊。然后收集起来,收集起来之后干什么?请求我们的登录API。啊,把我们收集的参数传给这个API,然后。如果我们的密码和就说邮箱和密码验证通过这个API就会给我们返回这些数据,看到吧,有这个talking,主要是我们要这个access talking,哎,因为其他需要认证的API。大家随便找一个其他需要认证的API,都要在头部去加上这个gwt talking。买吗?啊,那这节课我们主要的目的就是完成这个,呃,登录功能来一步一步来啊,首先我们得能收集到这个表单的数据,我们打开控制台。嗯,之前给大家讲过这个表格数据如何收集,对吧,好。嗯,还找到我们的登录页啊。登陆页。看一下啊。
08:03
嗯,这个国际化的这个翻译的是这个上面的这个啊,账号密码登录把这个也不要了。好,这里啊,我们来看这个form。Form呢,它有一个方法叫unfinished unfinished之前给大家看过手册,就是当表单的这个,呃,数据验证通过之后。啊,就是我们点了提交,并且表单的数据验证通过之后,就会执行这个finish的这个回调函数,所以我们在这里面。啊来。嗯,就是说这里面就可以收集到表单输入的数据啊,我们把这个数据呢,然后就发送请求,发送这个请求,然后带给他就可以了,对吧?啊,那接下来一步一步来,我们其实在他的这个基础上写就可以啊。它在这里,我们先打印一下,我们输入这个数据啊,这logo。那输入123111,哎呀。
09:01
哎,是不是可以拿到这个email和帕唑的,对不对啊。接下来呢?嗯。我们就不自己重新写了,我们直接在他基础上去改一改就很快的,你要自己重新写会比较费时间,因为他本来的登录就是好使的,只不过他走了慕嘛,我们现在把这个他的慕换成我们自己的API就可以了,是不是啊,接着我们看看这个value提交到了这个函数里面,对不对,就是我们的表单数的数据,像这个函数,我们看这个函数看成啥啊,这个函数。啊。他要干什么?他就是说啊,使用这个dispatch就是调用了login login这个model就是。调用了这个login model,这个是命名空间啊,对吧,那这个model里面的login方法清楚了吗?并且把这个value传了过去,而且把tab还传了过。看到了吧。这个type。是在哪呢?Ta是从这个use log里面。
10:01
结构的这个tap,那其实我们用不到这个tap啊。大家应该知道这个ta是做什么的,对吧,因为之前我们的这个还有一个导航,就是账号密码登录和和这个手机号登录对不对,它这个tap就是区分账号和密码和手机号。对吧,他是在哪来的呢?嗯,他是。就是这里定义的状态,默认设置的是这个account啊,之后还从。这个purpose里面去解构出来的这个呃,Use loggan的一个状态,以及这个type,那use loggan哪来的呢?既然是从purpose里面结构的,对吧?呃,那我们就来想一想,它应该是使用了model model的话是在最底部连接的啊,你看最底部是不是给了一个use loggan,然后是从model里面去拿到的这个loggan,这个命密空间啊,这个model给到了user log,这样我们就可以在这里面去。呃,使用这个啊,Use log啊好,那这个。呃,这个U这个tap用不着的话,我们就把它给删掉啊,那个状态,这个状态也不用要了啊,那这个tap也不用给。
11:05
啊啊,我是尽可能的把不用的都删掉,这样让大家带着码看起来就就就不会那么混淆,接着看下面应该还有一个地方去判断的太谱啊,就是这里。就是它默认激活的这个K,嗯,就是。嗯。就是这个tab,它默认显示的啊,激活的就当前的这个K啊。你把这个删了啊。嗯,把这个删的话,这个标题就没了,那我们随便写一个吧。嗯,只要就是说这里的这个K和它保持一致就可以了啊,我们把它给它,呃,写成这个就行了。当change change的话,它是就是当它切换的时候会去修改这个type。那现在我们。嗯,也不用要这个ta了,那set ta也不要,然也不要,找一找他应该还有一个。
12:07
Set tab的一个方法。啊,之前已经删过了,可能那我们把这个就删了吧。好。行,接着说啊呃。在我们提交完表单数据之后。啊,提交完表单数据之后。啊,就会执行它的这个表,就是说performed unfinish方法,我们把数据给传到了这个里面,在这个里面呢,我们。把这个数据,呃使用dispatch,也是使用model。调了这个login,这个model的这个命名空间里面的login方法啊,并且把表单输的数据传了过来,对吧?那我们来找一找这个方法,那既然是model,肯定去这个model里面找,那在这个login里面命名空间一般都是和文件名相同,你看是找这个命名空间了,对不对?然后在这个里面呢,它调的是哪个方法,调的是login方法,哎,我们来看这个login方法干了什么,Login方法?
13:05
啊,就是说第一个参数对象里面结构出来这个啊,Paylo的paylo的我们之前收过,我们这边如果传了这个参数的话,就会被这个model的这个paylo给接收到,那model的配的接收到以后啊,这个call呢,可以让我们去呃调用一些,比如说发起请求的一些方法呀等等啊put可以将我们的状态啊下发啊,所以它前两步。嗯,把主旨给大家写一下啊,发送请求执行登录,发送请求执行登录。好,发送请求,执行登录。啊,那它调的是这个方法对吧?这个方法是从哪来的,从这个service里面log里面来的啊,我们来看看这个方法,所以说这个地址就要改了,就不能用这个了,要改成我们自己的对不对?来找到我们的登录的API啊,我们改成这个啊,注意不用加API,呃,我们应该是在之前去封装。
14:00
这个初始化项目的时候,应该是对这个request做过一个处理,应该是加了这个前缀的啊。看到了吧,啊,所以我们不用再去。加这个API了啊,请求前缀。好把这个就给关了啊,那这个登录的。这个地址我们就直接写就可以了啊,方式呢也是post。好,那date呢,就是我们传过来的这个数据。我们传过来的数据,之前给大家打印过,就是一个email一个密码,对吧?啊,其实到这里就是这样的一个email啊,然后是我们输入的什么什么,然后是一个密码啊,他说的。就是这样的啊,我们把它给它date字段就能嗯传传过去啊,就能通过这个POS方式传给我们的这个地址。啊,那。这样的话,这个地址就哎,就变成我们自己的地址,那我们来打印一下这个结果啊,打印下这个response啊。
15:03
嗯,好,现在再看一下这个啊,我先随便123123随便输啊。邮箱不是一个合法的邮箱,这个应该是322这个验证啊,我们表单验证这个拦截器也生效了,对吧。啊,那其实如果不是一个合法的邮箱,我们应该都不让他去。呃,发起请求对吧,都应该是表单验证,就该拦截住了,所以我们把这个表单验证也改一改,找到。这里验证这一块啊,现在只是验证了,必填请输入邮箱,那我们。再验证一下啊。验证这个。啊,类型必须是。Email啊,请输入。正确的邮箱格式。好,这样应该就可以了,来看一下。说现象。
16:01
好,现在是一个呃必填,接着我来输入,不是一个邮箱,你看它这里就提提醒了,对吧,那其实关于这个表验证呢。大家用到什么类型去手册去找就可以了啊,就比如说现现在我用的是这个啊type等于email,那都有什么类型呢?其实这个手册。他不是特别好找,怎么来一点一点分析啊,来怎么分析。首先我们是在谁身上用的这个属性,在这个form text啊perform text这上面用的这个属性对不对。那你第一想法肯定是去pro component这里面去找啊这个。表单啊,表单项找这个perform text对吧,好,但是你去找,你在这里面找。你是找不到的。正八经是找不着的,然后你怎么看?来看一下。往上涨啊。看一下这个。这里啊,提了一句话。
17:00
Pro。Form是form item加input的产物。对吧,之前给大家说过,如果这个里面pro comments里面找不到我们要的属性,就去ant里面去找,对不对,好,那我们找找一下,就说在antd里面,我们去找一下这个这个form aem啊。来,先找到这个。附表单啊。我们看第一个啊,第一个它就有验证的例子,对吧,我们展开代码,你看看这个验证的属性在谁身上呢?来rules是不是在这个form.item身上呢?那我们就去看form item的这个API。啊,这样找有点多啊,我就直接。呃,点到API这里,然后这个是form的,那肯定不对,我们看谁form身上肯定找不着,得看这个form item对吧,他身上是不是有这个rulers,我们找一找看在哪。是不是有这一个rules校验规则对不对,设置自然校验逻辑好,那你点此处是查看示例,它是给你看例子去了,那我们真正想看这个ruler的API就点谁点这。
18:05
啊,点这他就这样就来到了ruler的这个API啊。看到这个ruler的am没有好。这下面就是所有我们可以用到的一些啊,我们验证的一些规则。来,比如刚才我们用到这个。啊,Tap看到了吧,首先是看这个ruler的它的一些属性,因为ruler你看一看啊。他是一个对象。对不对,对象里面是一个数组,数组里面又是个对象,并且这里面有一个一个的这个属性,对吧,你看我们用了require,用了message好用了ta,所以说。这边给我们列出来的是它的这些属性,比如我们用到的这个required是否必填对吧,比如说message错误的一个消息。对不对,好,那我们想要其他的类型呢?哎,就用到了这个tap参考,就是说常见的类型有更多的,再点此处参考此处这个时候啊就可以看到,就是说在这个get up上看到一个比较完整的一个类型的一个验证啊,就是这么去找手册。
19:06
清楚了吧?好,又扯远了,继续写我们的代码,我们验证加完之后来继续开始写啊。再来输入一个邮箱艾特a.com密码,随便输入来提交,大家可以看到这里返回了401,并且啊。给了就是说我们这边打印的是。没有得到我们想要的一个结果,是吧,是得到了一个response,那这是因为呢,我们的请求出错了。啊,就是这个这个结果的话,他只能等来就是说那个。嗯。Permit那个的那个成功的一个结果,那这个401明显是出现问题了,而且我们的这个request拦截器已经告诉我们没有权限硬盘对吧,你看这里已经也告诉我们可能就是密码错误了,是不是,那说明我们的密码不对。所以我们这边就没有打印的数据,那我们把密码输对的情况,我们来试一试啊,我们来看一看,呃,密码对的情况呢,要看一下说明文档,这里给我们提供的这个超级管理的账号是so at a,然后我们这边就是把这个一给改一下啊,这时候我们再来提交可以看到啊。
20:11
啊,这个数据。等会之后会打印出来啊,有点慢是吧,那我们重新刷新一下啊。来重新发起请求,在这里输入密码,123123来提交。这里可以看到我们打印出来的啊,这个请求后的一个结果,对吧,诶和这个文档说的是一致的,来登录我们这里是返回了。这样的一个。结果啊,那我们来分析下这个字段,其实我们要的只有什么,要的只有这个。啊,Talking而已啊。啊,因为我们要把talking给存起来,存起来之后在每次请求的时候带上这个talking。清楚了吧,好。来,接下来继续去完成我们的代码。然后这边我们就能拿到这个talking了,我们把这个拿到的这个结果。
21:02
然后呃,给到这里啊给到这里,呃,使用put的话呢,这边我们定义了tab。对应的菜谱就会,诶传给他对吧。在这个呃方里面呢,嗯,他去调了这个方法,那把这个东西传过去,那在这个方法里面看一下是呃设置了一个local storage,那但是我们返回的结果没有这个字段,对不对啊,所以我们就不它了,这个方法肯定要改,根据我们的需求来嘛,啊刚才因为操作代码这个就没了,打印的就没了,那么就不看了,直接看文档也行。也就是说,我们要把它。给传过去对吧,我们在这个方法里面把它给存到local到锐里面。清楚了吗?啊,来改一改啊。那这里面这个判断我们就。呃。先不做判断了,因为我们这边。等一下他这个方法是设置这个这个权限用的,然后这边它会返回一个角色,那我们不动它原来这个方法吧,啊,我们自己去写一个吧。
22:09
Export。啊,或者说啊,我们不在这写了啊,直接在这去写吧,啊在这去写这个就先不要了啊。将talking存入local。Or好,我们直接呃,暂时在这写吧,啊,其实应该再去呃,把它创建一个方法,我们把它给拆分出去啊。Local。Storage set。那K呢,我们就叫啊,我们的这个。Science talking啊VALUE6呢,就是paylo的里面啊,我们这边不是接收个X吗?X里面我们解解解构出来这个pay漏的,Pay漏的就是我们上面方法传过来的这个数据嘛,对吧,这里我们登录的时候过来这个数据。
23:09
啊,就是披露的里面的这个。这个access talking啊,那这些就不要了,这些就不要了啊,其实这个我们不用往下去设置状态,不要的话呢。那这个也不用定义了啊好。呃,接下来这个local storage我们是存进去了,那接下来再去改一下什么东西,就是把我们登录之后的这个重定向。然后这里我们来改一改啊。嗯,这里怎么改呢。这里我要判断一下啊,就是。在他put之前,我们来进行一下判断。因为有,因为为什么呢?因为有可能是呃,存在这个登录失败的情况下,比如说密码错误就是401对吧,所以啊,我们得在这对这个结果进行一下判断啊if。
24:04
这个response。State。啊,等等于。等等于什么呢?我们不确定啊,我们来看一看,打印一下啊,先把它注释掉,我们来打印一下,就是说密码正确和密码错误的情况下,这个response state到底是什么啊,我们要基于这个,呃,这个response space进行一个判断嘛,来在这里。嗯,我们先说一个错的一个情况下啊。好,这个肯定是不存在的。a.com来。当。不存在的情况下啊,它会返回这个401密码错误等等啊。然后。这里呢,我们就要去做一个处理了。也就是。这里对吧,我们要判断它的状态嘛,如果你是呃401啊等等的其他的一个状态嘛,就是说哎。
25:03
没有认证通过,那么我就给给你提醒,然后如果认证通过了之后,我要给你跳转,对吧,跳转到就说你登录成功之后,我要给你进行一个跳转。也就是他下面的这些判断啊,比如说登录成功之后,弹个弹出个消息,然后进行一个跳转啊,取得回源的这个URL,就是说要回跳的一个地址来最后进行啊跳转。啊,但是呢。我们跟他的这个数据结构不一样,我们的状态嘛,不是OK,而且呃。哎,我们也不用去,呃,处理这么麻烦呀,所以我们根据我们实际的情况去判断这个状态嘛。啊,那我们再来看一个,看一个就是说正确的情况下,看看状态码是什么,现在是啊,就是说异常的情况下,我们知道了状态码401对吧,那我们把这个改一改。这个改成A,密码改成正确的。当正确的情况下,看一下状态码,是按底看的。是不是,哎,所以我们就得判断,如果这个状态码啊。
26:04
等等于按底范的,就是说那等等于按底范的时候,说明什么,登录成功了对不对。嗯。登录成功。只有这个登录成功之后,我们才把这个数据继续向下去传递,是这样的吧。否则的话。呃,如果登录失败的话,我们不做处理就可以了。啊,然后登录成功之后,我们再给它进行重镜像啊,跳转跳转到首页。跳转到首页好。呃,我们不做这么麻烦,还就是说把它会回跳到这个来源页,我们只是简单的直接跳转到首页就可以了啊来使用这个。If。这个啊。
27:01
这个不要啊。这个就不要了,我们把它跳到。跳到这个首页啊,使用history进行跳转。那这样我们的登录就完成了啊,登录成功的时候,拿到我们登录的信息。这个是判断是否登录成功,登录成功,那登录成功之后,我们把这个登录后的这个talking,然后给到这个来向下传给这个方法,那这个方法里面呢,我们将它啊存到了这个local storage里面,哎,那存到local storage里面,最终其实这个talking是谁要去用的。是我们每个需要呃认证的请求去用,对吧,那我们之前对request进行过封装,那不可能说每一个都去加,我们直接对这个request加就可以了。这里对吧,那之前我们这个talking是临时写死的啊,那实际上这个talking我们就可以从local storage去获取了,因为我们在登录成功的时候呢,这里会。
28:03
存入local story。来,我们在这里面把它给改一下啊。嗯。Talking等于。Local storage第get item,找一下我们这个K啊,这个talking,这个K。嗯,OK。嗯,当不存在的时候呢,我们就让它等于这个空字符串就可以了,好,我们来怎么验证呢。很好很好验证啊,我们直接登录成功之后,来看一下我们其他的请求里面会不会给我们携带上这个talking就可以了。现在我们来登录成功试一下啊,在这输入正确的账号和密码。Super me123123。登录成功。诶,可以跳到首页对吧?啊可以,刚才是跳到首页了,但只不过是我们跳到首页的时候呢,首页做了一个权限的判断啊,判断是不是登录没有登录,又给我们重定向了回来,那我们等会去改一下这个判断啊,那主要呢是看一下我们这次发起这个请求的这个地方,看一下有没有带上我们的talking。
29:16
好在这里啊,可以看到talking是带上了,对不对,只不过这个地址我们没有去改啊,没有去改,所以他拿的还不是我们的用户信息啊。好,那接下来我们去改一下,判断是不是登录这里,诶我们知道这个路由这里。看一下路由这里是通过它来进行判断的,是不是我来点进来啊,啊在这个里面,在这里面判断的是否登录啊,那我们看看它是怎么判断的啊。他在这里啊,定义了一个is log,然后获取的是当前用户的信息啊,并且这个当前用户的ID存在,那他当前用户存到哪呢?从这个this purpose,大家一看到这种写法就说一个数据从this purpose里面来的,对吧?他要么他就是副组件传过来的,要么有可能就是。
30:05
啊,使用的这个model啊,我们来验证一下如何确定它使用的是不是model,你直接到最后面看看它有没有暴露呃这个数据就可以了,这边是不是给了一个current user对不对,那说明我们这个user就是从呃这个model里面去获取的,对吧?那。嗯,从。这个。Model里面去获取的啊,而且在这个生命周期里面,就是说当组件挂载文笔之后,他去,呃,使用这个dispatch去。调用user秘密空间下的这个发起current啊,这个model去获取用户信息,然后获取到用户信息之后,那这边这个状态啊,就可以拿到这个用户信息,这边就可以诶显示。诶,登录成功啊,他是做了。就是说它是以什么来认为是登录的呢?就是我们拿到了用户信息认为是登录的,对吧,但是我们的这个是,呃,登录成功之后只返回了一个talking,但实际上我们是需要用户信息的,比如那个右侧的那个头像对不对,就是我们页面这边的一个头像,还有昵称,哎,所以我们也是得进行一步获取用户信息的这么一个步骤。
31:12
那这节课呢,我们主要完成了这个登录啊,并且这个登录呢。嗯。这个登录之后的这个,呃,Talking我们也拿到了,刚才我们也看了一下,Talking确实能在这个request里面,我们也能用上,也能附加上,对吧?好,呃,那接下来很重要的一步就是。获取用户信息,哎,并且让这个登录的判断让他能通过,那这节课我们先到这儿,我们在下一节课来去完成获取用户信息的内容。
我来说两句