day13【微信扫描登录】/12-尚硅谷-谷粒学院-微信扫描登录（功能完善）

就是现在流程应该都走通了，然后下面咱该怎么完善，咱先看第一个啊，大家注意啊，看我们的过程。你看啊，第一步得到扣的，第二步得到a set token和open ID啊，就这里边有open ID和访问凭证，然后这个第三步咱是不是得到。扫码人的信息啊，但是各位注意啊，这边有这么一个问题啊。我这一步是要把数据加到数据库中了，如果说啊，你是第一次扫码，这个写法没有任何问题，但是如果说我是第二次扫码就会有问题了，什么问题呢？各位注意啊，就我现在你看这第三步操作这过程中，因为咱们现在。我获取之后是不是再做判断加到数据库，但如果说数据库中已经存在了相同的微信，那这个时候你是不是就不需要再获取这数据了，直接我们登录是可以了，因为里边就存在了，所以咱现在把这个代码可以给他换个位置。

我说各位是否能听懂啊，就是你现在表中已经存在了相同的微信，那这个时候咱就没必要再获取，直接咱们就登录就可以了，所以我现在把这第三步咱给他换个位置。换到哪里呢？换到这里边来。就是这个位置。大家看这写法啊，也就是说呢，如果说啊，咱们得到ND到表中查询，你这数据，如果能查出来，那咱就没必要再获取信息，直接到水页面登录可以了，但如果说你数据等于空，咱把信息获取到，然后再去加到数据库再登录，直接给它放到这里边去，放到你判断的这个逻辑中，这么做应该更加完善，因为你等于空就没必要再再调一次再获取啊，咱直接登录就可以了。这个啊，我们做一个完善给大家，把这个给他知道啊。当然写的外边功能是没有错啊，只是写里边应该更完善一些啊，但是你除了就写外边也没有问题啊，这个完善出来了，然后完善之后咱看最后一部分啊，现在咱是把这个。

获取信息，包括注册得到了，但是咱们还有最后一步。最后一步是什么呢？就是我现在啊。扫码之后在首页面中是不是要显示扫码人的信息啊，就把信息在里边做个显示，那咱要怎么显示呢？这是我们要做的最后一步啊，那咱们来给大家做个说明啊。这个做法要怎么做呢？给大家强调，首先啊，我们来看这么一个地方啊，就是咱们在上午写内登录的时候，我们在首页面怎么做到是登录呢。咱是这么做的。你看这个写法。这什么意思，各位应该记得啊，咱是不是从cookie中把这只取到，然后给它，是不是给它显示出来啊，咱这么做，所以现在咱们怎么让我登录之后这数据在页面中显示呢？首先第一种做法，咱们现在就是也可以把我这个数据，比如你的昵称，你的头像这些数据放到咱的cookci中，然后它里边起的名字，比如说我们现在也可以叫这个名字叫古力U3头，这么做也可以做到。

但是这么做啊，有一个问题希望各位注意啊，什么问题给大家我说明一下啊，这一图我先保存，然后把我刚才说这话我在图上画一下啊。就是我们要做的是。当我们。扫码之后在我们的首页面中要显示你那个微信的那个信息，比如说你的昵称或者说你的头像要显示，但是咱们之前的那个登录啊，就是我们之前登录之后的显示，我们在首页面中是从cookie里边获取到这个数据，然后做显示，当时写法咱是这么做的，把这个给大家截过来啊，咱是从。这边渠道，而现在呢，其实咱们也可以这么做啊，但是这么做会有一个问题。

往下写啊，就是扫码之后会信息，之前咱是这么做到的，而我们现在。啊，就是现在。也可以按照上面的方式。啊，上面方式也就是咱把那个扫码之后的那个信息也放到cookie里边去，然后跳转到首页面，它也可以进行一个显示，现在也可以这么做，但是这么做会有一个问题啊，给大家说明啊。我这么来写啊，往下画，就是也能这么做。但是啊，但是如果说咱们把扫码数据放到cookie里边，会有这么一个问题。啊，问题什么问题呢？给大家说明啊，这问题跟咱们说过，就是强调啊，因为这个cookie它无法实现一种效果，这个效果叫做跨域。

就是他做不到这个跨域的这么一个访问啊，这cookie做不到，那什么意思呢？咱看个地法啊，我上午提到过，比如说哎，让cook域中放置，这里边是不是加个do main啊倒闷就表示你cookie的作用范围，就是这个地址它会带cookie，假如我现在里边有问题，比如说举个例子啊，比如我现在啊，我当前项目假如说是这个域名，比如是一个叫做啊鼓励。点com啊，我是这个域名，这是我当前域名，但是比如说我在项目中有其他域名，假如其他域名我叫这个什么啊，比如叫at硅谷点com，大家看这两个是不是就是不同的域名，那这个时候比如说你现在在鼓励点com中有cookie，那在at硅谷中是得不到，这个cookie中，它只能在一个这个域名中得到，这就叫做cookie不能做到跨域，所以咱这么做就不合适了，也就说我这里边你low houses都需要local house，因为咱是本地，这么做都没有问题，但如果你这个放到实际的应中，当你在用中有一个域名叫鼓励一个域名叫at体硅谷，两个不一样，那cookie值它就不能得到，因为它无法实现跨域啊，这是咱们这问题。

比如我说的这个特点啊，大家把这知道。这个寄过来啊，也就是说呢，咱们在。鼓立点。com中cookie中放值，那你在at硅谷中鼓励中的这个cookie值是得不到的与这叫跨域访问。这个啊，大家也得知道，但是其实我们一会儿写的话，按照我们目前这种效果，怎么写都对，因为咱们都是low house，但是如果你放到实际项目中会产生这个问题，所以咱们不见用cookie传递数据，虽然能做到咱不这么做，那咱要怎么做呢？咱说我们的最终的方案。啊，就是最终的这个解决方案啊，这是我们要做到的啊，那怎么做呢？咱的做法各位应该都知道啊，咱就是根据我这个。

微信的这个信息。然后使用我们。应该是之前学了一个东西叫JWT，给它生成一个token的字符串，然后咱们把这个token字符串通过这个路径给它传递到我们这个首页面中去啊，就通过路径进行传递，这是我们的解决方案，因为你路径中有token，那我们在水面中只可以取到，然后我们调接口，根据token把数据咱也可以得到啊，所以现在这是我们的解决方案。通过这个。JWT生成一个token的字符串，然后我们生成之后在这里边。根据这个token字符串获取到用户信息，然后最终再到咱的页面中给他做个显示，这是我们目前的这种方案啊，这个各位给到知道啊，那那下面按照这个终极的方案把它做一下啊，实际中一般都这么做，用cookie能实现，但是它无法实现跨域。

我在课件中应该也在这地方标注出来了啊，我们看一下啊，就是。这个地方。Cookie不能跨越啊，所以咱们需要用这种方式啊，那我最终咱就写一下啊，来到我们的代码中。在代码里边呢，就是这个位置，那咱怎么做呢？首先我们就是使用这个。KWT。然后根据我们这个微信信息，有这个member对象生成一个token的字符串，把这个生成，然后生成之后通过路径给它做个传递啊，就是通过路径传递这个token的图块。这个是咱做法啊，那下面我们给它就生成下啊，这生成方式我们之前应该是写过的啊，那我就快速给它生成下，咱就找到我们之前那个就是。

工具类啊，我们叫j wt UUS，点上应该叫这个啊，Get token get j wt token啊就是这个。然后在里边呢，是两个值，一个是ID，一个是昵称啊，咱们把两值给他传过来啊，就是一个ID啊，我就从这个取了啊member。就是member get这个ID。然后还有一个是member.get这个昵称，通过这两值最终我们生成一个token字符串，就是它啊，这个我们生出来了。但我的课件中稍微有点小问题啊，里边应该不是传对象，是传ID和那个昵称啊，可以看着把这个改一下啊，这个你要知道啊。然后生成之后呢，最后咱通过路径传递，怎么传递呢，就是在你这后面。咱们给它拼接上一个参数。比如说名字我叫token，然后它的值就是咱这个生成的j wt token啊，就这个值，当你在跳转到首页面中，它在路径后面就会带入这么一个token值，就是在你路径后面这个位置有一个问号，然后token等于你的字符串就是这么一个结构，因为字符串我们是用GFT生成的啊，里边有这么一个规则。

这是我们做的这么一个完善。但是这种方案。所以大家把这知道啊，因为这样的话就能很好解决这个跨域问题，不管你是哪个域名，每个后面都传这个值，跨域问题也可以解决掉啊，它就不存在cookie来说这个问题。这个啊，给大家复制过来，生成ton路径传递。咱们这么来做啊，然后这个弄完之后，咱们现在来看一下这个效果是什么样的啊，也就是说我们扫码之后，把这数据也可以加到数据库，然后最终生成一个token字符串，Token字符串通过路径传到我们的首页面中，然后在首页面咱最后再做其他处理啊，这个啊我们就写出来了，那咱们最后来试一下效果啊。

我现在把这个。就是前端我们先重新启动一下啊。NPMRUDV，然后咱们啊，看一下我的表里边，表中应该没有，应该有把这都删掉吧，省咱们看不到啊，重新咱一会重新加一个数据。全都给他删掉。这是之前测试的啊。就是目前这个样子啊，然后咱们一会儿微信一扫，在里边应该会多加一条数据，同时它会跳转到首页面中，在首页面的地址中会带着那个图文信息，那咱们啊把前端也请一下来看结果。就最终这个效果什么样的啊。我们先启动啊。当然这个位置中呢，还有这么一个问题啊，因为咱们现在测不出来，但是各位要知道啊，咱们现在这个端口号改成了8150，所以你把N这中那个端口号是不是也需要改一下，要不然它之前的功能不能用了，端口号咱已经改过了啊，一会我再改啊，咱先把这个效果看一下，现在都启动了，然后都启动之后，最后咱们把这个结果来最终测试一下啊，看一下目前的效果是什么样的。

我们来试一下啊，首先我就直接返到我们那个就是。二维码的界面，这个界面，然后在界面中，我现在手机一扫二维码，一同意咱就看现在的跳转。大家看啊，我们先看一面的效果，这单没有写，先看这里。Local house3000可以过来，然后在后面大家看问号token等于是不是同文字符串，这时候就传过来了，咱们要的就这个结果啊，通过地址问号名称等于值把这个传过来。然后咱们再看一下我们的数据库中，把这个刷新，大家看就这套记录，这是我刚才加的这个微信的数据啊，就是他的open ID，包括这个昵称，然后包括里边这个。

头像啊，就这个我们都加进来了，这样的话，这个咱们就完成了啊。所以这是我们做到的这么一个特点啊，就关于这么一个实现啊。这个我先保存。