00:00
看一下咱们注册只是先写了一个最简单的步骤,那咱们最好是什么?先验证一下,先验证也就是如果两个密码不一致的时候,我们才去,呃,咱先就验证一个吧,其他如果验证的话,看接口给我们提供的东西啊,否则对吧,验证如果验证都通过了,你可以写多个,否则预过对吧,最后前边的没拦住的对吧,也就是如果都呃条件都成立的,那我们就能都不成立的对吧,那我们就可以执行到这个再去注册,那我们这里边验证有个密码对吧?密码但是这个里边在用户信息里边,所以呢,就user info里边的,呃,Password密码,如果它不等于,不等于user info里边的什么,这个确认密码有两次密码输入的是不一致,那两次密码如果不一致。
01:00
的话,那我们怎么提示它对吧,那我们不能说用加va热T弹窗,这就太土了,清了吧,像这种弹框和氢提示,我们在这里边就是呃,组件库里边是有的,你比如说我们可以用两种方式提示他。这两种都是经常用的,一种是消息通知的方式,那消息通知的方式可以是比如说基本用法对吧,就是这个直接加一个这个括号消息通知就行了,但是前面必须这个得导入啊,因为它不会自动引入的,这个组件不会自动引入的,因为它不是说属于模板的那个,那个内容不用在模板页面里边加的,所以需要得先引入,然后再使用它,一种是这个,然后还有一个是以T开头的轻提示提示。哪去了,哪去了。这件听提示。
02:00
这个轻提示,那这种是什么样的呢?才有成功的提示,就这样,A成功一个对号,有失败的提示,一个叹号对不对,有加载的提示,这样有文字的提示等等,对吧,还可以自定义的这样的图标,看自定义的图标都可以啊,加载中,然后展示顶部,展示底部都可以啊,那咱们这个如果是成功的话,那咱就用成功的提示,比如登录成功,咱们用这个成功提示,所以这两个组件。咱们需要需要导入一个是。这个。嗯,轻提示用这个这两个必须得先导入啊,然后还有一个咱们需要导入谁啊导入。消息提示,消息提示刚才那个。那开头的。这个消息提示。这两个他直接括号就行,那个加个成功的词也很好记啊。
03:02
这两个都给你用一下,那我们失败的话用这种对吧,直接加红色的字就行,所以如果失败的话,那我们在这块呃。NN这个对吧,使用呃,这种not Fi提示,那我们在这块直接输入这个啊,两次密码输入啊,不一致不一致对吧,你后边加上点点点或者叹号什么的都无所谓啊。把这个还是缩小这个。这会过来,然后你看我输入用户名哈,嗯,111随便写一个密码这块123只你没判断长度,当然这里边你可以判断长度,必须得带多少多少长度啊,两次密码不一致,咱们提示一下。啊,这这个他先提示这个这个因为在走先走的模板啊,然后哈111a.com。
04:05
提交你看两次密码不属一致,就提示了,根本就没走下边对吧,那走下边,如果走下边儿了,那咱们也得判断是否是成功还是失败,对不对,那我们就可以通过,呃,这个里边。那判断一下,如果res里边的stauss得加date了,Date因为它基本上是一起的,它里边date里边的,然后呃,你你可以看下边的提示啊,Date下边什么什么的,对吧,然后里边有个stats用不用加data加上吧,一会不行的话,咱咱们再说,如果这个状态码等于什么201的时候,咱们才是成功201对吧,这个时候咱们是成功的,如果是成功的,那我们干嘛呀,我们可以用to。
05:03
这个轻提示对吧,然后调用它里边Su成功的这个这里边加上,那咱就直接写上什么注册成功对吧,注册成功就行了,它就会有一个这样的一个一一个提示啊,有一个这样的提示注册成功对吧?那如果这个是等于二幺,那其他的不等二幺,那就就是什么,就是注册失败对不对,那注册成功之后别忘了一件事,我们得把什么这里边不双向绑定吗?我们把这里边的密码和确认密码清空对吧?不然的话,它一直存在这个表单里边啊,所以呢,就把这个user info里边已经成功了,这个密码就别让他保存这框里了,这样别人一来通过什么其他的方式一粘贴就可以能看到这个,所以把这个确认密码咱们等于空,因为双向绑定的,你这么一设置之后,它这个就是空了,然后呢,再把谁呀,再把呃,User info里边的密码,当然了email什么。
06:04
想做做成空也行,但能留着你看,这样的话,假如我现在注册一个成功的,呃,注册是一个成功的,比如说呃EW123,然后密码EW123456,然后这块再来一个确认密码EW123456,这得一致了对不对?电子邮箱E艾特福点先你看,记住这个用户名,下次登录。这现在不用鼠标,先放这儿吧,你记不住咱再重新注册一下。你看用密码是不是成功了,但是轻提示没给我们。这个青提是。诶。应该提示一下啊。提示一下,应那就是清除了没走这里是不是这个data多余了,因为咱打印的时候,你看这里边直接就是什么,就是STTS对不对,再试一下,嗯,Hello ew,随便来一个啊,Hello e。
07:17
Hello ew,然后这是电子邮箱是呃,Hello,嗯,艾特福e.C提交。你看注册成功有这个提示了,对吧,这成功了正好没有这个,你看下边打印的对吧,它带不带这个date,因为数据当中是is date对吧,这里边你看不带date的。对吧,然后你可以判断如果错误的话怎么办,还能获取到错误消息,同样注册的时候如果有错误的话,那在哪写,不是在这里边写,OK,你直接在这里边再来一个catch。OK,从catch里边,这里边我们才能呃,获取到如果有错误的这个这个消息,然后判断ER里边的呃里边的Rep report report忘了咋写了。
08:13
啊到你自己写吧,一会那个错误的话,会咱们会专门单独的去做啊,这忘了写了,呃,Report report里边的那个状态码,如果是前面咱看到的是4G几代是嗯四二,那就是什么参数错误,参数错误的话,有这个错误信息,你可以把这个错误信息读出来就行,OK。错误信息读出来就可以啊,一会我教大家怎么读,通常不在这块写啊。这样的话,我们这个登录成功了,登录成功,那我们可以想办法怎么着提示登录成功,不是不是注册成功啊,注册成功之后再留在这个页面没什么意义吧,对吧,是不是一般都注册完了,直接让他跳到成功页面啊,然后呢,你不用说马上就跳转,那一个提示都没有,咱可以隔个一秒钟,比如说set time out对吧,然后这里边我们加上一个处理方法,然后呢,比如说一秒钟,只要注册成功一秒钟,那我们到。
09:15
跳转跳转,那我们就得加上嗯,I port导入从呃VE路由里边导入谁呢?导入导入use路由这个。把这个拿过来,把这个拿过来,路由路由拿过来。在这吧,嗯,Cost ru等于呃,等于等于use,这个把路由拿过来,然后我们在这里边设置路由,呃,你让它跳转到ror路由里边,咱们说用push对吧,然后直接跳转到。
10:02
用这个吧,P pass让它跳转到哪啊,跳转到log音,这样我们一登录成功,直接就转向那个地方了,对吧,比如说再注册一个hello,嗯456。密码哈喽456确认密码哈喽456,这个用户名随便写的,不好记呀,哈呃456艾特福呃ew ew.C。提交注册成功一秒钟,诶你要这么看的话,正好有个登录页面对吧,咱现在看不着,但是的确是跳转过来了,都登录页面,登录页面咱们因为什么还没写呢,对不对,那现在咱们就写一个,呃。登录的这样的一个一个过程啊,登录的一个这样的过程。那在写登录的过程之后,这个错误处理,如果有错误信息授权也好,或者什么错误也好,这个错误信息我们应该写在哪,怎么去做,对吧,咱说这个东西咱们先把它先先研究了啊,错误信息先研究了,不在这写,不在这写,因为在这写的话,所有需要授权的,那你都需要在这块来,那咱们再一点点来,在哪写在哪呢?那我们在这个请求服务器的时候,所有错误返回咱们统一写,让他用统一的一个提示的地方写在。
11:35
你看这里边儿不有这个拦截嘛,对不对,你看响应拦截再回来的时候,响应拦截再回来的时候,是不是有一个有一个错误专门处理啊,对吧,所有的有错误的都会经过到这,所有的数据回来都会经过到这儿,对吧。都会经过到这儿,所以在这里边是不是统一写这个错误信息,咱们就可以啊,所以统一写这个错误信息,那咱首先要做什么呢?如果也用那种轻提示或者是消息提示的方式,那我们必须干嘛,我们必须像,因为在这里边虽然是一个GS文件啊,都说了。
12:16
这两种提示。这两种提示它不是在模板里用的,就哪都能用对吧,它是一个纯JS的一个东西,所以呢,我们把它可以在我们这个里边。可以在我们这里边直接怎么的加上这个对吧,那你这块我们就可以用到这两种提示了,所以在这里边想提示这个消息,那我们得先把这个错误这个拿过来,所有的错误都会经过到这就和我们在这块直接写写catch是一样的啊,写catch是一样的,但是不用每一个都写OK,所以统一在这写就是,嗯。根据根据什么返回,返回的错误状状态根据返回的错误状态统一。
13:21
统一提供错误。嗯,错误提示,统一错误提示啊,那我们就得看一下是不是得根据状态码获取统一提示,那我们是不是就得找到这个什么呀?呃,状态码啊,对吧。那找到这个状态码和这个错误消息,那我们看一下通过这个ER所有的在这里边一定是不是直接这个ER清楚吗?ER我们直接打一下er.ROOG在这里边,你看一下状态码在它下边的哪个里边,那我这里边随便输入一个用呃,用户名hello,嗯。
14:05
Hello 456对吧,密码哈456。456是不是我输入过这个hello喽,456,然后艾特福e w.cn对吧,提交一下你看。S。是不是就统一的一个。这个。阿西奥斯这个错误了,请求失败是不是422对吧,422,你看这里边有一个什么。直接咱们从哪个里边获取呢?你看response re POS里边这个里边它会有什么呢?你看里边,呃,会有一个,会有一个date,你看date date这里边有两个部分,一个是什么,一个是错误,有个错误ER对不对,错误呢?它这下边是个数组对吧。
15:04
因为有多个错误邮箱已存在,如果提示为什么是数组,有可能还提示其他的消息,有可能还提示其他的消息,OK,看看这个层次关系,然后里边是不是状态码。对吧,状态码是不是这里边都有啊,对吧,那如果有错误,咱们不用提示别人什么422433,咱们提示提示错误信息就行了,在错误信息里边,它是一个数组,数组第一个这email对不对,那有可能有其他的。是不是都有ER,所以呢,我们就按照这个格式,把这个错误信息咱们写出来,OK,你看怎么写啊,呃,咱们是EE,呃,这个里边有一个re po,呃,Re p n s。啊,错了又错了又错了,Res。
16:02
呃,Post是不是它这里边的,咱们再往下找,它这里边是不是date对吧?Data date下边是不是有什么有咱们要要的是谁啊,要的是不是这个,呃,EER是不是找这个,然后E里边有什么,有个email对吧?所以他这里边点email em,嗯,Em mail email是不是找到的email了,Email下边是不是数组对吧?数组它里边这会是标记一个成员不是下标啊数组零对不对,那email数组零是不是这样零就行。就能获取到它对吧幺啊EMAIL0就可以,但是现在。呃,问题是什么呢?现在问题是它提示email这里边如果有很多项,你不是说做统一提示吗?那这个email哪来的对不对,那你看是不是ER下边的什么第一个这样的一个,呃。
17:08
这样的一个一个成员,对吧,那咱们就需要把什么通过一个方式,把我们这个第一个元素这个名称我们给找出来。OK。这里边儿咱们。呃,想办法把这个消息给找出来啊,你看就不叫这个email,那咱们有一个什么呢?有一个叫做,呃,在这里边object是GS里边系统给我们提供对象,在这里边有case。Case相当于什么,获取这个对象里边的所有的下标键,下标键,那我们假如说我们把这个,呃。压点这个存进来。你看就能把元素给我们转换成所有的所有的键。
18:04
你看找到这个呀,是不是这块找到这个哪去了这个呀,对吧,里边是不是有一个麦啊,对不对,就相当于把这个给我们转换成所有的这个键给我们拿回来幺啊,所以这键里边,那咱们就可以通过下边零什么的去找了,对不对,那转换成零,那我们通过这个里边的。谁呀?诶,找到这块只是找到这个,呃,所有的这个键的值啊,找到所有的键的值,那我们干嘛,我们再通过它这个里边的。第零个。就因为把这个是转成了一个数组嘛,第零个找到里边第零个这个元素,然后再找第零个元素里边的第零个元素,对吧,只提示第一个就行,如果有多个email错误啊,或者什么消息错误啊,或者什么错误,咱只要第一个提示的时候,不用说一起给你发回了五个错误消息,你不用说全提示对吧,但你可以可以做一个便利去提示啊,那没那必要,因为其实它有一个错误就知道有错误了,所以不用全提示,然后这里边的错误消息错误的在零,就能找着邮箱不存在零。
19:22
就能找到这个邮箱不存在啊,先把它转换成这个,呃,数组就行了,OK。那这块只是我们找到了这个什么,通过这个找到错误里边的第零个,这个错误的错误的消息,相当于我们通过这个零零,其实呢,我们转换速度只能找到这个什么,相当于email就这一串,相当于找到这个什么,呃,Email,那我们需要。呃,将。这个这块是找这个email啊。找到email。然后我们需要在。
20:02
这个啊,这有点长。怎么找到第一第一个这个消息,然后外边我们再加上。这个。拿过来。通过他你看啊。通过它这里边找到这块,这个是多写了一个找到,呃,通过这个零的关系啊。通过这个下标,我们先找到什么,找到这个。因为这个里边到这个零是能找到这个email,相当于这条语句,相当于这块啊,这块我们写的整体,这里边就是第一个,你看零不就代表第一个嘛,这个错误里边第零个第一个这块相当于找到了一个email OK,然后找email,其实再往下找零,相当于这个零对吧?所以呢,我们这块只是相当于把第一个email找到了,那后边我们再加一个什么,再加个零,是不是就能把这个消息给找到啊,邮箱已存在,那找到消息之后我们用什么用提示,你可以用什么轻提示,这个括号后边我们再加一个。
21:18
括号诶这样就搞定了,比较绕啊,你可以一个一个打印这个数组的值试试啊,你看打印这个它返回的肯定是呃,Email。这块。若曦你可以在。这块点rog,那这打印的肯定是email,然后这会会提示我们同意提示,那现在我们看一下再输入HELLO456,然后这块再来一个HELLO456,然后这我们再来一个HELLO456,然后邮箱再输入一个HELLO456艾特ew.cn你看啊,点击提交。
22:00
哦,这块少了一个什么,少了一个S看到了吗?少了一个S,这块是ers啊对吧,Ers找的是这个。这又得写一遍,太烦了,呃,哈喽ABC,呃,咱456吧,还是456,然后哈喽456,然后。哈喽456这块最重要的哈,456艾特福,然后ew.cn来点提交。你看邮箱已存在,是不是就提示我了,那如果有其他错误,其他错误只要返回状态码的,那他都会根据这个状态里边返回,状态里边都有错误消息,都能把第一个消息传过来,不管这个接口给我们返回来是多少错误,对吧?接口一般返回都是这个错误,有很多的都是个数组的,对吧。那email啊什么什么的不能空,对吧,会返回很多的,那咱只要第一个这样的话,就把第一个这个给他们拿过来了,第一个拿过来了,你看这块返回这个是不是email对吧?就通过这种方式啊,如果想做多个,那你就想办法在这块做遍历对吧,拿到这个做遍历,0123数组长度是多少啊,然后一个一个去提示啊,对吧,你觉得你见过哪个网站一提示对吧。
23:23
就有可能就是这种接口里边的错误的提示,会一起把所有错误提示给你,都是一个一个提示,对不对,你这改完还有错误提示,第二个再改完,第三个就是错误消息,如果你想把状态码也提示也提示出来,那这块连接个状态码就完了,OK,所以根据返回状态提示,咱们这块就把这个事就完成了,那所有接口有错误的统一在这块提示。因为咱们说了得用这个组件,所以前面没给大家再讲,写完截没直接写OK。那个也没有什么案例能能模拟出来,所以呢,在这块直接咱把这个先写完。
24:00
那写完咱下一步咱们就是登录啊。登录登录页面我也不给你直接写了,呃,这个是注册。注册,然后用户登录。登录这个过程。组件也是一样的。拿过来。你看在这里边已有账号请登录对不对,一点击这个是不是就转转登录这块来了,对不对,都唠个音吗。按钮,然后我们到登录,登录过程是咱们一个重点啊。嗯,来先分析一下从上往下。这块还是那个标题栏对吧,这块你可以用那个语法堂都可以啊,这这这没关系,然后呃,上面给一些简单样式,也是有一个这个图片,这个图片我们也按注册的这个。
25:00
注册的这个哪去了,在登录登录。那个。呃,在这儿。拿过来,然后里边儿这会儿返回。嗯,Logo,然后我们在。这个地方。冒号。Logo把这图片换一下啊,这块是用那个里边加一个图片,你这图片你随便加,自己用img也可以啊,没关系,然后这个地方一点击的提交掉这个方法,然后有email,用email做用户名去登录,然后输入密码,这块就两个对不对,然后这块是规则就告诉我们,因为这组件自动验证会看一下我们这个是不是必须要我们必须输入对吧,然后错误的时候怎么提示就加这些东西啊,然后如果没有账号怎么的,直接要我们去注册,点击这个,然后点击提交就会到什么到这个方法里边就这么简单一个对吧,这样的话我们就点提交的时候就会到这来,老给那log提交,提交的时候我们user if就能看一下输入的用户信息,一点提交就会打印这个用户信息,OK,也是用双向绑定做一个数据模型,然后把这个数据模型我们怎么着,我们给直接呃提交过去就可以了。
26:30
看一下这个,呃,这个过程啊,提交过去,然后呢,我们在这个里边。先试一下,你看用户名密码对吧,HELLO456,然后这块再来一个这块得用什么,这块得是邮箱啊,然后ew.cn密码也是HELLO456,但是咱现在没写接口没连呢,U in,诶这怎么打开user info哦,走串了user,呃,Info。
27:08
这样的话,我们就会打印这个UC音符的信息,你现在随便写,现在随便写啊,因为我们现在也没有连接,连接这个数据库,你看AA密码是不是就能拿到了,拿到之后那我们得用什么,我们得确保我们请求的接口,登录的接口,这有登录退出,刷新ton,修改密码,你看都有更改邮箱,什么上传图像头像,它都有这些授权啊,那就看登录访问这个接口,然后post,然后需要接受用户密码对吧,然后返回的值是给我们返回什么,你看这个token对吧,Ton类型啊,过去时间呢,都给我返回token类型,过去时间咱们直接用这ton类型就行了,那过去时间呢,如果用cookie或者什么存的话,它也行,3600秒,3600秒,自己算算多少个小时的就可以了,然后这是套开一个一系列的一个字符串,那如果状态码,这是状态码200是代表成功,状态码422代表参数错误,那同样如果有错误邮箱。
28:08
对空啊不存在呀,对不对,现在统一都给我们提示了,我们都不用管了啊好,那我们先写接口,那我们也写在哪啊,也写在这个呃,User里边,那除了这个呃接口,我们直接把这几个接口写。那我就不耽误这个时间了。直接。直接到这里边粘码找一下有这个登录的接口,注册的接口,这还有退出的接口,访问这个post啊,你看传数据一样的get,然后呢,还有什么得到用户,得到用户信息,这就get方法,这三个接口我们也直接拿过来,简单点啊,这个注册对吧,现在我们就有log个音对出得到用户信息,那我们现在只用这个log音对吧,其他的咱们一会儿再用,在我们用登录里边得导入这个。
29:04
嗯,Import导入,呃,Log from从哪里边呢?从user you,呃,Ne work下边的user对吧?User这里边是不是就能找到这个,呃,Log音这个接口对不对,只有找到这个接口之后,那么我们才可以去做其他的对不对?当然这里边儿也跟注册这块是相似,我们有可能也用到这种轻提示啊。对吧,轻提示,然后登录成功,这个路由啊,这两个是不是咱们也需要啊,在UC呃在登录直接都拿过来,请提示和路由对吧,这边都拿过来啊,然后咱们就重点是写提交对吧,写这个位置,那这个位置我们登录的时候直接调用log音这个方法,直接把谁传进去啊,Log音是不是把user音符把它传进去就行,对不对,然后然后不呃直接写RS这样的话,如果登录成功的话,那我们就看一下这个呃,Token在哪块这个信息re.data呃,Res,因为看接口返回吧,点log。
30:30
嗯,咱模拟一下失败的也模拟一下成功的用户名AAA bbb对不对,提交你看四二对吧,四二什么错误,你可以看到这里边有一些东西消息对不对,再点提交四二,你看是不是统一提示邮箱不是一个合法邮箱,这种提示就不用写了,不用每个地方都写对吧?那我们现在假如是一个成功的成功的,那我们加一个呃U,呃,不对,咱们是叫什么呢?Hello 456对吧,然后这块来一个哈喽。
31:04
456咱们看返回值,咱主要看这个token。诶,又四二呢啊,提示邮箱不存在了,然后嗯,Ew.C。注册你看这块是不是200,诶咋提示200呢,那他就是这个手册写错了,手册我记得提示的是啊是200啊,我记得是那个咱注册提示是201对不对,这提是200,那登录成功,你看返回的东西有什么呢?返回的是不是有状态码200对吧?然后呢,有200,然后在date里边,Date里边是不是有一个token有过去时间,这你是不是3600表是30,呃6万秒,36万秒啊,你可以算算是多少天。找时间,然后呢,Token的类型是不是这个这个字符串,因为授权这个协议有很多种,那个是后端是咱不用管,咱先看接口怎么提示的,作为前端成务员就那么拿就行了,你看这掏看这个字符串2048的很长很长的,对不对,都在这呢,在is data里边这样,那我们现在如果想登录成功的话,我们是不是按照我们前面说的,你是不是得授权过来呀,得授权过来对吧,得把这talkn是不是得保存到客户端,现在已经返回到客户端了,能成功我只要保回到客户端就行了,那我们系统里边,呃,咱们学GS的时候,那会有一个这样的一个方法保存到客户端在里边。
32:33
这个就不答应了,那咱们看到那里边看看,就有一个叫什么,呃,Window对象,Window对象里边有个,呃,这个对吧,Local storage,那你现在如果想面试的话,一定要把这个看透,他是干嘛的干嘛的一个对象,然后还有什么客户端的cookie对象,还有session,这三个要明白它的一些区别,这里边就不多这个东西了,你就记着我用它就是本地存储,能存什么呢?它里边有两个方法,一个是set ATM里边通过键和值去存,还有一个它里边还有什么get get ATM,那通过建就能把这个值ton的值取出来,所以呢,本地存储非常方便,就跟用read啊,什么数据库那些,那咱不多说了,现在就行,然后你往客户端存,你给加一前缀什么都行,自己起个名,要记住对吧,比如说token。
33:28
暗号token,然后呢,保存的就是res里边的。呃,咱们这块啊里边的。Date里边的这个啊,拿过来啊,呃,Data ta里边的这个,这样的话,我们就把token是不是就保存了本地了,下次用带过去就行,OK,保存到本地之后就相当于我们登录成功了,就相当,因为只要是获取到这个状态码,那我们你可以加一个判断啊,加一个判断,加一个判断啊,如果谁啊res里边的参考这个这个。
34:09
没有。嗯。STTS。嗯,Sts如果等于什么等于,呃,它返回的都是字符串啊,200对吧,200是不是就成功了。您不用判判断的,如果失败的话,他不会到这里来清楚吧,所以呢,加不加的判断都行,那最好加上,那如果是成功的,200是成功的,那我们把这个token去呃保存,那保存的时候是不是提示一下,用什么提这个提示一下,这个提示点成用成功的提示USS成功,那我们就加上什么登录成功,登录成功,那登录成功这就保存本地了,保存三万三十六万秒对不对,就保存本地了,就会一直有这个OK,然后呢,我们是把同样习惯性的东西啊,把这个这俩咱们给设置成空,然后通过user info里边的email对吧,再把它等成空,输入的用户名,然后user info里边的密码咱们也给空,这都习惯性动作,因为你都登录成功了,你还留着干嘛呀,对不对,然后呢,我们登录成功,我们。
35:30
其实可以做一个,呃,做一个做一个跳转塞太out,那这里边你想登录成功回到首页还是别的地方跳过来的,因为别的地方失败对吧,需要授权,那就先跳个成功页面,然后你登录完之后还回到上一个页面,回到上一个页面,那回到上一个页面咱们路由里面会有路由加不加加了啊,那这里边我们再把这个路由cost呃,RO路由拿过来,Use呃,路由,然后我们通过这个路由里边settime,我们也是用呃,一秒吧,或者是500毫秒都行啊,因为登录成功就是让它回到原来的位置嘛,Ru tr里边咱们不用pass了,如果你这么写pass直接回到根对不对?回到首页你可以这么写,那假如说我不想回到首页,从哪来的回到哪,那我直接go对吧,负一回到上一个页面。
36:30
就行了,这样的话从哪来就回到哪,那到这儿呢,咱们这个页面咱们就登录页面咱们就写完了,这只是登录,但是其他的授权怎么样还没写呢,对不对,你看哈,咱们应该是从注册页面来的,对不对。从注册页面跳过来的,对吧,那咱们会回到注册页面啊,HELLO456,然后呃,别忘了在这块要输入邮箱ew.cn,然后密码咱们是HELLO4561点提交。
37:03
登录成功一秒钟,你看返回到这个注册页面,这样就登录成功了,OK,那登录成功了,当然了,我们也需要有一些呃,像呃个人中心啊,或者什么页面,我们得需要干嘛,我们得需要。个人中心我们得需要授权才能够去使用的啊,到个人中心,那个人中心登录成功,那我们就可以跳出这个方法,所以呢,咱们还得需要一个人中心,个人中心我们是注册过的,注册过的在里边。呃,将他款保存在本地。呃,登录成功就代码写差不多那个人中心。个人中心。啊。直接拿过来。跟中心也是都是用系统组件啊,这块没什么,呃难点。
38:01
呃,个人中心在。这块。转过来来分一下这个页面上边还是这个模板个人中心,然后呢,这块加一个图片user,先别管它有没有了啊,然后呢,我的收藏,我的订单账号管理,地址管理,关于我们那都到一个构O的方法,构图方法呢,就是这里边写加了一个路由,你看啊,加了一个路由,跳转到这个方法对吧,或者什么参数就构图一个路径,如果你想加参数就加参数,然后呢,我们这里边。有登录是不是,最主要是我们看那个这里边我想加这个退出登录,调用这个方法退出登录,然后咱们退出登录接口里也有了这个退出记录,然后判断它的状态,如果是204就是退出成功,对吧?退出成功是不是将本地的这个ton设置为空啊,对吧?本地ton设置为空,然后呢,Set time交好秒再回到登录页面,就这样,就这意思啊,个人中心其他的就是咱们这里边Li列表,用户列表,这就是一个简单的一个样式了,然后都跳转到相当于一个一个菜单,你比如说现在我的。
39:16
你看个人中心就类似这样,OK,那后边的其他的得有一些,呃,个人中心的一些其他信息,我的订单呢,我的收藏,但是其他的你看跳的这块,这些页面咱们都没写呢,你可以去跳转,现在就主要退出一点退出。401。嗯,需要API授权才能退出,你看啊401,因为咱们现在还没写什么,还没写这个授权,什么叫授权,就是我得拿着看好这个这个接口啊。现在咱们虽然写退出,但是退出接口他就需要这个授权了,退出接口就需要这个什么授权了,你现在想退怎么的都退不了,对不对,因为你他不确认你是怎么的,你是登录的用户对吧,所以你现在却退出不了,所以呢,这个时候我们要退出不了授权也好,或者什么,那我们就得授权,那怎么做授权,怎么做授权。
40:16
记着咱们是不是刚才咱们看的是响应拦截对不对,那这里边是不是还请求拦截呀,请求拦截咱们在这里边是不是开始做这个注释不去道是不是talkn呢,对吧?那所有的请求的时候,对吧,就是你出门想上去逛街也好去出门你不管到哪块去,你一出门的时候,你是不得手里得带点东西啊,来把token带过去对吧?出门上班你带着公文包就相当于这样,用什么带着呢?用头吸吸给带过去。OK,同新带过去,那带什么过去咱们想在talkingn过去,那talkingn已经存到本地了,那我们在所有的地方都能获取到,那么就costs的to,呃,KN对吧?呃,KN啊,Token,把这token拿过来,然后从window对象里边有个呃,本地存储里边咱们是有get这个对不对?还记着,我让你记着这个咱们起的字符串名,你叫什么都行啊对吧,不一定就叫token,你叫哈,叫ABC都行,只要知道是一个相当于一个变量名,那它存储的这个返回来就是那套N字符串对吧,你可以打印一下,点rog,就是那一大堆字符串,OK,那拿回来token如果没有,它就是空字符串,空字符串就是假,如果有的话就是真。所以to kn如果是授权的对吧,也就是token在本地有存储拿过来的,那我们干嘛,我们就需要把它拿过去,通过这个conig投信息,希nig DR hier投信息,对吧。
41:49
然后我们需要授权,需要什么授权呢?需要通过他授权对吧,然后我们找这个首页里边你JWT。
42:00
文档说明。文档说明里边,你看需要通过这个。需要通过这个啊,这个拿过来,也就是它调用头里边的通过对吧,这个授权这个里边对吧,通过它,那通过发动头这个信息,它这个信息我们需要有什么呢?再看文档,它需要有这个字符串,这个字符串空格后边的token啊,别忘了它需要这个类型,所以呢,我们加上这个类型,再加上一个什么,别忘加空格,然后再加上我们获取的ton,这样的话,任何请求服务器他都看本地有没有token,有token就会按住这个拿过去,拿给服务器,然后服务器接入这个就像我们。刚才看到这个退出也好,对吧,就相当于有这个带过去了,这样的授权就通过了,OK,那现在你看我们加上这个之后,我们再回过来再看一下这个,我们现在再点击退出。
43:06
你看就退出成功,是不是又回到登录页面啊哈喽123,嗯,不是不是123,那是456,然后再在哈456诶。你看邮箱不是一个合法邮箱啊,然后艾特艾特艾特E点心。那登录成功对吧,你看咱从个人中心过去的,是不是他又回到了个人中心,现在你点退出怎么的就可以,呃,可以退出了,OK就可以退出了,这就是我们请求拦截这个地方去有的,那除了这块请求拦截,如果有错误,由于有错误,什么错误呢?你看这个,咱们看一下这个,呃。状态码,其实授权这个很容易啊。
44:00
登录就可以做了,然后咱们看一下这个里边。再看一下状态码,如果有错误,你看401就是未授权,那所有未授权的咱们应该怎么办?是不都得让他先登录啊,而不是就提示个错误,你页面上看不到,刚才咱们是提示错误页面看不到对不对,假如说错误对不对,所以呢,你看在响应拦截这个错误,这里边咱除了这个有错误消息,这是返回其他消息,那个401没授权的时候,那我们这块其实是可以这么做的,如果谁啊E里边的re,这个里边T,它的状态码咱们也得用一下,如果等于401的时候,对吧,就是所有都没授权呢,那没授权怎么办呢?咱们来一个轻提示吧,用他的用失败的对吧,骑示一个失败,那告诉什么,让你请先登录去,因为你没有授权,你防不了这个对吧。
45:05
有错误就告你先登录去先授权OK,然后让这个路由路由路由没导入啊,你路由可以在很多地方导入啊,就哪块用导入哪块,然后v UE router,然后这块来一个,呃,U SE router,拿这个对吧,拿这块,然后我们可以。呃,导入去之后,我们可以再想创建的地方,对吧,创建这个,呃,我在这创建也行,嗯,诶这个。这块我们不用这么了,我们想要,因为这个不是在模板里边,不是在setup里边清楚吗?不是在setup里边,那这个request的上级目录是谁?上级目录是不是network,上一级目录现在是出了network network下边是不是有个ru下边的什么index对不对,那直接写到这就行,它会自动找这个,然后里边就会应它有一个路由,Ru这块得这么想,因为不是在setup里边,不用set up API,这样呢,我们就直接找到路由,怎么还给我个错误呢?
46:22
就先不管了,一会咱咱们再写啊这块,因为这块代码这块咱们用啊,然后ru用这个咱们现在去写,OK,要知道这个路由怎么用啊,因为那里边直接存的就是路由这个对象,那咱们直接用路由对象,比如说呃,P sh pass直接到哪去呢?直接呃PA直接让他没有授权吗?落个音,这样的话,我们访问任何接口的时候,访问任何接口的时候,如果有错误,如果有错误就告诉他怎么办,就是如果这个错误啊,单独这个错误就是都没登录的,那都给他转登录的,你比如访问购物车访问什么对吧,那那些假如说那这是访问接口级别的,因为request是请求接口的,不是访问的页面,也就是咱说了这些里边这些需要认证的访问这些接口。
47:17
对吧,也就是这里边接口只要有这个的。这有这个的啊,对吧,他没授权的,那我们就是没登录的,都需要先先登录就可以了。你比如说得到用户信息啊,或者什么这些都需要怎么的,到这来就可以了,这下边怎么有个错误啊,没错误,这是刚才写的过程中的错误,这样的话我们点退出也好,或者什么登录也好就可以了,你看退出。救助成功对吧,救助成功现在你看我得点个人中心,当然个人中心我们现在还没有什么没有获取,呃,需要这个。获取的。这这个这个消息对不对,那我们就需要在什么,在个人中心的地方。
48:06
个人中心,个人中心user这个地方啊,不是不是。这个嗯,这个地方我们获取你看。这块猪饲掉的。那得到这个用户信息。上面这块得到这个用户信息,你看如果不是登录的,你得不到用户信息,对不对,用户名密码这些东西也没有,如果登录的你才可以,所以呢,在这块我们先得到的用户信息,这个现在得到用户信息,你必须得需要干嘛呀,看一下得到用户信息找一下。找一下的用。嗯。就是这个,呃,前台前台个人中心,呃,用户详情是不是请求这个get是不是需要先授权,如果没授权的话,是不是得登录,那现在我们回到这个页面,你看现在是登录这个,我现在点击我的。
49:08
请先登录,你看用户名,什么都没有。跳转跳转,怎么不跳转呢?未读属性push写错了吗?不是在在这里边。Root。RUU,诶,这没错啊,Ru,返回这个,它怎么能告诉我没读到这个呢?在这。上目录下network下边的RO不是不是不是上级目录,是除了network,除了network有个index不用写啊,这个不是方法,是直接对象,直接对象的话,那我们就直接怎么呢?直接这个对象就行了,因为我们那那个把它看成方法了,所以这个现在你看没有登录,提前登录,现在访问个人中心,用户个人中心告诉我什么,你看提前登录。
50:17
是不是马上都登录啊,下边是不是401提示对吧,就看不到个人信息了,就是这样,假如说我们访问需要授权的,你没有授权,那都给我们跳到登录这块,包括咱们这些购物车页面的时候,对吧,如果没登录一点击马上先让我们登录点击收藏的时候,你比如说我们假如说想做这个收藏在哪呢。在收藏收藏,你看收藏。我的收藏,或者是访问我的收藏是不是需要授权对吧,访问收藏和取消,你比如说在商品详情的页面,你加入收藏对吧,你没登录你点击,诶不行了,为什么不行了,因为。
51:02
他就给你跳转到登录页面了,对吧,因为你访问的接口的时候没授权,所以所有访问紧急接口的时候,统一在这个里边做文章,这是为什么咱们封装网络请求的原因,OK,这是封装网络请求的原因啊,它都会有错误去跳转啊。只要是需要授权的,你没登录都不登录的时候,他就不到错误这块了,直接该怎么做怎么做就行了。嗯,登录个人中心现在没问题了,然后我们再试一下,假如说登录成功,嗯,HELLO456艾特ew.cn,然后HELLO456啊艾特ew,嗯,算了算,Hello,哎呀别着急,456。提交登录成功对吧,到这页面你看是不是,诶怎么没获取到这个用户的信息啊,这已经是200了,200状态你看哈,456这些都有啊。
52:05
看一下用户用户用户。找到。啊,这res错了,Res点儿date,因为我们看一下刚才看到这块得访问的是谁啊,是不是得date里边咱直接这块是is啊date拿过来。那就有了,是不是昵称HELLO456这个对吧,这是默认的图片啊,然后想修改图片的话,咱们再做一点击头像修改对吧,地址编辑就可以顺序往下写了,这就是一个登录过程。当然咱们还有一个呃,登录过程没有写,那咱们后期再再往下写怎么写对吧,就是我现在是访问接口级别的,没有授权的,那写完了对吧,但是访问页面级别的咱们还没做。只是接口,假如说我直接访问我的个人中心,你看我现在退出登录,其实我还是能访问到我的个人中心的,你看只是一晃让它到登录对不对,那咱们能不能在路由级别上,我的就是判断,通过这个路由判断怎么的,你没有登录的,就这页面都不你访问,而不是访问到这个页面,这个页面在请求接口的时候跳转。
53:19
不是在访问这个页面,在请求接口的时候,你看刚才就是那一瞬间是不是已经执行到他了,而这块儿访问他的时候是没授权转到登录接口,对不对,那我们能不能在访问这个路由菜单的时候。就告诉我们不能登录对吧,那是在路由里边再判断一个授权,一个是接口级别的,就是模板里边请求接口的时候的接口需不需要授权的,要不要访问一个级别,是访问页面级别的,你到哪个页面,比如说订单页面也好,购物车页面也好,我的页面也好,地址编辑页面也好,是不是都是登录之后才能做的事儿啊,那这些页面在路由层面上请求的时候,就要跳转的时候,我们写在那个里边,OK,那在路由的导航首位里边去写就OK了。
54:09
男人在寿险能记下了?
我来说两句