day13【微信扫描登录】/02-尚硅谷-谷粒学院-登录前端整合（实现分析）

首先我们先做的第一个功能，就是把咱这个登录的前端部分给它整合出来。包括这个登录过程，咱们把接口已经做到了，咱们现在来整合它的前端，那前端怎么来做，咱们这里边给各位先做一个分析。那怎么做呢？首先呢，我们做第一部分就是你看啊，在我这个页面中，比如我现在点登录进入到动力页面，或者说你在注册之后，咱是不是也可以跳转到动力面。包括啊，咱看一下昨天我们注册代码，咱就看这个地方。登录这个页面。是跳转，而咱在注册成功之后，也是跳转到登录页面，所以咱先把登录这个页面里边的过程先做到，就是我在这个页面中，我可以输入一个手机号，包括输入的密码，然后我一点登录这个过程肯定会调咱们后端的接口，然后把登录做个实现，这是我们先做的第一部分。

然后这个做完之后，当咱们登录成功之后，在首页面中会显示你登录那个昵称和头像啊，在这个主要有两部分，咱先把第一步先做到，然后再往下进行实现。当然这个过程中呢，会涉及到有很多的那些设置和操作啊，咱们一块儿慢慢来分析，那我们先一步步来做啊。这里写一下啊，首先第一部分，因为咱要做登录包要调接口嘛，还是按照咱的流程，所有的第一步操作呢，我就在那个API里边，咱还是创建一个。JS文件，比如我叫这个log in.JS。创建这么一个文件，在文件中定义我们那个接口的这些地址。这是我们做的第一部分，那咱们现在来定一下，把这做到啊，来到API中。

之前里边有一个叫JS，那我们下面再定一个JS，这个JS我给它改个名字，我就叫做login。点DS把这个我们先创建，然后创建之后呢，在里边就定义咱们进行登录的那个方法，把方法定义出来。那咱来写一下啊。首先我们看啊，登录咱找到接口中。就是我们这个u center member controller，它的第一个方法肯定就是登录的这个方法。也就是。这个方法，那咱把它先做定义，就是我们根据传的数据，然后调我们这个方法，最终做登录，登录成功把它的token值返回，就是根据GFT生成那个字符串返回，首先咱们测试接口应该是没有错的啊，那咱下面把这个我们来写一下，就是一个登录。我写到这个位置啊。

比如说我给它起个名字啊，我就叫这个。烙印登陆。然后在登录里边肯定要传入你那个用户的信息，比如我叫u info，在下面写上它那个地址，地址我到里边我就复制一下edu center member。这个是前面地址，然后后面加上那个登录那个名字，我们这个名字就叫做log in。把这个啊，我给他付过来，然后交完之后咱的提交方式是一个POS提交，包括最后我们这里边是用一个request body啊，注意昨天咱遇到那问题，Request body是post提交，所以咱们在我这个页面中，就是这个get里边我写个date，加上一个u in for表示他用Jason数据传递，这是第一个方法，就是登录的。这么一个方法，然后这个定义之后，我们再来看第二个，第二个方法呢，我们不写这个接口，它就是根据token值获取用户信息，那这个方法在里边我们也定一下。

获取用户信息这个啊，是咱们的第二个方法，然后这个方法我给它也是起个名字，比如说我起个名字就叫这个get login user info，获取用户信息。然后这里边咱们写一下它的地址啊，但是大家注意看啊，昨天咱们看到了这个里边呢，它要从这个request里边，就是request的投信息中获取这头信息，一会咱来设置，所以在方法中呢，咱只需要是它的这个路径，然后这request咱一会儿通过其他方式来设置啊，怎么设置，一会会讲到我先把地址复制过来。这是它里边的前面的部分，然后它后面部分叫get member info。

这个我也做过复制。下面是他那个提交方式，就是一个。Get提交这里边啊，改成get，所以这样的话，这两个方法我们在API的JS里边就定出来了，一个是登录方法，一个是根据token获取用户信息方法啊，这是我们做的。第一步咱们完成啊，所以这个各位能给他快速做到。然后这一步做到之后，咱们下面继续往下来做，那下面要做的话，肯定就是在页面中我们做这么一个调用了，就页面中实验它调用的过程，那咱们来啊做一个调用。那我们来看一下啊，我们的第二步。就是在我们的登录页面进行这么一个。方法的调用，那怎么调用，我们来看一下啊，首先第一部分呢，因为咱们现在做登录，所以我们需要在这个配里边建一个登录页面，这页面昨天都创建过了，就是这个捞in.vouee然后创建之后呢，咱们在做登录之前呢，还需要做件事情，就是下载一个插件，为了一会儿使用啊，那我这课件中也写到了，就是需要下载这个插件。

这给大家啊写一下啊。我想这位置在页面中做调用，但你调之前首先做第一件事情，你需要先就是下载这么一个插件，这插件有一个命令，之前咱都用到过，就是这个n PM install，然后这个插件叫JS cookie，就是咱们后面用到cookie来串一些数据。所以咱需要把。这个cookie这个插件下载下来这个啊是我们要做到的。也就是说你把这部分来到你这个项目中，你用终端打开，然后打开之后把这一这个命令直接复制一回车，就会联网把这个插件下载下来。

这一步是需要的啊，我这插件已经提前下过了，各位需要把它都下载啊，就是里边的这个步骤，这个笔中每一步你看我都写到了，包括我在这图上给它画出来了，然后这个下载之后，咱下面啊，在页面中就来做那个最终的一个调用啊，就页面中调度过程。我写第二部分啊。页面的一个调用。那咱们把这个就来调一下，我们找到页面。就是我们的log in页面，因为页面中呢，我们要调用这个就是log in JS中的这个方法，所以咱把这个log in JS肯定需要给它引入到里面来，那我们做个引入。但是各位看这引入啊，在引入中呢，它除了咱们引入这个东西，我先引入一下啊，引port，比如我叫login，呃，API from。

艾特杠API。烙印这单需要引入，而除了它之外，大家看这位置啊，咱需要把那个je cookie也引进来，因为这个咱们一会儿要用到cookie对象，这是咱们刚才下载的那个插件，这个你必须先下载出来，要不然这个肯定是没有。比如说下载之后，你可以到那个common，就是node mode里面看到我们这个插件，比如说咱们找一下啊，我这个提前下过了。PS。Cookie啊，就是这个。这个各位给它下载下来啊，这是必须要有的，咱一会儿要用到cookie做那个数据的传递，这个需要引入，然后引入之后在这个方法里边，我们就继续来写一下它的对用内容啊，那我们看一下啊，在方法中呢，首先第一部分。因为咱们现在登录的时候呢，需要有两个值，一个是手机号，一个是密码，所以我这里边呢，就定义的这么一个对象叫user，里边有手机号和密码啊，这初始值我们就做了定义。

我加个注释。就是用于封装你登录的那个手机号和密码的对象，然后除了他之外，下面还有个对象叫log in for。他为了就是。获取到咱那个用户信息啊，这单一会为了显示使用，现在用的是user，然后写完之后下面在麦中咱就写那个登录方法，也就是我点登录它要调的这个方法，咱把这个方法写下。那我们找到登录的按钮啊，往上找登录的按钮。各位看啊。登录是这个，就这个log印啊，然后在登录里边的有个方法叫submit log印，那咱就写这个方法，在这个方法中做个调用。我写到这个位置啊。

他就是。登录的方法叫submit login。然后在这个方法中，咱就来调用一下我们这个接口，把这做到，那我们来调一下啊，叫log in A片点上咱们刚才的登录方法叫submit烙印。呃，这两个一样的，其实一样可以啊，为了区分我再改一个名字啊，我叫sum lo user啊，跟他区分一下。这个名字，然后在里边呢，传入咱刚才看到那个右侧对象，因为里边有这个手机号和密码，下面加上这么一个就是点赞。啊，就是学校啊，点赞。在里边有一个response箭头函数。这个啊，就是登录的这么一个过程，然后登录之后呢，各位看到啊，在咱们接口中呢，我们登录之后返回的是不是一个token，也就是你用JWT生成那个字符串，所以咱把这token值给它就得到啊，那我来获取一下啊，写一个response，点上date，点上date，再点上一个token，这个得到就是它接口咱们返回那个token的那个。

四串。啊，获取到token字符串，所以这样的话，这就是一个登录的一个最基本的一个方法，咱把它做到了啊，这是一个基本调用，各位知道这个过程啊，一定要特别熟练。然后这个做到之后呢，大家注意啊，就是下面咱看到我们的需求，把这功能我们进一步来写。那咱们什么需求呢？你注意啊。因为我们现在在登录之后，咱是不是登录成功之后就返回到我们的首页面中了，而在首页面中的这位置，咱是不是要显示出我们的用户信息啊，这是我们要做的事情，那这过程大家要怎么做呢？给大家来分享啊，我们目前的一种实现的方式，然后咱们来啊把这做到，这个过程稍微麻烦一点，但是希望各位能做到，因为在实际的项目中基本上用的也就是咱们一会儿要用的这种方式来做到啊，那给各位来分析一下这过程是怎么做到的。

那首先呢，这个代码我们先快速浏览一遍，然后给大家画个图，咱们把它做个分析啊，大家看一下啊，我这里面的写法。各位看我怎么做的啊，你看这个位置啊，就是咱们登录之后得到这个token值，然后你看这套代码，我把ton值怎么做，放到了我们的cookie里边，注意啊，这个cookie没用的话，必须要安装咱刚才那个插件把它引入，然后我们就是把token值放到了cookie中。然后放到库中之后怎么做到呢？你看这个部分咱就需要啊，再去调次接口，根据你返回的这个token值，然后得到我们的用户信息，把用户信息也放到这个cookie里边去啊，咱是这么做到的。

但是这里边啊，有这么一个问题啊，大家看这位置。因为咱们这个接口中啊，有个request，而块里边是不是根据hier来得到这个值，它不是根据cookie，所以我在这个位置啊，我又写了一个东西。这个东西。这个词不知各位是否听过啊，叫拦截器。什么叫拦截器呢？说的简单点啊，咱们比如说我现再发一个请求。然后拦截器呢，可以把启动给它拦下，在里面做个事情，这个这位置啊，加了一个拦截器，在拦截器中呢，咱先看第一部分啊，因为这个咱没有做到，主要咱做的事情就是判断你cookie中有没有这个值，如果有这个值，把这个值就放到我们的hi里面去，为了咱接口能取到这个值。然后这些如果都做到之后，那我们现在在cookie里边就有这个用户信息，还有这个拓信息，最后我们在前端的就是最终的首页面中，通过cookie把这值我们再给它取出来，所以它大体上是这么一个流程。

啊，这过程稍微麻烦一点，然后我下面呢，把这过程给大家画个图，咱来说一下这个代码我们该怎么去实现，最终咱们把代码做到这种方式，在实际中经常都是这么来做到啊，比如说你这个登录之后怎么显示首页数据，然后包括你token怎么生成它的一个完整流程，那我下面啊给大家画个图啊，这过程稍微麻烦你啊，当然各位一定要给他掌握。我写到这个位置啊。这里面就是第三个。我们做这个道路。和登录成功之后。首页面显示数据啊，它这个实现过程的一个分析，把这流程给大家详细分析一下啊，我们看这该怎么去做，那我就直接啊画个图，咱就一步步来写，然后最后咱用代码再把这个流程给大家有个体现啊，希望各位把这过程知道包括啊这过程可以说很重要啊。

比如说以后在面试中，别人可能问到类似的功能，比如问到啊，说你们这个登录或者这个功能怎么实现的，那你给别人讲讲什么，怎么实现，讲的不是说你用什么技术，比如说你说我们用voe用什么接口，不是讲这个，讲的就是我们的实现的流程，所你第一步怎么做，第二步怎么做，第三步怎么做，最后怎么实现，主要就是讲这过程，我下面分析的就是咱们要实现的这个过程啊，那给大家最终来分析一下啊。咱就一步一步来画一下啊。回线画，首先比如说第一步。这是第一步啊，然后第一步我们要做什么事情呢？就是现在我们这一边做的就是。

调用接口登录。返回啊，就是调用接口登录，登录之后呢，它会返回我们的token的字符串啊，这是第一部分，这个部分咱刚才已经写过了，调用登录接口，最终返回一个ton字符串，就这个咱刚写过，然后返回ton字符串之后，咱要干什么事情呢？给大家写一下啊，我就写到更完整点啊，咱把步骤写的更清晰，我们看第二步。第一步就是调接口，反字符串，然后第二步我们要干什么事情的写这位置啊，咱的做法就是。把这个第一步操作中返回到token字符串，给它放到一个地方去，就是我们这个。Cookie里面去，这是它的第二步，把第一步返回到ton字串，放到咱的cookie中，然后它的代码就是里边这个代码向cook中放数据，啊，这个代码一会咱们继续来写，咱先知道这个过程，这是我们的第二部分。

然后这个做到之后，我们下面还有第三步。写一下啊第三步。第三步，咱要干什么呢？小的位置。咱的做法就是在我这里边呢，我创建这么一个叫做拦截剂。啊，创建一个叫拦截器，其实拦截器这个词啊，很多人听说应该都是在后端听说，但是你注意咱们前端里边也有拦截器的概念，所以咱建一个叫做前端的拦截器，拦截器中主要做什么事情呢？我写一下啊，咱做法就是判断我们这个cookie里边是否有这个。Token的字符串啊，就先做一个判断，看里边有没有token字符串，然后下一步操作，如果说里边有的话，那咱把这个token的字符串就放到我们那个就是hier里边去，比如说你的请求头里边。

啊，请求投里边这个啊是我们做的第三步。就是咱要做这个操作啊，而这个操作咱这么做什么目的呢？因为咱们写的接口里边咱是根据token获取用户信息，接口中我是不是从head中取到，就是这位置可以改成cookie啊，只咱一般建议从head中取，所以咱为了这里边能取到你这个值，能获取信息，咱就需要有第三步，就是判断cookie里边有没有透文字符串，如果有的话，把to文字符串取出来放到咱的handle中，这是它的第三步，就为了咱接口能调到，因为接口里边是根据你的hi去数据。主要是这个部分啊，然后它的代码咱也简单看一下啊，就是这部分来接T。主要大家看这判断。你看它的写法啊，就是if cookie.get就是判断cookie中有没有这个名称的值，如果它有的话，就把这个值取出来，放到我们的hi里面去啊，就是做了这个事情，这是第三步。

然后这一步做到之后，我们再看第四步啊，咱往下来看第四步。写到这个位置啊。就是他的。第四步。然后第四步我们要做什么事情呢？给大家描述啊，我们的做法就是根据你那个token值啊，就是根据我们的token这个值，我们去调用咱的。接口，然后根据token获取到你的用户信息，就是把用户信息得到，为了咱们显示使用啊，就是为了首页面显示，这是我们的第四步，也就是对应的代码在我的这个位置。各位看啊，它的做法就是咱们调用咱们那个接口，就是根据token获取用户信息接口，在这接口中，你看啊，我并没有传什么数据，因为咱把数据已经放到了handle中，这过程在第三步做到了，第四步直接调接口得到有个信息，为了钱就是首页面做显示。

然后这个信息最终咱们看到啊，返回这个就是这个叫log info啊这个信息，这个信息我们给它也是放到故意里面去。啊，选这个位置啊，就是根据token调用接口。然后获取到用户信息，为了省面显示，然后这里边就是把你调用接口返回到用户信息，也是放到我们的cookie里面去。这个啊，就是第四步，咱们要做这个事情，然后这个做完之后，最后还有第五步，第五步做的事情呢，就是在页面中做个显示了，那我们写第五步。这个做法啊，小D位置。

第五步，我们做的事情就是在我们的首页面中。显示你的用户信息，而用户信息咱们在哪里呢？是不是在第四步的cookie里边。所以我们就是从。第四步。Cookie里边。获取到你的那个用户信息。然后进行这么一个显示，所以这是一个我们做登录，包括显示的一个基本的过程，我们按照这个流程把这个功能给它实现出来啊，这也是在实际的项目中比较常见的一种实验方式。基本上这种方式用的地方很多啊，当然不排除有其他方式，就是这种方式应该说比较通用，这个啊我们做了一个说明，然后各位我再来把这过程再说一遍，最后我们用代码把它最终做个实现。那咱看怎么做到的啊，这个过程稍微要麻烦一点啊，但是各位要知道这个流程怎么样的。

首先第一步咱们是调用接口，先做登录，然后登录之后呢，因为咱们的登录接口中会返回一个token字符串，这是我们做的第一步，就是咱们把这字符串得到，得到之后怎么做，第二步把返回的ton字符串放到咱的cookie里面去，第二步做这个事情。然后发完库据之后，咱再看第三步，第三步干什么呢？因为咱们最终啊，肯定要得到你的用户信息，就是推进token值得到信息，而怎么得到咱的接口中呢，是从那个hi里边，就是我们那个。这WT的工具类中从he特中取这个值，所以咱们的第三步操作就是把我们库中的值取出来放到he中，但是这里边的实现方式，咱写个拦截器，只要说你请求中有这个cookie中的token值，咱把它都放到开中，用这个实现第三步，第四步，当我们这个hi也有值了，那第四步我们就是根据这个token值调接口得到我们的用户信息。

因为hi中有值，你这里边就能得到，它是从里边取数据，咱把这用户信息给他得到，也就是我们写到这个接口，根据ID查数据库，把用户信息，然后返回用户信息之后把信息也是放到cookie中，这是第四步，最后一步在首页面，也就是我们的这位置显示信息，那咱们显示，因为信息呢在cookie中，那咱们就是从cookie里边把这个信息取出来，在页面中做个显示就可以了。主要这么一个基本过程啊，就按照这个五步操作，咱把这个最终的登录给他做到啊，过程要稍微麻烦点，当各位能给他。治疗这里边每步是做什么事情？所以这个啊，我们做了一个基本的分析。这张图我先保存一下，然后咱们用代码把这功能我们最终实现一下啊。

我写一下登录。前端的一个整合，然后咱们刚才是实现过程的一个分析。我们就做了一个说明。