4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/107-尚硅谷-云尚办公系统-微信公众号-微信授权登录-具体功能实现（下）.mp4原创

各位同学大家好，刚才呢，咱们完成了微信授权接口的开发，那下面呢，我们来修改前端，最终完成测试，那下面我们来看一下啊，首先在我们前端里边，我们按照课件中的过程啊。里边来改一个内，改什么内容呢？把这个域名改成你当前这个内网透的域名，注意啊，怎么改？给大家说明一下啊，我这里已经改过了，如果你用的不是我的域名也没有关系，那要给它改正确，咱们来看一下啊，在这个文件中，注意我这位置呢，为了测试方便，给大家加了一个按钮，就是清除当前这个token的一个效果啊，然后在里面就是把token值给它清空，把对象值制空，就是为了测试使用，然后大家往下看啊，在这个we chart log里边，它就得到这个token值，然后最终做判断，最终做跳转，在跳转的这位置，注意啊，它要到你们那个本地的接口服务中去，所以加上你本地接口对应那个内网穿透域名，我这本的接口是8800，它对应。

内网穿透是这个。硅谷课堂二的这个域名啊，这之前硅谷课堂用那个内网穿透，现在咱们依然可以使用啊，用的是它，所以你对照一下啊，配置的是8800对应的这个内网穿透的域名。这是第一个啊，然后之后再来看啊，往下来看，这个位置是那个手机号绑定的过程，在绑定的里边呢，大家看这位置呢，我也加了一个域名，这个域名是什么呢？当你绑定完成之后，应该回到我们当前这个页面路径，当前页面应该是9090这个路径，所以配置是9090对着的内网穿透的域名，这个注意啊，一个是8800，一个是9090，把这两个给他要配置对的。

然后你注意这对应的是我们后端接口，然后之后我们再来看啊，下面咱做什么呢？我们需要改一下这个的GS里边的相关内容，那咱来改一下啊，找到的JS文件也是在里边的这个位置。然后你把里边的就是这个地方改成你那个后端接口对应的域名就是8800域名，另外看下面啊，这个位置也同样改一下后端接口8800这个域名这些一定要改对啊，要不然它后面会有问题。所以主要啊，就是改这么几个地方，这个咱就完成了啊，完成之后我再重复一遍啊，然后最终我们进行测试，首先第一个啊，我们做法就是在改成你个后域名，然后下面改成你个域名块里边都改成88006的域名，因为要调用后台接口。这个啊，咱就完成了，完成之后最终我们进行测试啊，但是我强调啊，这个测试呢，咱不要保证说一次性都成功，所以我这里边我是实际现场写的，我之前也没有试啊，这个过程中可能会出现问题，如果出现问题，那咱们一点点进行调试，我这里说明啊，我演示呢，不能总演示都是对的，怎么演示都是正确的效果，咱要实际出发，我刚才代码你看啊，我都是一行一行去写的，包括这个接口都是从零去开发的，那在下面进行测试，测试过程中难免出现一些问题，如果出现问题，那咱们一点一点进行解决，最终把这个效果做到，那下面呢，咱们开始进行测试啊，首先这个后端接口我们给它重新启动一下，因为刚才加了很多接口，另外就是前端给它也是重启一下。

9090的伏，给它重启一下啊。然后咱们nm ru server这个给他重启，另外重启之后呢，这里边还有一个细节问题，各位注意啊，之前咱们生成过那个就是微信公众号的菜单，这个菜单呢，我们也需要给他重新生成一下，在菜单里边呢，有这么一个地方啊，把这域名也需要改一下，大家看这里。

因为咱们公众号是不是要访问咱们9090那套页面，所以这个域名要改成你9090的域名啊，这个我这里已经改过了啊，大家把这改一下，然后把菜单需要重新生成一下，要不然他访不到。这是啊，我们提到的，然后现在这个服务已经启动了，我们的这个前端也启动了啊，然后在前端里边，首先我们怎么测试，给大家写一下这个步骤啊。我这里写一下啊，咱先说修改的地方啊，写的详细点，第一个你修改一下公众号菜单的那个代码。然后把这里边改什么呢？把你那个地址给它改为这个9090对应的这个内网穿透域名的地址啊，这个需要改一下，然后咱们需要把这个公众号菜单给他重新去生成一下。

这一点特别注意啊，我这里边已经生成过了，你给它自己重新生成一下，改成9090对应的一个地址，就是刚才咱说的代码中的这个位置，把它就要改一下啊，对应的咱们改的就是这个类。啊，这大家一定要改一下啊，要不然这里边跳转不过去啊。然后之后我们进行测试啊，那怎么测试呢？咱们看一下我现在啊，打开我这个微信，然后里边找到公众号，为了防止问题啊，我把它先不再关注，然后再重新关注，咱们测试，现在我点击发消息，大家看是不是到这个级别啊，然后到里边之后，比如现在我选择我功能，我就点这个叫审批中心点这个。

然后一点大家看效果啊，在这里边它是不是出现一个界面啊，但这是我之前测试的啊，我现在为了明确，我把这个清一下。清除一下啊，这是我清除那个token啊，或者说你在里边啊，你可以把这个微信先退出去，然后再重新登录，我给他退出去啊，重新登录一下就为了防止缓存，因为之前我们做了很多操作，里面可能有一些缓存的问题啊，咱给他重新登录一下，然后咱们重新测试。我现在啊，在手机上点登录。这里边啊，重新进行登录。然后登录之后，下面呢，我们测试啊，点击公众号。然后点击发消息，点这个审批中心，然后大家看啊，在这里边它提示我们说叫认证失败啊，又提示一个认证失败，它提示了两次，那咱们这里边啊，有一个问题啊，这单一会儿解决，你看现在啊，出现第一个问题，它有一个提示说告诉我们说这个认证失败，正常来讲应该没这个，因为咱们这个径已经在进行了排除，但是目前还出了这个问题。

啊，这是第一个，咱就现场解决这个问题啊，问题一。先放到这里啊，然后之后再来看啊，你看现在啊，它这里边是不是弹出一个手机输入框，咱需要绑定手机号，那我现在啊，那我的数据库中我找个手机号，比如我就找这个啊，就找这个李四啊，这个手机号把它复制。然后复制过来之后，现在我把这个复制点确定，呃，大家发现啊，我点确定之后，是不是它没有反应了，咱们看内网穿透中有一个提示啊，什么提示是不是403应说它没有反应，那咱看为什么啊，所以现在出了第二个问题，当我们做这个手机号绑定，咱发现一个提示叫403啊，说它不能进行访，就是没有权限访问，或者说禁止访问。

这是我们看到第二问题，比如说现在到这里啊，咱这个测试就没法进行下去了，因为目前出现了两个问题。啊，这是问题二，那这问题呢，出现之后，咱肯定要解决一下啊，也是我一直提到的啊，我们写程序写代码不可能没有问题，你不可能都是一次性成功，肯定会遇到各种各样的问题，遇到问题不重要，重要的是咱们找到解决问题的方式，找到解决问题的办法，最终把问题给他解决掉，那下面咱就来解决一下啊，看他到底什么问题。首先啊，我们来看一下，目前这肯定不对啊，我先给它关掉。咱们解决问题啊，第一个呢，咱们的接口应该是没有写错，这路径都对，那问题在哪里呢？那这里边注意啊，咱们看一下前端里边大家看个地方啊，我们看里边的这个文件的，然后咱往下啊，各位应该记得啊。这什么意思啊？是不是拦截器啊，也就说我现在啊，每次发请求时候，先走这个请求拦截器，然后发请求，而每次接口数据之后到这个响应拦截器中，最终再返回，但是大家看啊，这里边有一个操作。

你注意看啊，我这里做了一个判断。如果说啊，返回状态码是208，那咱们是不是做这个授权操作，就是到咱们刚才接口中做这个最终操作，而现在呢，我们看那个里边，其实问题就在那个里边，咱们把里边这过滤器打开，我们看里边啊有一些相关的一些操作。包括咱看这个author filter里边，我们找到一个地方啊，大家看，当我进行这个认证授权之后，如果失败之后，他会给我们返回一个错误信息，然后错误信息里边大家看这个啊，我们之前写一个枚举类，这是不是叫认证失败，所以咱刚才提示是不是应该是他做的提示叫认证失败，你看里边啊，这个信息是不是叫认证失败，也就是在我们的前端里边，他是执行了应该是。

这个位置啊，就是做了这个认证失败，这个提示，把这个给我们返回了，那咱怎么做呢？很容易啊，咱是不是可以改成这个状态嘛，他是不是就到咱们这个路径中做这个授权操作，那咱改一下啊，就是第一个把这改一下，改成什么208，让他到咱们那个授权那个就是进行微信授权登录的接口中去，这是第一部分啊，改成208，或者说你把前端改一下也都可以，我就改一下后端部分了，这是咱们要做的第一件事情啊，把这个返回到状态码需要改一下，改成208，要不然它就提示认证失败啊，虽然说它也能跳转到那个手机号页面中，但是它里面最后这个提示改成208，让他做这个。微信认证授权的过程。这个啊，就是第一个做修改，然后这个之后我们再看第二个啊，第二个是咱做这个手机号绑定的时候，他报了一个403的问题，那这个什么问题呢？大家看这状态码应该见过403是不是禁止访问啊，那我说一下什么意思啊，比如我现在啊，你看啊，我在页面中，刚才咱有一个手机那个登录框，我们一点击是不是它就没有反应了，这个时候我一点击咱们看代码中啊，找到里我们看里边的就是。

这个位置。这里边是不是要绑定手机号，大家看啊，在我们这行代码中，咱们是调接口，通过阿里克斯方式调，咱们绑定接口，最终进行绑定，但是调接口呢，它要调的是咱们这个里边的接口，那我们找到啊，这个先关掉。然后大家看啊，在我们这个webt里边啊，这置有那个相关的接口，咱们把接口找到。啊，应该是刚才的。这个地方啊，我找一下。好，大家看啊，应该是在啊在这里，呃，这个应该写到这个web中比较好啊，我刚才写就写到process里边，那咱就放到这啊，你把这最好放到web的CTRL中啊，我说刚才没有找到呢，因为我写到这个位置啊，然后这个咱们打开啊，大家看里边，在这个里边呢，我们有一个接口，就是最后这个绑定手机号个是这个过程，你看里边啊加这个东西，所以目前还不是问题，那是什么问题呢？

不是，各位是否记得啊，咱之前曾经说过一个注解，这注解我这里写一下啊，大家跟我一起想一下这个注解。这有印象吗？这是什么？是不是叫跨域啊？比如我现在啊，通过咱们这个微信公众号这个地址访问到咱们后端地址，因为他们目前不是一个路径下的，所以这里边会有一个跨域问题，如果你在一个路径下的问题没有啊，目前会存在一个跨域，所以我现在加一个注解解决这个问题，刚才403应该就是它造成的是一个跨域问题，如果你在同一个域名下，那没有问题，我目前不是，所以把这个需要给它加上。

啊，这是我们刚才看到的两个问题，然后这个都改完之后，咱把这服务重新启动一下，然后最终我们再试一下啊，看一下最后的结果对不对。现在啊，我给他重新启动一下。前端啊，没有改什么，这一步需要重启。然后咱们等它启用起来啊，我们测试一会儿，咱们还是用这个李四啊，或者用张三都可以，或者用我的命啊，看你的实际，我用李四为例啊，通过它我们来做这个测试，然后李四这里边。有他这个信息啊，咱们通过这个手机号绑定测试一下啊。等他先起起来啊。现在啊已经启动了，然后咱们重新啊来到这个公众号里边，同样啊先给他。

不再关注啊，然后再关注，我们重新操作一下啊，现在我点击发消息，然后在里边点击这个叫审批中心，点击点击之后大家看啊，在这里边它会弹出一个框，让我们进行手机号的绑定，我现在输入手机号，咱们绑定一下，就是我刚才这个手机号，就是李四这个现在我点确定。大家看是不是就可以了，然后它是不是就到了我们这个界面中啊，所以现在就完成了对名在这过程就正确了，然后这个之后大家看啊，在我们的这个数据里边，这个四这个记录里边后，你看是什么，是不就咱们说那个微信ID，所以现在咱就完成这个数据的绑定。这个过程我们就完成了啊，这时候我们写这个后座啊，然后这里边比如现在登录之后，我们可以再点一下。基本信息李四总经理，包括比如说我再点一下这个审批列表，他目前就是已处理，包括待处理啊，他有一个待处理任务就是din这个包括咱们再来点是不是到这个界面，你看啊，这个界面看的是不是更加美观，比如它可以在审批或者做其他事情啊，在这里边我们可以完成它的显示，所以以上啊，咱们就完成了。

微信授权登录操作，通过这个过程把它进行实现，然后里面涉及到有很多的步骤啊，各位按照我刚才的步骤，把这个一个一个给它能整合出来，另外注意我最后演示这几个问题，第一个就状态码咱们改成208，第二个注意它的跨域问题，因为跨域它不能访问到，如果说你在同一个域名下可以，但单目前是两个域名，它不一样，所以把这个注解加到这个we chart ctrl上边。然后刚才我们测试最终也看到这个效果啊，所以这个我们就完成到这里，关于这个微信授权登录。