day13【微信扫描登录】/13-尚硅谷-谷粒学院-微信扫描登录（首页显示信息）

首先啊，咱先分析一下，当扫码之后到水面中，因为咱们刚才是把这个token值传过来了，大家看一下这个过程咱该怎么实现，怎么能实现出在里边把信息做显示，那我给大家把过程我们来写一下啊，这个过程。咱来做一下啊。首先第一步，因为咱们在我们的首页面的路径里边，是不是有那个token的字符串啊，比如说里边有这部分是字符串，所以咱的第一步怎么做呢？咱先从这里边啊，把这个透明字符串你先给它获取出来啊，就是获取首页这个路径里边的。To的字符串，这是我们做的第一步，把这个先得到啊，怎么得到咱一块写，我先把流程说完，然后得到之后，咱下面怎么做呢？就要做这个微信这过程那怎么实现啊，给大家写第二步操作。

第二步怎么做呢？因为咱们这种方式跟我们之前做那个普通登录是有区别的，咱看一下啊，之前咱做普通登录的时候，咱在登录之后把数据是放到了cookie中啊，包里边有这个鼓励to，还有这个鼓励U3放到cookie中，咱这作的目的是为了在那个拦截器中，它把值放到handle中能取值，所以咱们也需要做这事情。那我们来写一下啊，第二步咱干什么呢？就是现在我们这里边。把我们获取到那个token值也给它放到那个。Cookie里边去，为了咱们就是后面能调那接口取那个数据啊，这是第二步，把这个放到cookie中。我这里写的完整点啊，就是因为呢，我们有一个前端的拦截器，它是判断cookie里边是否有那个token。如果说有的话，那就把cookie里边的token啊。

写一下啊，把cookie里边的这个cookie获取出来，然后放到我们的header里边去，还有这个过程，所以咱第二步就是把我们这个token，咱给它也是放到cook中去，为了咱们后面能调到那个接口。这是他的第二步啊，咱就会这么来做，然后这个做完之后，下面我们做第三步，第三步干什么呢？因为咱现在把它放到了cookie中，Head中有值，所以第三步呢，咱就是调用咱们后端那个接口，就是根据我们的token值。获取到用户信息，把这个得到啊，所以咱们现在主要的过程啊，当然获取信息之后呢，咱也可以按照我们之前那个登录方式，把它放到cookie中啊，但是不放也可以，因为它这过程可以做到啊，包括咱给它也放下啊，不放也能实现，然后把你获取出来那个。

用户信息再给他放到我们的cook里面去啊，这样的话，按照这个过程，咱把这个就是扫码之后获取信息在医院中显示，我们就可以实现出来，主要这么一个流程，那咱们下面按照过程，咱们把代码我们就来写一下，看代码我们该怎么去做。好，那我们来看一下啊。然后咱们看一遍啊，首先第一部分呢，因为咱们要在首页面中把这个值，我们是不是先要取到。但是怎么取到各位注意啊，这取的方式跟之前就不太一样了。为什么不一样呢？也注意这个写法啊，就是咱们啊之前写值的时候，比如说我们是通过ID做修改，用的比较多，咱当时的路径应该是这个样子，比如举个例子啊，比如我们当时路径，假如说。里边有这个值，比如叫。E后面是不是传个ID值，当时咱是这么传的，而现在跟他不一样，咱现在是加个问号是不是名称值，所以跟之前不同，咱之前写法是这么写的，加一个叫。

这点这个root点点ID是不是取到，但是现在这个里边你要这么取，它是取不到的，因为它传的方式不一样，它不是路径直接拼值，是加了一个问号名称值这种形式，所以跟之前是有区别的。这各位注意啊，两个是不一样的，这是直接拼的ID，这是加了一个名称等于的值，大家要取的是根据名称把值取到。然后这个要怎么取，给大家说一下啊，在咱们这个框架中有一种写法，也是一种比较固定写法，它是为了取到你带名称这种值的这个特点，那咱给他写一下啊，看怎么做。呃，我先写到我这个图上，然后再写代码中，它的写法就是咱加上一个叫还是一个叫this，然后后面加的也是一个叫root，这不变，当然后面就不一样了，加一个叫什么query，注意啊，加个query。

这query就表示取道路径中带参数名称这个部N，因为咱们的名称是不是叫token，所以咱加上一个叫点上一个token，这就表示把你里边token名中的值取到啊，这是我们目前写法，就是带这种名称值，名称值的形式，用这个可以取到这点root点。Query点这个名称，这是我们新的写法啊，各位把这记住，专门用来取我们这种现象的这么一个特点啊。然后这个说完之后，下面咱们把它加到我们的具体代码中，那我们看怎么加啊，来聊到这里边，首先第一个当咱们进入到首页面中，在首页面里边首先要进入到的是不是咱们的defat页面，就是这个布局页面，然后在布局页面中它在引入我们的index，所以咱们在布局页面中写代码。

那咱来写一下啊，看怎么写啊，在不页面中大家看啊，当咱们一进入页面create的方法是不是执行，所以咱在这里边去到。因为我们要实现在页面中取值，我们写到这里边E进入页面，在页面渲染之前把这取到啊。那咱来写一下啊，这个位置。我写个注释啊，就是获取你。路径里边那个偷开。它的那个值，那写法就是我们刚才的写法，我再写一遍啊，这点root RO，点上query上token，这也可以得到这token的名字，就是你传那个参数名字叫什么，那你就写什么，然后写完之后把它做个赋值，因为咱有一个变量啊，就是token，然后写一个叫这点token。等于它这样的话，把这就取到了，然后取到之后，咱下面写的就是里边的第二步，咱们把它放到cookie中，然后给它调接口做到啊，那咱写一下啊，那这个过程呢，我把它就写到我们这么一个方法中做到。

写一下啊，比如说咱写的完整点啊，我先做个判断。判断一下啊，就是如果说这个这次点token里边它的位置有值，咱再做这操作，如果它这边没有值，咱就直接执行这个方法，因为咱们在水面中，这值可能没有也可能有，有的话再执行，没有的话按照之前逻辑做到这咱做个判断。就是啊。判断这个路径中是否。有这个投分值，如果有的话，咱再做操作，那比如说咱就在下面，比如我写个方法啊，我先给它调一下，就这个方法，我就叫这个，因为是微信嘛，咱就叫微信。捞印了啊，这个方法掉它，下面咱就最终解决方法，就是我这个过程啊，各位要能看懂，先从你的路径中取到它这个token这个值，就这个值如果说能取到，那我们往下调列方法做咱刚才过程，如果说取不到，那咱还是用之前的流程把这实现啊，就是做这个，下面咱写这个方法。

角这个位置啊。这方法就是。微信。登录显示的这么一个方法。然后方法我们的名字啊，叫这个微信。老。把这个啊，我们给它写出来，然后在里边按照我们刚才的分析过程，把这代码我们最终完成，那这个代码怎么做呢？首先第一部分咱刚才说的，我们要把这个得到的token值是不是要放到咱的cookie中去，也就是把我们的。这个值放到咱的cookie里面去，那再给他就放下啊，咱看怎么做啊，首先这cookie先给它引入，然后有之后在里边咱们放下啊，几个注释把。

Token值放到cookie里面去。咱们上午写过啊，就咱来一个cookie点上在的方法，在里边三个参数，第一个是你起的名字，那这名字我们跟之前起成一样的名字啊，因此所了咱们能显示之前叫鼓励小线ton，现在还这个名字，然后第二个写上你那个值，就是这点OK，第三个加上它那个作用范围啊，应该是一个叫doin。然后加个冒号，后面加一个叫local house。Local house啊。这个我们就把。Token值放到了cookie中。啊，这个啊，这个写法我给它复制一下啊，省得我敲容易敲错啊，写的应该也没错啊，就这个这样的话，我们把它做到了话，然后做到之后呢，因为咱之前登录中啊，还有一个值是鼓励U3，但是目前这值没有啊，大家给它先设置成空，后面咱们做完之后再给它加进去，先给它默认来个值，就是一个空。

这个啊，我们就是做到了我们说的这步操作，把这个。Token值取出来，然后给它放到咱的cookie中，因为咱们有拦截器，拦截器中呢做了判断，如果你里边有值放到handle中，为了咱们能调这个接口啊，所以这个过程完成了，然后完成之后呢，下面咱就开始调用。我们的接口根据你的token值。获取到用户的信息，那咱来调一下啊，因为调的话咱要调接口，所以咱把接口给他先引入进来啊，引入一下啊，加个引port，比如说我叫这个，呃，我从里面复制了啊，咱们刚调过就这个。Low in API from API中的log in，把这个咱先引入。引入之后调里边的方法把这实现就是log in A片。

这位置啊，它里边有一个根据token获取用户信息方法，就是咱们刚才写的这个方法叫get log in u info，把这个咱点上这个方法。因为它里边是根据你的hi的值得到咱也加拦截器，然后后面加一个叫。点啊，咱加一个response。箭头函数通过response把咱返回那个用户信息得到，就是写一个response，点上date，点上date，再点上那个名字，我就从这里边复制了啊，咱上午写过它就叫。User info这个啊，然后这个得到之后，咱们把这得到数据给它复制给我们这个。Log in info这个对象，因为单上面通过它判断，我们给它赋值。这是点。Login info这个。等于我们这个值，这样的话应该就可以了啊，然后最后咱按照之前方式把它也是放到咱的cookie中啊，其实不放也能显示，我就给它放进去啊，这里边加上咱这个叫这点。

烙印。就是这里啊。所以这样的话，咱现在把这个微信扫码之后，在首页面显示数据的过程，我们就最终完成了，它里边就这么一个过程啊，咱们就就完了，然后写完之后咱再看一遍，最后我们做一个完整测试，看这过程啊，它的做法就是在首页面中，首先我们先取到路径中这个token字符串，用这点root.query.token把这取到。然后取到之后做个判断，如果这个值能取到，咱就用微信这种方式操作，如果取不到，还用之前方式做登录，我这里边如果取到，咱建一个方法叫微信捞印，在里边写这个过程，然后过程怎么做？第一部分先把token值放到咱的cookie中，因为咱们有拦截器，是取这个值放到head中，然后能调那个接口放到cookie，这个来个空，然后下面调接口，接口里边得到它返回的用户信息从title中取到，然后用户信息就是log info，并且放到里面去。

而log info咱在之前是写过的，咱看上面啊，咱是做这个判断，就是里边没有ID值，那我们就显示登录注册有I地址，就显示你的用户的头像，还有用户的昵称，把这些我们都做到，所以这样的话啊，咱们把这个我们就最终完成了主要准备过程啊。这是咱们做的这么一个流程啊。然后这样的话，咱们这个代码最终写完了，最终咱们把效果我们最后测试一下啊。这服务器我先给他重启一下啊。包括后端应该不需要变，然后咱们最后测试啊，看一下最终的结果是什么样。

我们等他先穷起来啊。啊，这个啊启动。然后启动之后啊，这里边为了明显，我把这个先都给它清一下啊，里边有一些缓存数据先给它清掉。然后清掉之后，首先咱先访问那个就是二维码的界面啊，当然实际中肯定有一个登录页面，我就直接访问了，咱就看效果就可以啊local house咱是8150，然后加上咱那个地址。这地址呃，是什么不记得啊，从里边复制一下。就是咱们的这个地址。这里啊，它叫做。Apiu center微信啊是这个地址。然给他复制过来，这叫loe，然后现在我一回车，它就进入到我们的二维码界面，然后我现在扫下这个二维码，我一同意，它会到咱的首页面，然后咱看首页面中啊，看里边这个特点。

啊，我们会发现啊，目前在水面中咱们正常效果，这是不是应该是显示，但是目前它没有显示，那咱看什么问题啊。首先接口应该没有错啊，咱看接口中的一个特点啊。咱先看接口中啊。在我们接口里边，大家看这过程中，这个过程应该做的查询，包括数据应该也加到数据库，但是目前首页面中没有显示，那问题咱看一下啊，是哪里写的不对啊，咱又来排查。首先点F12先看里边啊，它是报了什么错误啊，然后咱们再排查啊。啊，这个啊，他现在没有报错，那怎么做呢？咱就来到前端，因为接口肯定是没有错，接口一般都是正确，它这个数据应该可以得到，那咱来到前端啊，前端里边我们看啊，在前端中呢，我们是比fo里边获取到这个token的字符串，咱先看这个值能不能取到，咱先给它，比如我做一个输出啊，咱看一下啊有没有这个值。

就是console log。直接输出它叫这点token。就先取下啊，然后这个我先注掉，咱一步来排查，看看问题在哪里啊，先看值有没有。这是取你路径中那个特N值。然后现在我到里边，比如我这个位置先刷新。大家看啊，我先刷新。我们看这位置。这个值是不是可以取到，这是我们那一个token字符串嘛，它把这个值应该是可以取到的啊，就是这个过程应该是没有错的，然后咱们往下来看啊，就是它能取到之后，那我们下面就调这个是微信捞印这个方法，把这方法我们最后调用，那咱们往下来看啊，调这方法微信烙印，而在微信烙印中咱是取这个值放到这里边去，并且它调这个接口，那我们看这个过程对不对啊，那咱们。

正来试啊，比如现在我这里边也做一个输出console.logo。然后怎么输出呢？我就把这值取一下，看它能不能取到。比如说呃，咱输出的多一点。填上边。意味着。先把这个贝点偷开，比如我在这个位置输出一下啊，为了区分咱加一些特殊符号我就能找到。这是一个输出啊，然后输入之后，下面我从cookie中把那值给它取下，就是点上一个。Get方法。然后里边啊，加上咱这个名字，鼓励ton啊，这给他。取一下啊，来看这个值有没有，诶选错位置啊这里。鼓励to把这个取消啊。这个位置我也加上一个特殊符号。

来一个。等号。这一段我先注掉，咱看他能不能取到，然后再往下做啊，一步来调试。然后下面我们来测试啊。呃，这个。就保留这里啊，咱就看这个井号和这个星号，就是等于号和星号有没有值拉到里边，比如现在我把它还是刷新。因为它这值是有啊，然后咱看结果啊。在这过程中咱们找到啊，大家看。星号这个位置是不是有值啊。等于号位置是不是也有值啊，证明这个应该没有错，也就是说我们现在到我们前端中的这个位置。能取到值，然后你把这个cookie中的值也放到这里边去了，这步也是对的啊，然后下面是调接口，那咱把这个打开。这个啊，保留这里，我把这个打开，然后咱们做输出啊，所以注意我的过程啊，咱就一步去调试嘛，因为这个前端咱说过它也能抵8UG，但是那debug啊，我个人觉得不太好用啊，我还是习惯给他做输出用debug可以就是加上这个东西。

第八个咱说过啊，我现在就这么输出，然后在里边到这位置啊，咱现在在这个里边，我再做个输出这些，呃，这保留啊在这里输出，因为这就表示咱们调那个接口，然后得到它反应数据，那么看这个数据啊，这过程有没有输出，为了区分我换个符号就加个。井号，然后井号里边把这个得到。就是response。点上这个date.date然后这个叫右侧info啊，看这值我们能不能得到，这个咱先试一下啊，然后下面我先注掉，咱再往后慢慢来做啊。这个咱做测试啊。注意我这个排查的过程就是一步去看啊，看它里边是哪个值啊。好，咱们慢慢来排查。

呃，你注意一个问题啊，我这里在讲课，有时问题我要特别去演示出来啊，咱们啊慢慢还找这问题，有的同学比如说我这里有问题，我直接告诉你什么问题，那你以后肯定找不到，所以咱们一个来看啊，大看这位置console.log把这输出，看这值有没有啊，到里边还是刷新啊。看这个结果。咱刚才是那个井号。看数据。那我们发现啊，在这个位置中呢，比如现在我一刷新。Con。咱发现现在有这么一个问题啊，我这个等号输出了，而到这个井号这个位置，它是不是就没有输出，就是这部分应该是没有，比如他应该是没有调到啊，那咱们看这什么问题啊，它就没有调到。那咱们啊，看到这里，也就是说呢，刚才在这位置，咱是通过log in get log info，然后他去调用我们的接口，通过接口呢，把你用心息得到，但是这个过程中他没有调到这句话，没有做输出，那咱看啊，目前问题在哪里？

那怎么来调试呢？前端咱先放到这里，我在后端咱来调试啊。把这个我先给它重新启动啊。重新启动一下，那我们看啊，呃，这么启动啊。呃，用debug启动，但看后端它有没有调到这个东西啊。首先关掉啊，Debug。问题嘛，一步步排查，刚有同学说说什么IDID，注意啊，跟这个没关系，不是这个问题。啊，我先用debug启动啊，然后你的问题就我也说为什么不是这个问题。这大家注意啊，我刚才过程我再说一遍啊，刚才我的调制方式就是首先第一步我们先看这个偷窥有没有取到，咱一输出发现取到了，然后第二部分在里边，我们又是看这方法有没有掉到，咱发现这星号输出了，等号是输出了，但是到这方法中是没有调到，这井号没有输出，证明这个方法调的过程中应该有问题，它要么接口，要么前端，要么N这个哪里有问题啊，也就这个地方，那我们现在我把这接口，比如说我用debug启动。

然后在接口这个位置，咱把那个地方加个断点，就看它能不能调到，因为咱接口。是不是这个这是断点啊，加到这个位置，那就看它有没有调到这个方法，咱看这问题啊，那下面我们再来试一下啊。还是这个页面，因为它要时间啊，咱事儿的比较长一点，我再刷新。刷新。然后各位注意啊，现在我已刷新已发现。这是不是没有调到了，也就是说目前的问题我们大概能定位到了这接口不是它错，是咱们前端没调到这个接口啊，目前我们找到这个问题，就是前端不一定错，后端也没有错，是因为你前端没有去调到后端，那这个时候我们该怎么做呢？那要检查一下我们这个过程中是不是路径哪里有问题。

啊，所以咱们通过它定位到这个问题，那咱检查一下，看一下路径啊。你注意啊，这个比如我先给他咱先打开啊。打开，然后什么路径呢？因为咱们现在啊，我们的后端咱用的是这个叫8150端口，是不是这个端口，但我前端调的话，咱是并不是直接访问8150，我们通过的这个东西是不是这个。N这个进行访问，咱通过901，那咱就看一下N这个到底对不对啊，它问题应该就在这里，前端没有错，后端没有错，那是问题，就是中间有问题，你的调过程中，前端然后通过N这调后端，那这问题应该就在我们的N这个，所以咱们一步去找后端没调到，那不是他的问题，前端在调的过程中的这段代码中没有直接输出，所以里边在这里有问题，那咱就看一下N这个词。啊，不是，各位是否能听懂啊，这是一个排查问题方式，没有更好方式，咱只有U去看看到底是哪个环节出现问题，但是咱们定位到路径应该有错，那咱们看一下怎么错啊，我们就找到这个index。

啊，其实我刚才说过啊，我是想特别掩饰这个问题啊，让大家知道这种解决问题的方法啊，就是一步去看，没有更好的方式啊，当然每个人可能有自己习惯的方式，但是总的原则应该不变，那咱把这个打开大家看啊，找到下面各位应该能看到问题啊。咱们现在那个访问是不是叫U3特，但是我的U3特呢，之前用的是806啊，而我现在改成的是不是叫8150啊，所以咱的解决方式就是你把这对换号是需要改一下，因为咱们这个发生变化，它里边就没有调到啊，但是它这个提示中啊，提示他并不智能，它并没有给我们提示说哪个方案没有调到，只是说在里面出了这个错误啊。这些并没有做实际的提示，所以咱们需要去排查，有时候它并不能准确提示，咱现在把这个改成8150应该就对了，啊，就是这么一个问题，Andex出现这个错误，因为地址咱改了。

然后刚才同学说啊，有同学说了这个问题，说咱们一个是ID，一个方向ID，然后原先接口不能用啊，其实跟这个无关。为什么无关呢，你注意啊，我们现在就是。找到这里边啊。感觉同学问题是什么呢？就是我们在生成那个token字符串的时候，咱里边传的这个值。这是不是ID啊，我微信中是不是有open ID，就是这个无关啊，因为你open ID跟ID这个无所谓，咱是根据ID做操作，包括你在取值的时候，咱通过它一查，这个返回的log info中应该所有数据都有，包括咱每次将数据中加数据，比如说我加这微信是不是UID，这是存在的，所以咱是根据它去做操作啊，跟这个无关。咱们问题就是N出现问题，那咱现在找到了，我也改了，我把N这给它重启一下，最终再来试一下啊。

重新启动。把这个我先。打开，然后给它先停掉。杠s stop这个就停掉了，然后停掉之后我们给它最终再重启一下啊就是。现在应该就可以了啊，刚才问题我们定位到了不是前端也不是后端，是因为你N这个端口号没改，所以他报这个错误啊，然后咱给他再改回来，而这个结构啊，最终我们来试一下啊，比如现在我们把这个代码我们就给它。重新测试一下哈，先都给他。删掉。啊，咱们重新测试啊。包括看一下啊，接口启动了，呃，这断点给它先就是拿掉了啊，现在应该不需要了，现在应该可以了。刚才已经去掉了啊，然后包括前端这个也不需要重启，那咱就直接做一下最终的访问，看一下最后结果啊，咱们还是先来到我们那个二维码那个界面。

找到啊就是。诶，我怎么清掉啊local host。这个叫8150，加上咱那个地址。我们的地址就是刚才看到的。这个地址。就是这个。API u center，微信加上一个叫捞啊，把这个复制过来，然后加上一个叫。劳液，然后加上之后，咱现在给他做一个回车。然后我扫这个二维码，我们点一个同意，然后再看中的结果。我们看一遍啊。大家看这位置。这是我的一个头像啊，这是我的昵称就是大爱，这个头像现在是不是显示出来了，所以咱们把这个效果做到了啊，这是我们一个过程，而刚才问题是N，这个我刚才演示就是一个排查问题方式，咱没有更好的方式啊，当然你可能做法。

不一样，但是功能这个过程肯定是类似，先看后端对不对，然后端一般没有错误，因为都是接口，前端呢，咱就是去看到底是哪步出现错误，在过程中一种最原始方式，你可以输出，或者说之前咱说那个叫第八格，就这个。第八个当你加了第八个之后，他在这一行就会给你停止掉，比如说我们刷新，然后第八个它就会停到这一行，然后你可以一步步往下做这个调试啊，它里边就是准备过程啊，就是看你怎么去实现这个过程啊，咱现在直接输出最终定位到N的问题。在这个啊，我们就完成了啊，关于咱们这个微信登录主要这么一个过程啊。包括代码，我就把这个核心这部分给大家复制到这个图上来。啊，也就是这五分。拿过来。

这样的话完成了啊，这个操作啊。