day13【微信扫描登录】/03-尚硅谷-谷粒学院-登录前端整合（1）

就是下面按照流程我们写代码，首先我们来到还是这些都是前端，都是前端代码，后端接口都写过了，首先它的第一部分咱们先。写个详细的注释啊，就是我们的第一步，我们就是调用接口进行登录，然后登录之后呢，返回我们的token的这么一个字符串，这是它的第一步，也就是我们对应图上的这步完成了，刚才咱们刚写过，然后做到之后我们看第二步。第二步做的事情就是把你第一步返回图文字符串放到咱的库译中，也就是把获取的这个图文字符串放到。Cookie。里边去，这是第二步操作，那我们来写一下这步来看怎么做啊，这个肯定是字符串，用response.data.data token，通过它的名字。得到，然后他怎么放到cookie中的，给大家说一下啊，首先第一部分按照刚才写的，你需要在你这个就是项目中下载这么一个插件叫JS cookie，这是必须的，不下载他做不到，然后下载之后呢，在页面中做调用，就这个写法。

Import cookie from，这个必须要有，你要不有的话，后面没法写，这个特别注意啊，我这里强调，因为之前班上的同学需要这个时候，这句话经常忘了写，忘了写的话，后面再用cookie一直报过错，说cookie没有定义什么cookie找不到，所以这句话不能少啊，然后写完之后，这其实就是JS里面那个cookie对象，把它引入，咱用cookie可以往里边放数据。那我来放一下啊，做法很简单，Cookie中有方法，这个方法。叫什么set，通过set往里边放出去，那怎么放，咱先大概浏览一遍啊，然后就一次性写完，注意它的做法啊，首先里边有三个参数，第一个参数就是你的cookie给它起的名字，第二个是它的值，第三个是它的作用范围啊，主要有三个参数，那咱们下面给他来写一下啊。

三个参数，第一个参数就是你给cookie起个名字，咱们可以这么理解啊，这cookie也是一个key value，一个结构，就是它有名称，有值ad一部分，我们给它起个名字，那名字我就跟课件中起一样了，我这叫鼓励token。这是第一个啊，第二个加上你往这个cookie中放那个纸，就是咱的token，我这纸就是它把这个拿过来啊，这是第二个，然后第三个有它一个作用范围，就是一个叫doin domain呢，咱需要加个大括号，里面加一个叫in啊，Do VIN，我给它复制啊，省得我敲错。倒卖。后面加上你的那个就是作用范围啊，主要有三部分，这样的话，咱把这个token字符串就放到了cookie中，然后他在cookie中的名字叫古丽token。

这个啊是咱们的这个写法，我这给大家具体写一下啊，第一个参数。啊，就是第一个参数。是你那个cookie中那个值的那个名称，然后第二个参数是具体那个值，第三个参数。是它那个作用的一个范围啊，前两个好理解，就是名称值，那第三个什么意思呢？给大家解释一下啊，不知道各位是否记得啊，这应该是在扎外部阶段的知识啊，那他什么意思呢到闷。是不是有欲或者范围意思，他就表示啊，我这cookie在什么样的请求中才会传递，也就是说啊，因为我们现在呢，都在咱的本地，我用的都是不是都是local house，而是它就表示只要你的访问地址是local house，那我这cookie都可以进行传递，但是如果你是别的地址，比如我写一个什么什么172，什么点168.1.1，那这个时候我这个cookie值就不会传递，它就表示你cookie传递的一个作用范围，比如咱们都是local house啊，这叫岛内。

只要你都是low cost，那值都可以传递，假如说你是别的地址，那它就传不了啊，这称为等位，所以这样的话，这第二步完成了，通过这行代码把这个cookie值，就是把这值放到了cookie中啊，咱完成，然后写完之后咱看第三步。第三步怎么做呢？这个位置呢，咱需要创建一个拦截器，拦截器中做的事情是什么呢？判断cookie中有没有值，有值的话把它放到head中，为了咱后面能调到，所以咱们需要写个拦截器。那拦截器怎么来做，给大家说一下啊，因为你要这么理解啊，拦截器它要拦的是什么呢？是咱们当前的所有请求，而不是某一个请求，因为里边要做登录的这些判断，那咱们怎么拦到所有的请求呢？咱就需要找个地方啊。

大家看这个方法，就是API中的捞印中这些方法，然后你看啊，每个API中的这JS文件中，咱引入的是不是都有这个东西，所以咱就可以把拦截器写到这个位置，在这个蕊快的里边写上咱的拦截器啊，把它写到这位置。这是我们的做法啊，那咱们把这个我们就来写一下啊，就是拦截器写到这个位置，那咱们来到这个文件，就是YouTube中的request。这个位置在里边，我们加上一个拦截器的这个代码，这个拦截器的代码不需要各位去手敲边，咱们用的话各位直接复制可以了啊，待会给各位也把结构写一下，然后里边具体的核心内容我就直接复制了，因为结构是固定的。那大写一下啊，怎么做呢，还是这种结构。

你看啊。我这个axls对象的名字是不是叫service啊，这个名字是随便写，比如说我叫A，那这里叫A啊，这是咱们写的有点E叫service，这是我们的axls这个对象，然后咱们根据因为这个每次请求用的都是这个对象，那咱就写一个叫做service。点上一个就是一个关键字叫intercepts，就是一个叫拦截器，应该是正题啊，就是它有一个提示啊，Intercepts后面我们加一个叫request，点上这个叫use。这是它一个写法，然后加个括号，那它表示什么意思呢？就是现在在你每次发送请求中使用这个拦截器啊，这个命名很规范啊。每次请求中使用你这个拦截器，在我的AXLS里边做这操作啊，这个是拦截器这个结构，然后在里边我们就写它那个具体步骤就是你做判断，然后做操作，这个啊我就直接复制过来了，各位写的话不需要你敲扁，直接拿过来可以，主要就是。

这个部分啊，就是request的拦截器。把这个咱先给它复制过来啊，就是刚才我写到的，然后咱们看一下啊，在里边的，在每次请求中使用这个代接器啊，就是你蕊块中使用，然后它里边有个箭头函数，在这位置主要做出判断，判断怎么做，大家看啊，刚才咱们向cookie中放置用的是不是set，而这个过程中咱要从里边取值，咱们取值呢，用的就是get get中加上你里边那个设置的名称，我叫鼓励ton，根据名称举这个值，如果这个值存在。那这样代码它的含义就是写一下啊，把咱们获取出来的cookie值放到我们的hi里边去，因为咱要根据hi的取里边那个数据，然后查数据库，最终用gfp那个过程做到。

所以里边这个过程啊。这个我写个注示啊，判断cookie里边是否有这个名称，是这个鼓励token的这么一个数据。如果说有的话，那咱把库值取出来，放到这个开中啊，最后给它re退，这样的话，咱们把这个拦截器就做到了啊，就是这么一个基本过程啊，所以各位把这个至少能看懂，然后能给它改出来，就注意一点啊，这个名字跟你刚才设置名字必须要一样，然后这里边你放汉中的值，就这些名字啊，可以随便改都可以，只是说你这两边要一样，假如说你这个叫A，那这里边也叫A啊，这个名字就是你再把它的值放到he中，我he中比如就叫token了。但你换成别的名字也可以啊，所以咱们现在把第三步做到了。

就是写了一个拦截器，在拦截器中把这个cookie中的token值取出来，放到咱的handle中，为了咱一块调接口使用啊，这个过程完成。然后完成之后呢，下面再来看他的第四步。我写一下啊，这是。第三步，创建拦截器。然后做操作，然后下面来看第四步，第四步怎么做呢？然后还要回到这里边来啊，就还是在这个方法中，我们写第四步。写下啊第四步。然后第四步要干什么呢？给大家说一下啊，因为咱们现在把这个token的这个字符串我们也得到了，并且在得到之后呢，咱把这个字符串也放到了我们的handle中，所咱下面做的事情是什么，咱就去调用咱们那个接口，然后根据我们的token字符串把用户信息得到。得到用户信息，为了咱们最终这个显示，这就是他的第四步。

那咱来写一下啊，我们就是调用。第二口。根据token获取到用户信息，它是为了我们首页面的显示。这个啊，就是第四步，咱需要写到这里边啊，因为我们在发送请求，每次请求都会判断cookie中有没有值，有值的话放到head中，所以这个hier中会有这个数据，那咱就发这个请求。那我来写一下啊。然后这个请求还是调咱们这个log in API中这个方法。在方法中呢，咱们来点上，刚才咱们定义这个方法，就这个get login。右侧音，它里边不需要参数，因为咱们放到了hi中，我们来一个点赞。加上一个response。箭头函数，然后通过response把那数据取出来，就是咱的用户信息获取出来，获取之后把用户信息也放到咱的cookie中。

写一下啊获取。返回到用户信息，然后也是放到会里面去，那咱给他就写一下啊，跟上面这行代码基本上一样，我用它快速改一下啊。首先这是放到库中，咱给它换个名字，比如说名字我就跟我课件中起成一样的名字了啊，我看课件中叫什么，我这里也叫这个名字了。呃，我就叫这个古力U3啊，咱也叫他。这是我们起的一个名字，然后起完名字之后，咱需要把那个。返回的那个用户信息得到，而用户信息在我介口中叫user info，我们给它得到啊，就这位置user侧info，最后加你的对应范围，这样的话把用户信息就放到了我们的cookie中啊，主要这个过程啊，当然课件中我这有单独写了一步，你直接这么写一样的啊，这样的话可以放进去。

嗯，那我也我也这么写吧啊，我这么写没有错啊，咱给它也写一个值了，Log in info，等于我们的这个值给它提到外面来啊，然后这里边加上一个叫做this.login info。这个啊，给它拿过来啊，就是都一样的啊，所以这样的话，咱把里边的第四步就完成了，就是根据你的token字符串获取到用户信息，然后获取完用户信息之后，把用户信息也放到咱的token中，我这名字就叫做鼓励U3头啊，就是里边的六过程啊，跟那一模一样。谁打扮完成啊？然后这个大家注意啊，就是我现在这个方法中的做的肯定是登录，包括你看啊，在我登录过程中，首先我先做这个第一个调用判断用就是手机号密码是否对不对，如果对的话，返回那个脱N值放到cooky中，然后我再做一个判断，就是调用这个接口得到里边的用户信息，当这些呢都做完之后，比如说这页面中这些都做完之后，咱最后是不是肯定要跳转回到我们的首页面中啊，在首页面中是不是显示，所以最后咱要做一个跳转，就是回到我们的。

首页面种啊，那我们给它就跳转一下啊。咱给他最终回来啊。我直接就是把这个。复制过来啊。然后强调啊，可以跳转怎么写，有多种写法，第一种写法也可以用咱们昨天那种写法。就是这种写法。用路由跳转，这次点root.push pass里边你写个斜杠，它就首页面这么做没有问题，但是咱们可以用这种方式，我现在又换一种方式，这种方式呢是Java中的写法。也是外阶段的知识啊，就是你用一个window.location.href，它就表示直接去地址栏中请求这个斜杠，然后它就能回到我们的首页面啊，跟你的这种写法是一样的，没有区别啊，只是换一种写法，所以现在我们这么做，把这个登录的这个方法就完成了，里边咱们现在把前四部都写完了。

这个啊是我们写出来的，然后过程我们再看一遍啊，最终咱写最后一步。过程就是咱们先就是点这个登录的时候，我们先调用接口，根据你的手机号密码做一个这个接口的调用，调用之后如果说登录成功，返回通文字符串，咱把通文字符串放到咱的空气中，然后放完空气中之后，我们写了一个拦截器，拦截器中做了判断，判断cookie中有没有数据，如果有的话，把这数据放到咱的head中，就为了调接口，因为接口中是从head中取值啊，就是咱们GWT中。是这种效果get hi，所以咱要这么来做。因为这个拦截器它会让你每个请求都去执行，所以每个请求咱都做这个判断，当这个做到之后，咱们下面再去调一次接口，根据你的token字符串得到用户信息，因为在第四步之前，Header中已经有数据了，所以咱们调用得到用户信息，我上面有个对象就叫log info，最后啊。

咱们把得到的用户信息也放到咱的库域中，就是为了首页面显示，最后再跳转到首页面，咱做一个最终的显示就可以了，所以它主要是这么前四步是这个代码啊。咱们把它就写出来了，这个啊过程各位要知道啊，稍微要麻痹一点啊，但是各位必须能给他做到，因为在实际中这种方式是经常用到的啊，基本上做的都是六过程。所以说就像我之前说的啊，你别看是个登录登录功能的，咱可以做的很简单，就是一个用户密码做登录，当然可以做的很复杂，比如咱做这个就是比较符合实际的场景，在实际项目中登录都这么做。

比如说各位以后啊，你在公司去工作，一般来讲啊，你刚到公司中，你的项目经理或者你的领导可能给你分一个任务，而这任务呢，一般分的可能不是特别复杂，而很多就是这个之前班上同学啊，到公司里面做的第一个任务。各位知道什么任务吗？大部分同学做的都是登录或者注册啊，大家可能很高兴，说我做个登录可能多么的简单，但是你不用高兴啊，有时候登录可以做的很复杂，咱们这种方式就是很符合实际一种方式，所以大家把这过程必须要知道啊，可能以后你到公司里边做的第一个功能就是做登录，而做的可能就是我们这种流程，就算不是我们这种流程，它的过程应该都差不多。给各位啊，这要给他多豪去写写啊，我把这个代码给大家截过来啊，然后咱写最后一步。别搞啊，我先拿过来。

这个啊，咱们刚才写到的啊。这个500。这个代码。好这个啊，就是关于刚才的登录，然后另外还有一个那个拦截器，我把拦截器啊给各位也分过来，就是咱们写的。这个部分啊，拦截器的部分。因为拦截器要判断库隙中有没有值，如果说它里边有值的话，那把这值放到咱那个hi里面去，就为了调接口使用啊，所以咱们现在这么一个过程。这是它里边的前四步，这么来实现。然后这个做到之后呢，咱们做最后一步，最后一步做什么呢？就是在首页面中把数据显示，也就是说你登录之后，这个位置肯定不显示，登录显示你的用户的昵称，还有用户的头像，或者说用户的手机号，还有头像等等这个内容。那咱们啊，写最后一步啊。我们来看一下啊，怎么来做。咱先看页面啊。

希望大家能想到啊，就是我现在比如说我这里边输入了手机号，也输入了密码一点登录，它执行的就是咱们刚才写那段代码，而执行之后最终咱们也写过最后一行代码，咱是不是要跳转到咱的首页面中，就是写个斜杠，就是他会到咱的首页面中。而到首页面中呢，咱就会得到用户信息，那怎么得到呢？因为刚才我把用户信息是不是放到了cookie中了，那我们从cookie中把值取出来，是不是就可以做到啊，所以咱们就这么来做到在水面中从cookie中把值取出来。那咱来写一下啊，咱们看怎么来写。首先第一个啊，各位要知道啊，咱首页面它的结构是怎么样的，咱再回顾一下啊，我在这个框架咱第一天用的时候说过，因为咱的结构中呢，它里边头和尾是一部分，中间页面又是一部分，而头和尾是哪里？

是不是这个default，它中间页面就是这个index，所以咱们现在登录部分是不是在头的信息中啊，也就是在我们的default里边，所以咱们做这个显示需要来到咱的default页面，在default页面中做这个获取数据做显示啊，这个我要知道啊，Default是咱的布局页面，就是你的头信息和尾信息是在default布局页面中。那咱们下面啊，来到我们的底的页面中，就是在lay中的这个页面，然后写这个最终这个获取数据代码。咱们把这个做一下啊，那我们看怎么做啊，就是现在呢，我先啊。来到我们里边的。就是JS部分啊，摆到下面，然后在下面呢这个位置啊，因为咱们现在要做的事情就是就是从cookie中把这值取到，所以咱要用到cookie，也就是写刚才这个代码cookie点这个。

就是get或者点set set是设置值，Get是取值，那咱就把这个先引入啊，我引入一下啊，加个import。Cookie from加上你那个cookie那个地方，我从里边复制过来啊，其实就是。把这个引入。这各位要注意啊，这需要引入。然后引入之后呢，有一个地方，咱刚才少了一个步骤啊，这错误就不演示了，错误肯定是报这个找不到什么地方呢，你看蕊块的主。这里边咱是用cookie，所以在request中啊，把这个也需要引入，就是request里边加个import cookie from加这个这cookie啊，这个不能少，刚才咱是少了这个步骤啊。看我的课件中，就是在这个块的里边。也需要他啊，这个也是必须的啊。咱们把它引入啊，然后还有一个组件，这咱暂时用不到，我给他也先拿过来啊，省得后面忘记。

就是IUI中那个消息提示的一些东西啊，现在主要用这个GUCCI。这个不能少啊，然后咱们回到这里啊，把这个cook引入之后，下面有它这个结构，那我们在结构中，我们来把那结构写一下啊，咱来写一下结构中呢，我们肯定是来一个叫做date。然后date里边呢，加上一个退啊，就是定义它的变量初始值，然后再写一个叫create。在你页面选之前执行，然后最后再来一个叫methods定义，我们的具体方法啊，肯定是有这么一个结构，然后结构中，比如我们给它做这么一个定义啊。咱先定几个变量，比如说第一个我就来一个token啊，因为咱们后面要用到这种token字符串，然后第二个咱要得到用户信息，我就来一个叫login info啊，就是登录之后的用户信息，用户信息呢是个对象，然为了后面显示，然后对象中一些属性，比如说你什么昵称啊，手机号等等啊，那这个我就从课件中复制了啊，咱找到。

下面啊。呃，就是这些啊。所以这些后面咱们会用到这些属性值，比如说ID啊，什么A。什么昵称，包括什么瓦的头像等等啊，这是我们定义的初始值啊，就定义出来了，然后定义之后呢，在下面我们来写个方法，方法里边呢，就做这个从cookie中获取那个用户信息。啊，创建方法，从cookie里边获取用户信息，那我们来创建一下啊，这个方法比如就叫show。O。就是显示信息，然后方法里边呢，咱做法就是从cookie中获取这个信息。那怎么获取？希望各位知道啊，咱往里边放的话，是不是用这个set来放，那我获取的话用的肯定是这个。

Get，然后get里边呢，加上你那个key的那个名字，咱看我刚才的名字，这个名字古丽U3特，那咱把这个拿过来啊，这样的话就把这个数据得到了，然后得到之后我给他做个赋值，比如来一个Y，然后我叫这个呃，就是user啊，或者叫就叫user s点啊得到这个数据。这个我们就得到了啊，当然给大家说明啊，这里边有这么一个特点啊，就是说你现在得到这个数据啊，如果说你去取值，它取不了，因为它本身。是这么一个Java，一个对象的形式，咱需要把这对象做个转换，而怎么转换呢？给大家说明啊，我说的完整点啊，大家注意，我通过后端接口返回这个东西，就是后端接口，比如咱返回这个数据，然后返应数据，是不是一段这次数据，然后咱从这次数据中取到这个值，这个值在我的页面中就得到，比如这个。

Log in for，那咱得到肯定是一段Jason的字符串的数据啊，也是一个变字符串，那在这里边我得到的这个值也是一个变字符串，所以咱需要啊，把这个给它做个转换，转成什么呢？就是我们扎组中那个对象。我写的就是通俗一句话啊，咱需要把这个字符串转换成这一次的那个。对象的形式，这样的话才能取值，也就是说呢，在我Java中应该是这种形式，就是它里边比如说有一个name。然后里边比如说有一个叫这个。啊，假如说叫Lucy。然后这位置，比如说有第二个，然后它叫age，这个叫20，大家看啊，这段数据呢，是一个叫Java组合的对象，或者说这对象，但是我们现在你得到这个值，它不是这个样子，它是什么样子呢？给大家写一下啊，它是这个样子。

然后给他换个引号。就是它的样子是，比如来一个Y，我叫X条等于。这个值。不说各位是否能理解啊，我再说一遍，就是现在我从库中取的值，它是这个样子，也就是说它是一个字符串的形式，单需要把字数形式变成一个G对象，或者说变成一个叫JS的一个对象形式。说的通俗点就是把它这个引号给它去掉，那它就是一个这对象，但是它默认是带着引号的，这样的话，带引号这个值你没法取，因为它是字符串，你通过这个名称，这值取不到，它不是扎va对象，咱需要把这引号去掉，变成一个扎va对象，或者说de对象形式，它是这种形式啊，这是比较特殊一个地方，然后咱怎么变呢？给大家说一下啊，我这里写一下。比如说我们先。

做个判断啊，就这个值，如果它有数据。就是user s tr，那在我们的还是javascript里边有这么一个东西啊，它这东西就叫Jason，点上一个方法，这个方法应该叫pass。TARE。就是这个方法啊，点pass。稍等我给他拿上面去啊，然后在里边呢，加上一个叫u s tr。这样的话又可以把我们的字符串变成一个date对象，然后变成对象之后咱做个赋值，就是this.log in info。等于你的值啊，所以它需要这么来做的，这是比较特殊的地方啊，我再说一遍这个特点啊。它的特点就是咱们现在因为我返回到这个东西啊，肯定是一个Jason一个结构，但是Jason结构呢，咱们通过cookie往里边放，就这个代码中放到cookie中，当然这个结构中呢，在我们前段中，我们看到的都是一种叫字符串的形式，也就是说各位这么理解。

在咱们的Java代码中没有Jason这种说法，Jason它都叫字符串，在前端才叫Jason，这各位要理解啊，后端接口都叫字符串，前端才叫JC，这单返回的是个字符串，也就带这个双引号，而你要取的话，比如的值是有双引号这个值的，也就说它是这种形式，双引号里边，比如你加一个引号，假如我叫A值，然后它值是20，而这种形式呢，咱要取值的话，你通过K这值取不到，因为它是字符串，咱需要把这字符串变成一个这对象，或者说一个扎对象，那怎么变，需要把引号去掉，怎么去掉，在我们的扎中有个对象叫Jason，里面这个方法叫pass方法，因为用这个方法就可以把这个。双引号去掉，然后变成就是不带双引号的这个值，如果说你不带双引号，根据he是不是能取到它啊，所以它是这个特点啊，比较特殊的一个地方，而咱们用它做了一个这么一个转换。

这样的话啊，我们现在这个过程应该就做到了啊，然后做到之后呢，咱们把方法在里边，我们也做个调用啊，就是这次点这个。呃，受音否？你看就这个啊，受音符方法把它做调用，然后调用之后呢，它的特点就是当你登录之后移到水印面，那水页面中呢，就从cookie中把值取到，取到之后，然后在页面中显示，咱就用log in fo把这数据显示到我们的页面中去啊，就可以做到，然后页面咱一会儿改啊，所以大家把这个就知道啊。主要是这个特点，你需要把一个字符串变成这个对象，因为咱们在Java的后端部分，它没有这一次的概念，它都叫字符串，在前端才叫Jason，就是Json对象这数组，而它返回过来的都是字符串，咱需要把字符串那个两个双引号去掉，然后给它变成对象，大家才能解析，才能得到这个数据。

啊，它是这个特点啊。所以咱把这个给他。做了一个说明啊。